Angular 从不推荐使用的路由器2.0.0-rc.2迁移到router@3.0.0-rc.1

我从六月份开始学习Angular2，当时angular.io快速入门和“英雄之旅”（教程）基于路由器弃用和旧的main.ts语法（现在我们有ngModules）

我在升级两个方面都有问题：使用ngModule（app.module.ts）和使用新路由器

错误：

无法加载资源：服务器 响应状态为404（未找到）localhost/：22错误： （SystemJS）XHR错误（404未找到）加载 （……）

在index.html行中抛出：

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

main.ts（旧版，作品）

main.ts（新的，不工作）

应用程序模块.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 { }

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

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);

(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);

旧路由（在app.component.ts中）

新路由（在app.routes.ts中）

systemjs.config.js

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 { }

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

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);

(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"
  }
}

---

我发现了错误，我遇到了类似的问题，如下所示：

ts文件开头的注释将终止应用程序。好吧，至少在一条评论中是这样的。疯狂的虫子

我的main.ts-文件如下所示：

/*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
    ]
);

---

确认一下，您已经安装了所有必要的软件包了吗@angular/router、@angular/http等。在我看来，加载程序正在寻找缺少的东西。我有，@R.Richards。我将我的package.json添加到我的问题中。我假设您以管理员身份运行了

npm安装

，一切都进行得很顺利。对