I am currently encountering an issue with my setup using Angular 2 - RC5 and router 3.0.0 RC1. Despite searching for a solution, I have not been able to find one that resolves the problem. Within my component structure, I have a "BasicContentComponent" which includes the main menu and header, along with an auxiliary outlet for the content of child routes. The "BasicContentComponent" is part of a shared module, while the child route components belong to specific modules.
Here is a glimpse at my route configuration:
export const routeConfig = [
{
path: 'home',
component: BasicContentComponent,
children: [
{
path: '',
component: HomeContainer,
//canActivate: [IsAuthenticatedGuard],
outlet: 'content', // OMIT THIS LINE
//resolve: {
// homeState: HomeResolver
//}
}
]
}
];
If I remove the "children" definition, I am able to load "/home". However, with this configuration, I encounter an error.
The potential source of the error could also lie within the module configurations. Let's take a look at them:
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 { }
The encountered error is as follows:
browser_adapter.js:84 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'home'
Do you have any insights into what could be causing this issue? Is it related to the route configuration or possibly a modules-related problem? Thank you
Edit: I forgot to include 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>