Angular4 Erreur: router_deprecated_1.RouteConfig n'est pas une fonction

Question

J'ai une application que j'ai faite localement en utilisant le nouveau routeur de Angular 4, mais les routes ne fonctionnent pas dans Plunker avec elle, plutôt, vous devez utiliser l'ancien routeur obsolète dans l'ordre pour que les routes fonctionnent correctement dans Plunker. Je transfère mon application de ma machine locale à Plunker pour une démo et tout fonctionne bien sauf le routage. Ceci est l'erreur que je reçois sur la console:

Erreur: (SystemJS) TypeError: router_deprecated_1.RouteConfig est pas une fonction

Je ne sais pas ce qui est faux. Quelqu'un pourrait-il aider plz ?. Voici les fichiers où le routeur dépréciée soit mis en oeuvre:

SystemJS du fichier de configuration

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 { 

} 

 

Voici le Plunker où le problème peut être vu:

DEMO App Plunker

Look @src/main.ts, puis @src/app.component.ts

Answer 1

Fondamentalement base href joue un crucial role with routing,

lorsque nous courons application Plunker nous avons besoin de mettre href de base comme ci-dessous pour qu'il fixe correctement,

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

J'ai mis à jour votre Plunker pour résoudre problème,

Espérons que cela aide !!