node.js - 尝试运行 Angular2/NodeJS 应用程序时，router_1.provideRouter 不是一个函数

Question

我创建了一个简单的 NodeJS/Angular2 应用程序，当我尝试访问该应用程序的入口点页面时遇到以下错误:

router_1.provideRouter is not a function

我不确定这个错误意味着什么，也不知道从哪里开始。有谁对为什么会发生这种情况有任何见解或想法？这是我的 package.json 文件(因为我认为它可能与 Angular 包之一有关)

{
  "name": "udemy-nodejs-angular2",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "start": "concurrently tsc -w &&  nodemon ./bin/www",
    "vendor": "gulp vendor",
    "gulp": "npm run vendor && gulp",
    "postinstall": "typings install",
    "typings": "typings"
  },
  "dependencies": {
    "@angular/common": "^2.0.0-rc.2",
    "@angular/compiler": "^2.0.0-rc.2",
    "@angular/core": "^2.0.0-rc.2",
    "@angular/http": "2.0.0-rc.2",
    "@angular/platform-browser": "^2.0.0-rc.2",
    "@angular/platform-browser-dynamic": "^2.0.0-rc.2",
    "@angular/router": "3.0.0-beta.2",
    "@angular/upgrade": "2.0.0-rc.2",
    "body-parser": "~1.13.2",
    "cookie-parser": "~1.3.5",
    "debug": "~2.2.0",
    "es6-shim": "^0.35.0",
    "express": "~4.13.1",
    "hbs": "~3.1.0",
    "morgan": "~1.6.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.0-beta.6",
    "serve-favicon": "~2.3.0",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.12"
  },
  "devDependencies": {
    "concurrently": "^2.2.0",
    "gulp": "^3.9.0",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-typescript": "^2.10.0",
    "nodemon": "^1.9.2",
    "typings": "^0.8.1"
  }
}

和我的 SystemJS 配置:

// map tells the System loader where to look for things
var map = {
    'app': 'js/app', // 'dist',
    'rxjs': 'js/vendor/rxjs',
    '@angular': 'js/vendor/@angular'
};

// packages tells the System loader how to load when no filename and/or no extension
var packages = {
    'app': {main: 'boot.js', defaultExtension: 'js'},
    'rxjs': {defaultExtension: 'js'}
};

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

// 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 = {
    map: map,
    packages: packages
};

System.config(config);

以下是我使用路由器功能的地方:

app.routes.ts

import {provideRouter, RouterConfig} from '@angular/router';

import {LoginComponent} from "./components/login/login.component";
import {DashboardComponent} from "./components/dashboard/dashboard.component";


export const routes: RouterConfig = [
    { path: 'login', component: LoginComponent },
    { path: 'dashboard', component: DashboardComponent }
];

export const APP_ROUTER_PROVIDERS = [
    provideRouter(routes)
];

boot.ts:

import {bootstrap} from '@angular/platform-browser-dynamic';

import {AppComponent} from "./app.component";

import { APP_ROUTER_PROVIDERS } from './app.routes';

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS
])
.catch(err => console.error(err));

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.template.html',
    directives: [
        ROUTER_DIRECTIVES
    ]
})

export class AppComponent {

}

谢谢

Answer 1

正如我们在聊天中发现的那样，问题是供应商文件夹中的路由器没有更新到新版本。

要解决这个问题，必须删除vendor文件夹下的路由器，然后运行npm install，最后npm run gulp重新创建vendor文件夹。