Angular4错误：router_deprecated_1.RouteConfig不是一个函数
问题描述：
我有一个应用程序我做本地使用新的路由器从4角，但路线不Plunker使用它，相反，你必须使用旧的过时的路由器，以便让路线在Plunker中正常工作。我将我的应用程序从本地机器移植到Plunker进行DEMO，除了路由之外，一切正常。这是我得到的控制台上的错误：Angular4错误：router_deprecated_1.RouteConfig不是一个函数
错误：（SystemJS）类型错误：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:[email protected]',
'rxjs': 'npm:rxjs',
'typescript': 'npm:[email protected]/lib/typescript.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
}
}
});
的Index.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/[email protected]/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/[email protected]/Reflect.js"></script>
<script src="https://unpkg.com/[email protected]/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})
]);
app.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
答
基本上base href起着crucial role with routing，
，当我们在Plunker运行应用程序，我们需要设置基本href像下面这样它正确设置它，
<script>document.write('<base href="' + document.location + '" />');</script>
我已经更新您的Plunker来解决问题，
希望这有助于！
路由已经改变了很多，检查读最新稳定版本[本文路线选择和导航（https://angular.io/guide/router），干杯!! –
Angular4有一个新的路由模块，但它不适用于Plunker。只有旧的弃用路由器Angular4已经在Plunker上运行。这就是为什么我要求帮助，看看是否有人能够发现我的朋克在哪里出错。 –
在链接我共享存在[Plunker]非常详细的例子（https://angular.io/generated/live-examples/router/eplnkr.html）.. –