我有一个使用 Angular 4 的新路由器在本地制作的应用程序，但路由在 Plunker 中不起作用，相反，您必须使用旧的不推荐使用的路由器才能使路由在 Plunker 中正常工作。我正在将我的应用程序从本地机器移植到 Plunker 以进行演示，除了路由之外一切正常。这是我在控制台上遇到的错误：
错误：（SystemJS）TypeError：router_deprecated_1.RouteConfig 不是函数
不知道有什么问题。有人可以帮忙吗？以下是已弃用的路由器实现的文件：
SystemJS 配置文件
var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
angularVersion = ''; //picks up latest
}
else {
angularVersion = '@' + window.AngularVersionForThisPlunker;
}
System.config({
//use typescript for compilation
transpiler: 'typescript',
//typescript compiler options
typescriptOptions: {
target: "es5",
module: "commonjs",
strict: true,
sourceMap: false,
noImplicitAny: true,
moduleResolution: "node",
experimentalDecorators: true,
emitDecoratorMetadata: true,
lib:[
"es2015",
"dom"
]
},
paths: {
'npm:': 'https://unpkg.com/'
},
//map tells the System loader where to look for things
map: {
'app': './src',
'@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
'@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
'@angular/compiler': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
'@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
'@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
'@angular/router-deprecated': 'npm:@angular/router-deprecated',
'@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
'@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
'tslib': 'npm:tslib@1.6.1',
'rxjs': 'npm:rxjs',
'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
索引.html
<!DOCTYPE html>
<html>
<head>
<base href="." />
<script type="text/javascript" charset="utf-8">
window.AngularVersionForThisPlunker = 'latest'
</script>
<title>DEMO APP</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
main.ts
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from './app';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { provide } from '@angular/core';
platformBrowserDynamic().bootstrapModule(AppModule, [
ROUTER_PROVIDERS,
provide(LocationStrategy, {useClass: HashLocationStrategy})
]);
应用程序.ts
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { APP_BASE_HREF } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { PostsComponent } from './app.postsComponent';
import { CommentsComponent } from "./app.commentsComponent";
import { NewPostComponent } from "./app.newPostComponent";
import { DirectiveComponent } from "./app.directiveComponent";
import { NotFoundComponent } from "./app.notFoundComponent";
import { CounterDirective } from "./app.counter.directive";
import { DataService } from './data.service';
import { SortPipe } from "./app.sortPipe";
@NgModule({
declarations: [
SortPipe,
AppComponent,
PostsComponent,
CommentsComponent,
NewPostComponent,
NotFoundComponent,
DirectiveComponent,
CounterDirective
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule
],
providers: [
DataService,
{ provide: APP_BASE_HREF, useValue: '/' }
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
import { AppComponent } from './app.component';
import { PostsComponent } from './app.postsComponent';
import { CommentsComponent } from "./app.commentsComponent";
import { NewPostComponent } from "./app.newPostComponent";
import { DirectiveComponent } from "./app.directiveComponent";
import { NotFoundComponent } from "./app.notFoundComponent";
import { CounterDirective } from "./app.counter.directive";
@Component({
selector: 'app-root',
directives: [ROUTER_DIRECTIVES],
template: ` <div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" routerLink="/">Training App</a>
</div>
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav">
<li><a [routerLink]="['/PostsComponent']">Posts</a></li>
<!---<li><a [routerLink]="['/NewPostComponent']>New Post</a></li>
<li><a [routerLink]="['/DirectiveComponent']">Directives</a></li>--->
</ul>
</div>
</div>
</div>
</div>
<router-outlet></router-outlet>
`,
})
@RouteConfig([
{path: '/', as: 'PostsComponent', useAsDefault: true, component: PostsComponent}
])
export class AppComponent {
}
这是可以看到问题的 Plunker：
看@ src/main.ts，然后看@ src/app.component.ts