Angular 2 RC5 & @ angular/router 3.0.0-rc.1 Ungültige Konfiguration oder ein Fehler?

Question

In diesem Fall tritt dieses Problem mit RC5 von Angular 2 und neuesten Router.

Meine routes.ts Datei ist dies:

import { 
    provideRouter, 
    Routes, 
    RouterModule 
} 
from '@angular/router'; 
import { 
    OverviewComponent, 
    LoginComponent, 
    ProfileComponent 
} from './shared'; 
import { AuthGuard } from './auth.guard'; 
import { HasToken } from './common/index'; 

const routes: Routes = [ 
    { 
    path: '', 
    component: OverviewComponent, 
    canActivate: [AuthGuard] 
    }, 
    { 
    path: 'login', 
    component: LoginComponent 
    }, 
    { 
    path: 'profile', 
    component: ProfileComponent, 
    canActivate: [AuthGuard] 
    }, 
    { 
    path: '**', 
    redirectTo: '/login' 
    } 
]; 

export const authProviders = [AuthGuard, HasToken]; 

export const appRouterProviders = [ 
    provideRouter(routes), 
    authProviders 
]; 

export const routing = RouterModule.forRoot(routes); 

Und meine app.module.ts Datei (Bootstrap), ist dies:

import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import {NgModule} from '@angular/core'; 
import {RouterModule} from '@angular/router'; 
import {BrowserModule} from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import {appRouterProviders, routing} from './routes'; 
import { 
    OverviewComponent, 
    LoginComponent, 
    ProfileComponent 
} from './shared'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    OverviewComponent, 
    LoginComponent, 
    ProfileComponent 
    ], 
    imports: [ 
    BrowserModule, 
    CommonModule, 
    // Router 
    routing, 
    // Forms 
    FormsModule, 
    ], 
    providers: [ 
     appRouterProviders, 
     provide(AuthHttp, { 
     useFactory: (http) => { 
      return new AuthHttp(new AuthConfig({ 
      headerName: 'Authorization', 
      headerPrefix: 'Bearer', 
      tokenName: 'token', 
      tokenGetter: (() => localStorage.getItem('token')), 
      globalHeaders: [{'Content-Type': 'application/json'}], 
      noJwtError: false, 
      noTokenScheme: false 
      }), http); 
      }, 
     deps: [Http] 
     }) 
    ],  entryComponents: [AppComponent], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { 

} 

Und schließlich mein Eintrag Datei (main.ts) das ist:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { enableProdMode, provide } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { AuthHttp, AuthConfig } from 'angular2-jwt'; 
import { AppModule, environment } from './app/'; 

if (environment.production) { 
    enableProdMode(); 
} 

platformBrowserDynamic().bootstrapModule(AppModule); 

Also, wenn ich laufe die ng-serve (es ist ein Winkel-cli mit webpack Projekt) Im dies e bekommen rror in der Konsole:

EXCEPTION: Error: Invalid configuration of route ' ': one of the following must be provided (component or redirectTo or children or loadChildren)

UPDATE CODE UND NEUE ERROR

Uncaught Unexpected value 'undefined' declared by the module 'AppModule'

AKTUELLE UPDATE

Es scheint, dass es ein Problem mit den Fässern ist. Wenn ich die Komponenten an die app.module es durch Pass diesen Fehler importieren, aber eine andere Angabe:

uri.match is not a function

ich natürlich versucht, das pathMatch Attribut in Routen, aber nichts ändert hinzuzufügen.

Answer 1

Mein Problem war schließlich ganz einfach (so viele Stunden probiert).

Lösung: Sie nicht importieren Komponenten aus Fässern sie aus ihrem Ordner direkt importieren.

Das löste mein Problem.

Update:

Auch über die undefined Fehler war das Problem, dass nicht alle meine Komponenten in der imports des app.module erklärt wurde.

Answer 2

Ich glaube, dass Sie Ihre Routen falsch werfen. Sie müssen Routen importieren.

import { Routes,provideRouter, RouterConfig, RouterModule '@angular/router'; 

und stattdessen eine RouterConfig,

statt

const routes: RouterConfig = [] 

Nutzungswege zu schaffen.

const appRoutes: Routes = [] 

https://angular.io/docs/ts/latest/guide/router.html

Answer 3

Sie brauchen nicht diese

provideRouter, RouterConfig 

noch diesen Code erforderlich importieren

export const appRouterProviders = [ 
    provideRouter(routes), 
    authProviders 
]; 

und

appRouterProviders, 

ändern Sie stattdessen die Art der Routen zu Routen, die zum Importieren benötigt werden

das wars.

Answer 4

Ihre Importe für das AppModule haben RoutingModule-Deklarationen dupliziert. Außerdem muss CommonModule nicht importiert werden, da es bereits vom BrowserModul exportiert wurde.

Versuchen Sie, Ihre Importe aus zu ändern:

imports: [ 
    BrowserModule, 
    CommonModule, 
    // Router 
    RouterModule, 
    routing, 
    // Forms 
    FormsModule, 
], 

Um dies:

imports: [ 
    BrowserModule, 
    routing, 
    FormsModule 
], 

Answer 5

Für noch jemand dieses Problem haben, wenn Sie eine Route für eine Komponente definieren und dann Komponente bei der Definition Unten auf der Seite wird dieser Fehler ausgegeben.

Grundsätzlich bedeutet dieser Fehler, dass die für die Route vorgesehene Komponente nicht definiert ist.

Verschieben Sie also die Komponentenklasse vor den Routen, oder stellen Sie beim Importieren sicher, dass sie korrekt importiert wurde.