Angular2 Router@3.0.0-beta.s 抛出与 systemjs 相关的错误

Angular2 Router@3.0.0-beta.s throwing a systemjs related error

当我将路由器添加到配置时,Angular2 systemjs 配置失败:

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

错误是:

Error: TypeError: router_1.provideRouter is not a function(…)

正确的配置是什么?


我更改了 systemjs 配置以不再指定路由器。现在我可以确认整个文件夹都被复制过来了。

我在 app/config/app.routes.ts 中的代码是:

import { RouterConfig, provideRouter } from '@angular/router';
import { HomeComponent } from '../components/home/home.component';

export const routes: RouterConfig = [
  { path: 'who', component: HomeComponent }
];

export const APP_ROUTER_PROVIDER = [
  provideRouter(routes)
];

然后在 app/main.ts 我有:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { LayoutComponent } from './components/layout/layout.component';
import { APP_ROUTER_PROVIDER } from './config/app.routes';

bootstrap(LayoutComponent, [
  APP_ROUTER_PROVIDER
])
.catch(err => console.error(err));

这对我来说似乎是正确的,因为所有教程代码都在那里。

我的项目结构如下:

node_modules/
public_html/
- app/
- index.html
- system.config.js
typings/
tsconfig.json
typings.json

我犯了两个严重的错误导致了这个问题。

  1. 已更新至最新的 angular 依赖项,无需重新配置或重建。
  2. 我的打字和其他项目配置被移动了。

我通过将配置移动到同一文件夹解决了上述问题。 /public_html。并在那里安装节点模块。

这导致了东西坏掉的问题。我按照最新的ng教程(Quick start)重新配置。现在还剩下一个问题。我不得不将 rxjs 升级到 "rxjs": "^5.0.0-beta.10" 并重新安装。然后安装它的依赖项并在我将它添加到 systemjs 时看到下面的内容:

npm install symbol-observable@1.0.1 --save-dev

现在唯一剩下的就是不再创建核心文件。所以我在教程中直接引用了 node_modules。

html:

<script src="/node_modules/core-js/client/shim.min.js"></script>
<script src="/node_modules/zone.js/dist/zone.js"></script>
<script src="/node_modules/reflect-metadata/Reflect.js"></script>
<script src="/node_modules/systemjs/dist/system.src.js"></script>

系统js:

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    '@angular/router':            'node_modules/@angular/router',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'symbol-observable':          'node_modules/symbol-observable',
    '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' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    'symbol-observable':          { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'forms',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);