Angular2 RC5 |路由器：無法匹配任何路由

我目前正在使用Angular 2 - RC5與路由器3.0.0 RC1。這似乎是一個很常見的錯誤，但我找不到任何可行的解決方案。我的組件結構包含一個「BasicContentComponent」，其中包含主菜單和標題以及子路徑內容的輔助輸出口。「BasicContentComponent」來自共享模塊，子路由該子路由的特定模塊的組件。Angular2 RC5 |路由器：無法匹配任何路由

我的路由配置看起來像這樣

export const routeConfig = [ 
    { 
     path: 'home', 
     component: BasicContentComponent, 
     children: [ 
      { 
       path: '', 
       component: HomeContainer, 
       //canActivate: [IsAuthenticatedGuard], 
       outlet: 'content', // REMOVE THIS LINE 
       //resolve: { 
       // homeState: HomeResolver 
       //} 
      } 
     ] 
    } 
];

如果我刪除了「兒童」的定義，我能夠裝載「/家」，但這個配置我得到的錯誤。

以下是模塊配置，因爲問題也可能存在。

app.module.ts

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 

    RouterModule.forRoot(routeConfig), //see above 
    SharedModule.forRoot(), 
    HomeModule 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule {}

shared.module.ts

import { Store, StoreModule } from '@ngrx/store'; 

@NgModule({ 
    imports: [ 
     RouterModule, 
     CommonModule, 
     ... 

     StoreModule.provideStore(reducers), 
    ], 
    declarations: [ 
     BasicContentComponent, 
     ... 
    ], 
    exports: [BasicContentComponent, ...], 

}) 
export class SharedModule { 

    static forRoot() : ModuleWithProviders { 
     return { 
      ngModule: SharedModule, 
      providers: [ 
       MdIconRegistry, 
       ... 
       IsAuthenticatedGuard, 
       ... 
       HomeResolver 
      ] 
     } 
    } 
}

home.module.ts

@NgModule({ 
    imports: [CommonModule, SharedModule], 
    declarations: [ 
     HomeContainer, 
     HomeComponent 
    ], 
    exports: [HomeContainer] 
}) 
export class HomeModule { }

我GE t出現以下錯誤

browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'home'

任何想法可能是什麼問題？這是路由配置還是模塊問題？感謝

編輯我忘了模板：

app.component.html

<div> 
    <router-outlet></router-outlet> 
</div>

基本-content.component.html

<md-sidenav-layout fullscreen> 
    <md-sidenav mode="side" align="start" [opened]="isOpened$ | async" color="warn"> 
    <mainnav-container></mainnav-container> 
    </md-sidenav> 

    <page-header-container></page-header-container> 

    <div class="app-content"> 
    <router-outlet name="content"></router-outlet> // REMOVE NAME 
    </div> 

</md-sidenav-layout>

來源

2016-09-13 KenavR

HomeContainer。層次結構看起來像AppComponent - > BasicContentComponent（在AppComponent的默認中加載） - > HomeContainer（加載在BasicContentComponent的中） - **這是對刪除評論** – KenavR

我幫助Gitter。如果我刪除router-outlet的「name」屬性，並將其從routerConfig中刪除，則所有內容都按預期工作。我不完全明白爲什麼我必須刪除它，以及路由器如何找到正確的插座 - 這是有道理的，因爲插座是嵌套的 - 但是稍後我會回答我的答案，當指定插座的文檔更多完成。

感謝@DzmitryShylovich on Gitter。

來源

2016-09-13 18:18:32 KenavR

我在角2.0.0路由器v3有這個問題。無論我使用outlet參數還是沒有，我都會得到這個錯誤，並且我將它命名爲我的router-outlet。一旦我添加「children」，一切都會中斷： – Helzgate

我發現我的問題是/是。如果你使用webpack延遲加載，你必須創建另一個''，而不是爲你正在加載的組件，而不是你正在加載的ngModule的一部分，但是對於任何其他組件那個懶加載的ngModule加載（我希望這是有道理的）。所以如果我嘗試在延遲加載的路由中使用'children：'，那麼我需要創建第三個''。要指出的是，在我的懶加載ngModule路由配置中沒有理由使用'children：'，因爲所有路由都已經作爲子路由。 – Helzgate

哦，男人...... !!!你保存我的生活！ @KenavR –

Angular2 RC5 |路由器：無法匹配任何路由

回答

相關問題