Angular 2 RC5＆@ angular/router 3.0.0-rc.1無效配置或錯誤？

在這種情況下，我遇到了使用Angular 2的RC5和最新路由器的問題。Angular 2 RC5＆@ angular/router 3.0.0-rc.1無效配置或錯誤？

我routes.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 { 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 { 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（這是一個角度，CLI可以的WebPack項目）即時得到這個電子RROR控制檯：

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

更新代碼和新的錯誤

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

最新的更新

似乎有與桶的問題。如果我進口部件到app.module它繞過這個錯誤，但給人的另一種：

uri.match is not a function

我試過，當然添加pathMatch屬性的途徑，但沒有改變。

來源

2016-08-11 Vassilis Pits

似乎有一個問題的角度：https://github.com/angular/angular/pull/10595 –

我的問題畢竟是很簡單的（試了這麼多個小時）。

解決方案： 不要從桶進口元件直接從文件夾導入。

這解決了我的問題。

更新：

也即將undefined錯誤的問題是，並非所有的我的組件在app.module的imports被宣佈。

來源

2016-08-11 15:16:09

我不知道什麼確切地解決了什麼。你能比較之前/之後發佈嗎？ – ATX

是的，我今天晚些時候會這麼做 –

我有同樣的錯誤，直接導入組件後我沒有這個錯誤了 – neilhem

我相信你的鑄造路線錯了。您需要導入路線。

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

，而不是創建一個RouterConfig而且，

const routes: RouterConfig = []

使用路由來代替。

const appRoutes: Routes = []

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

來源

2016-08-11 13:36:11 mrdav30

這樣想，並已嘗試過。在這種情況下，我仍然得到：> Uncaught模塊'AppModule'聲明的未定義值'undefined' –

你並不需要導入這些

provideRouter, RouterConfig

也不需要這個代碼

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

和

appRouterProviders,

改爲將路線類型更改爲需要導入的路線

就是這樣。

來源

2016-08-11 13:47:42

我在這裏遇到問題，但仍然是相同的問題：/ –

如果我從我的'app.module'聲明'''OverviewComponent， LoginComponent， ProfileComponent''' 然後我得到第一個錯誤，否則我得到我的問題的第二個錯誤 –

您爲AppModule導入的內容具有重複的RoutingModule聲明。也不需要導入CommonModule，因爲它已經被BrowserModule導出。

嘗試從改變你的進口：

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

要這樣：

imports: [ 
    BrowserModule, 
    routing, 
    FormsModule 
],

來源

2016-08-12 01:46:42

檢查我的答案，這不是問題。 –

對於任何人仍然有這個問題，如果你定義一個部件的路由，然後在定義組件它會拋出這個錯誤。

基本上，這個錯誤意味着爲路由提供的組件是未定義的。

因此，將組件類移動到路徑之前，或者如果導入它，請確保它已正確導入。

來源

2016-12-28 10:59:25 Milad

Angular 2 RC5＆@ angular/router 3.0.0-rc.1無效配置或錯誤？

回答

相關問題