Angular2路由器不推荐使用的依赖项未加载

Question

我最近更新了我的 angular2 版本并遇到了以下问题：

1. 路由器库不再存在，已被路由器弃用。

2. 我有这个菜单组件：

   import { Component }       from '@angular/core';
   import { DashboardComponent } from './dashboard.component'
   import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
   
   @Component({
     selector: 'main-menu',
     templateUrl: 'app/views/menu.html',
     directives: [ROUTER_DIRECTIVES],
     providers: [
       ROUTER_PROVIDERS
     ]
   })
   
   @RouteConfig([
     {
       path: '/dashboard',
       name: 'Dashboard',
       component: DashboardComponent,
       useAsDefault: true
     }
   ])
   
   export class MenuComponent {}
   

3. 当我尝试加载该应用程序时，它会失败，因为它无法从已弃用的路由器解析所需的文件。我收到以下错误：

Image of error

Answer 1

在 Angular2 RC.0 中你可能需要添加

'@angular/router-deprecated': {
  main: 'index.js',
  defaultExtension: 'js'
},

到你的packagesconfig.js

或者如果你想使用新的路由器的话：

'@angular/router': {
  main: 'index.js',
  defaultExtension: 'js'
},

来自rc.0 Plunker 的config.js 示例

(function(global) {

  var ngVer = '@2.0.0-rc.0'; // lock in the angular package version; do not let it float to current!

  //map tells the System loader where to look for things
  var  map = {
    'app':                        'src', // 'dist',
    'rxjs':                       'https://npmcdn.com/rxjs@5.0.0-beta.6',
    'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
  };

  //packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'app.ts',  defaultExtension: 'ts' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' },
  };

  var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
  ];

  // add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
  packageNames.forEach(function(pkgName) {
    map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
  });

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
  packageNames.forEach(function(pkgName) {
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
  });

  var config = {
    transpiler: 'typescript',
    typescriptOptions: {
      emitDecoratorMetadata: true
    },
    map: map,
    packages: packages
  }

  // filterSystemConfig - index.html's chance to modify config before we register it.
  if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

})(this);

Answer 2

更准确地说，使用 typescript 项目，在 package.json 文件中添加模块依赖项：

dependencies{
    ...
   "@angular/router-deprecated": "2.0.0-rc.1"
}

在您的 src/system-config.ts 文件中，这一行：

const barrels:string[] = [
     ...
    '@angular/router-deprecated'
];

然后，在使用它之前不要忘记在你的项目中运行npm i来安装这个模块。

Answer 3

其实解决方法很简单， 我们需要更改 systemjs.config.js 文件。 packages 数组包含 Angular 包的列表，而其中一个包是错误的

替换这个：'@angular/router', 用这个：'@angular/router-deprecated'，

    systemjs.config.js:
...
...
...

        var packageNames = [
            '@angular/common',
            '@angular/compiler',
            '@angular/core',
            '@angular/http',
            '@angular/platform-browser',
            '@angular/platform-browser-dynamic',
            '@angular/router-deprecated',
            '@angular/testing',
            '@angular/upgrade',
          ];

就是这样。