Roteador Angular2: como carregar corretamente módulos filhos com suas próprias regras de roteamento
aqui está minha estrutura de aplicativo Angular2:
Aqui está parte do meu código. O seguinte é o principalmodule
do aplicativo Angular2, que importa suas regras de roteamento e um módulo filho (EdgeModule
) e usa alguns componentes relacionados a algumas páginas.
app.module.ts
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
LoginComponent
],
imports: [
...
appRouting,
EdgeModule
],
providers: [
appRoutingProviders,
LoginService
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Aqui estão as regras de roteamento para o módulo principal. Possui caminhos para a página de login e a página não encontrada.
app.routing.ts
const appRoutes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '**', component: PageNotFoundComponent }
];
export const appRoutingProviders: any[] = [];
export const appRouting = RouterModule.forRoot(appRoutes, { useHash: true });
Aqui estáEdgeModule
que declara o componente usado e importa suas próprias regras de roteamento e 2 módulos filhos (FirstSectionModule
eSecondSectionModule
)
edge.module.ts
@NgModule({
declarations: [
EdgeComponent,
SidebarComponent,
TopbarComponent
],
imports: [
...
edgeRouting,
FirstSectionModule,
SecondSectionModule
],
providers: [
AuthGuard
]
})
export class EdgeModule {
}
Aqui estão as regras de roteamento para o módulo que carrega, como você pode ver, os componentes da barra superior e da barra lateral.
edge.routing.ts
Paths['edgePaths'] = {
firstSection: 'firstSection',
secondSection: 'secondSection'
};
const appRoutes: Routes = [
{ path: '', component: EdgeComponent,
canActivate: [AuthGuard],
children: [
{ path: Paths.edgePaths.firstSection, loadChildren: '../somepath/first-section.module#FirstModule' },
{ path: Paths.edgePaths.secondSection, loadChildren: '../someotherpath/second-section.module#SecondModule' },
{ path: '', redirectTo: edgePaths.dashboard, pathMatch: 'full' }
]
}
];
export const edgeRouting = RouterModule.forChild(appRoutes);
Finalmente, este é um dos dois módulos filhos, que possui seus componentes e importa suas regras de roteamento.
first-section.module.ts
@NgModule({
declarations: [
FirstSectionComponent,
SomeComponent
],
imports: [
...
firstSectionRouting
],
providers: [
AuthGuard,
]
})
export class FirstSectionModule {
}
Estas são as regras de roteamento para as páginas (componentes) deFirstSectionModule
first-section.routing.ts
Paths['firstSectionPaths'] = {
someSubPage: 'some-sub-page',
someOtherSubPage: 'some-other-sub-page'
};
const appRoutes: Routes = [
{
path: '',
children: [
{ path: Paths.firstSectionPaths.someSubPage, component: someSubPageComponent},
{ path: Paths.firstSectionPaths.someOtherSubPage, component: someOtherSubPageComponent},
{ path: '', component: AnagraficheComponent }
]
}
];
export const firstSectionRouting = RouterModule.forChild(appRoutes);
Quase o mesmo acontece parasecond-section.module.ts
esecond-section.routing.ts
arquivos.
Quando executo o aplicativo, a primeira coisa que carrega é a página relacionada aFirstSectionComponent
, sem barra lateral nem barra superior.
Você pode me dizer o que há de errado com o meu código? Não há erros no console.