Angular4错误：router_deprecated_1.RouteConfig不是函数

时间：2017-10-14 22:19:14

标签： angular routing angular2-routing plunker routeconfig

我有一个使用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'
    }
  }
});

的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/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})
]);

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：

DEMO App Plunker

看看@ src / main.ts ，然后@ src / app.component.ts

1 个答案:

答案 0 :(得分：0)

基本上base href会播放crucial role with routing，

当我们在Plunker中运行应用程序时，我们需要设置如下所示的基本href，以便正确设置它，

<script>document.write('<base href="' + document.location + '" />');</script>

我已更新您的Plunker以解决问题，

希望这会有所帮助!!

相关问题
最新问题