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 |路由器：无法匹配任何路由

回答

相关问题