我在VS 2015中创建了一个简单的Angular 2应用程序,但是我收到路由错误。错误是" TypeError:router_1.provideRouter不是函数"在zone.js中:323。我知道有人问过这个错误,但他们发现Gulp没有将网站目录中的路由器lib文件更新到最新版本。我检查了我的并且Gulp工作正常,但我仍然得到错误。任何帮助将不胜感激。
的package.json:
{
"version": "1.0.0",
"name": "ngcorecontacts",
"scripts": {
"postinstall": "typings install",
"typings": "typings"
},
"dependencies": {
"@angular/common": "2.0.0-rc.4",
"@angular/compiler": "2.0.0-rc.4",
"@angular/core": "2.0.0-rc.4",
"@angular/forms": "0.2.0",
"@angular/http": "2.0.0-rc.4",
"@angular/platform-browser": "2.0.0-rc.4",
"@angular/platform-browser-dynamic": "2.0.0-rc.4",
"@angular/router": "3.0.0-beta.2",
"@angular/router-deprecated": "2.0.0-rc.2",
"@angular/upgrade": "2.0.0-rc.4",
"systemjs": "0.19.31",
"core-js": "^2.4.0",
"es6-shim": "^0.35.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.12",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"typescript": "^1.8.10",
"gulp": "^3.9.1",
"path": "^0.12.7",
"gulp-clean": "^0.3.2",
"gulp-concat": "^2.6.0",
"gulp-typescript": "^2.13.1",
"typings": "^1.0.4",
"gulp-tsc": "^1.1.5",
"rimraf": "2.2.8"
}
}
System.js:
(function (global) {
// map tells the System loader where to look for things
var map = {
'app': 'appScripts', // 'dist',
'rxjs': 'libs/rxjs',
'angular2-in-memory-web-api': 'libs/angular2-in-memory-web-api',
'@angular': 'libs/@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' },
'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',
'@angular/router-deprecated',
'@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
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
routes.app.ts:
import { provideRouter, RouterConfig } from '@angular/router';
import { AboutComponent } from './menus/about.component';
import { HomeComponent } from './menus/home.component';
export const routes: RouterConfig = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
boot.ts:
import { bootstrap } from '@angular/platform-browser-dynamic';
import { APP_ROUTER_PROVIDERS } from './routes.app';
import { AppComponent } from './app.component';
bootstrap(AppComponent, [
APP_ROUTER_PROVIDERS
]);
app.components.ts:
import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
@Component({
selector: 'demo-app',
template: `
<a [routerLink]="['/']">Home</a>
<a [routerLink]="['/about']">About</a>
<div class="outer-outlet">
<router-outlet></router-outlet>
</div>
`,
// add our router directives we will be using
directives: [ROUTER_DIRECTIVES]
})
export class AppComponent { }
感谢。