CODEWITHSUNDEEP
javascriptangulartypescriptmodulerouter
KenavR
KenavR

Reputation: 3899

Angular2 RC5 | Router: Cannot match any routes

I am currently using Angular 2 - RC5 with the router 3.0.0 RC1. This seems to be a pretty common error, but I can't find any solution that works. My component structure includes a "BasicContentComponent" which includes the main menu and the header and an aux outlet for the content of the child route. The "BasicContentComponent" comes from a shared module and the child routes component from specific module of that child route.

My route configuration looks like this

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

If I remove the "children" definition I am able to load "/home" but with this configuration I get the error.

Following are the module configurations, since the problem may also lie there.

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

I get the following error

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

Any idea what the problem could be? Is it a route config or a modules issue? thanks

Edit I forgot the templates:

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>

Upvotes: 2

Views: 544

Answers (1)

KenavR
KenavR

Reputation: 3899

I got help on Gitter. If I remove the "name" attribute of the router-outlet and also remove it from the routerConfig everything works as intended. I don't fully understand why I have to remove it and how exactly the router finds the correct outlet - it makes kinda sense since the outlets are nested - but I will udpate my answer at a later point when the documentation for named outlets is more complete.

Thanks to @DzmitryShylovich on Gitter.

Upvotes: 1

Related Questions