从已弃用的路由器2.0.0-rc迁移.2 .到router@3.0.0-rc.1

Question

我从6月份开始学习Angular2。IO快速入门和"英雄指南"(教程)都是基于已弃用的路由器和旧的main。ts-syntax(现在我们有了ngModules)。

我在升级这两个东西时都遇到了问题:使用ngModule (app.module.ts)和使用新的路由器。

错误:

http://localhost:3000/traceur加载资源:服务器失败返回404 (Not Found) localhost/:22错误:加载XHR错误(404 Not Found(…)http://localhost: 3000/的跑酷者所

在index.html中抛出:

System.import('app').catch(function(err){ console.error(err); });

主要。ts (OLD, works)

import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http, Headers, Response } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object

// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';
bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);

主要。ts (NEW，不工作)

import { AppComponent }   from './app.component';
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import { routing, appRoutingProviders } from './app.routing';
// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';

@NgModule({
  imports: [ BrowserModule, routing ],
  declarations: [ AppComponent ],
  providers: [
        appRoutingProviders,
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

旧路由(app.component.ts)

  @RouteConfig([
  { path: '/unsere-angebote',
    name: 'UnsereAngebote', 
    component: UnsereAngeboteComponent,
    useAsDefault: true
  },
  { path: '/ihre-loesungen',
    name: 'IhreLoesungen',
    component: IhreLoesungenComponent
  },
  ...

新的路由(app.routes.ts)

import { Routes, RouterModule } from '@angular/router';
...
import { TrainingsComponent } ...
...
import {NewsComponent} from ...

const appRoutes: Routes = [
  ...
  { path: '/news',
    component: NewsComponent
  },
  {
    path: '**',
    component: PageNotFoundComponent
  }
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);

systemjs.config.js

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  }
  System.config(config);
})(this);

package.json

{
  "name": "abc-project",
  "version": "0.1.0",
  "scripts": {
    "start": "tsc && concurrently "npm run tsc:w" "npm run lite" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {
    "@angular/common":                    "2.0.0-rc.5",
    "@angular/compiler":                  "2.0.0-rc.5",
    "@angular/core":                      "2.0.0-rc.5",
    "@angular/http":                      "2.0.0-rc.5",
    "@angular/platform-browser":          "2.0.0-rc.5",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.5",
    "@angular/router":                    "3.0.0-rc.1",
    "@angular/router-deprecated":         "2.0.0-rc.2",
    "@angular/upgrade":                   "2.0.0-rc.5",
    "systemjs": "0.19.36",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "bootstrap": "^3.3.7"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^1.8.10",
    "typings":"^1.3.2"
  }
}

Answer 1

我发现了错误，我有一个类似的问题，像这里:Angular2: error at startup of the app "http://localhost:3000/traceur 404 (Not found)"

ts文件开头的注释会终止应用程序。好吧，至少在评论中导入。疯狂的错误. .

主要我

。ts-file看起来像这样:

/*import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object
*/
/*
// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';
bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);*/

import { bootstrap }      from '@angular/platform-browser-dynamic';
import { AppComponent }   from './app.component';
import { HTTP_PROVIDERS, Http, Headers, Response } from '@angular/http';
import 'rxjs/Rx'; // required to use the .map()-Function on a Observable-Object

// Custom Services
import { GlobalSessionService } from './global-session.service';
import { NavbarMenuService } from './navbar-menu.service';
bootstrap(AppComponent,
    [
        HTTP_PROVIDERS,
        Http,
        GlobalSessionService,
        NavbarMenuService
    ]
);