javascript - Angular 2 RC5 |路由器 : Cannot match any routes

标签 javascript angular typescript module router

我目前正在使用 Angular 2 - RC5 和路由器 3.0.0 RC1。这似乎是一个很常见的错误,但我找不到任何有效的解决方案。我的组件结构包括一个“BasicContentComponent”,其中包括主菜单和标题以及子路由内容的辅助 socket 。 “BasicContentComponent”来自共享模块,子路由组件来自该子路由的特定模块。

我的路由配置是这样的

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

如果我删除“children”定义,我可以加载“/home”,但使用此配置我会收到错误。

以下是模块配置,问题可能也出在这里。

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 { }

出现以下错误

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

知道问题出在哪里吗?是路由配置问题还是模块问题?谢谢

编辑 我忘记了模板:

app.component.html

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

basic-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>

最佳答案

我在 Gitter 上得到了帮助。如果我删除 router-outlet 的“名称”属性并将其从 routerConfig 中删除,一切都会按预期进行。我不完全理解为什么我必须删除它以及路由器如何准确地找到正确的 socket ——这有点意义,因为 socket 是嵌套的——但我会在稍后当命名 socket 的文档更多时更新我的​​答案完成。

感谢 Gitter 上的@DzmitryShylovich。

关于javascript - Angular 2 RC5 |路由器 : Cannot match any routes,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39475943/

相关文章:

typescript - 在 TypeScript 中声明抽象方法

javascript - Chart .js 方法未实现

angular - 如何调试 angular 项目中损坏的 ng lint

javascript - 强制ESLint使用ES6

javascript - 倒退消失后如何让时钟出现在屏幕上

javascript - 在每个空格后标记一个特定的单词

angular - 如何将一组具有相同查询参数的值传递给路由器?

javascript - Highcharts 甘特图显示为条形而不是线条

angular - 如何为PostgreSQL支持的Spring,Angular和Django微服务编写Docker容器

javascript - Angular 2 : what expressions can we interpolate in template