角度2 RC5＆@角度/ルーター3.0.0-rc.1設定やバグが正しくありませんか？

Question

この場合、Angular 2のRC5と最新のルータを使用してこの問題が発生します。

マイroutes.tsファイルはこれです：

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 { 

} 

そして最後に、私のエントリファイル（main.ts）：

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); 

そして、私のapp.module.tsファイル（ブートストラップ）これですこれは、次のとおりです。

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); 

だから私はng-serve（それはWebPACKのプロジェクトとの角度-cliのだ）イムは、この電子を取得し実行しているときコンソールでrror：

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

UPDATEコードとNEW ERROR

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

LATEST UPDATEバレルに問題があると思われ

。私はバイパスこのエラーをapp.moduleにそれをコンポーネントをインポートが、他のものを与えている場合：

uri.match is not a function

私はルートが、何の変化にpathMatch属性を追加することはもちろんみました。

Answer 1

私の問題は、結局のところ（非常に多くの時間をかけて）非常に簡単でした。

ソリューション： は樽 からコンポーネントをインポートしないでください彼らのフォルダから直接インポートします。

それは私の問題を解決しました。

更新：

はまたundefinedエラーに関する問題がないすべての私のコンポーネントのはapp.moduleのimportsで宣言されたということでした。

Answer 2

あなたのルートを誤ってキャスティングしていると思います。あなたはルートをインポートする必要があります。

代わり

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

、代わりにRouterConfigを作成するのではなく、

const routes: RouterConfig = [] 

使用ルート。

const appRoutes: Routes = [] 

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

Answer 3

あなたはこれらの

provideRouter, RouterConfig 

も、このコード

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

と

appRouterProviders, 

必要をインポートする必要はありません。

代わりにルートにインポートする必要があるルートのタイプを変更する

それだけです。

Answer 4

AppModuleのインポートに重複するRoutingModule宣言があります。また、既にBrowserModuleによってエクスポートされているので、CommonModuleをインポートする必要はありません。あなたは、コンポーネントのルートを定義し、その後であなたのコンポーネントを定義した場合、誰でもまだ、この問題を持っているため

imports: [ 
    BrowserModule, 
    routing, 
    FormsModule 
], 

Answer 5

：これに

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

：からあなたの輸入を変更するには

てみてくださいページの下部に、このエラーがスローされます。

基本的に、このエラーはルートの提供されたコンポーネントが定義されていないことを意味します。

コンポーネントクラスをルートの前に移動するか、インポートする場合は正しくインポートされていることを確認してください。