here is my Angular2 app structure:
Here is part of my code. The following is the main module
of the Angular2 app, that imports its routing rules and a child module (EdgeModule
) and uses some components related to some pages.
app.module.ts
@NgModule({
declarations: [
AppComponent,
PageNotFoundComponent,
LoginComponent
],
imports: [
...
appRouting,
EdgeModule
],
providers: [
appRoutingProviders,
LoginService
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Here is the routing rules for the main module. It have paths to login page and page not found.
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 });
Here is EdgeModule
that declares the component that it uses and import its own routing rules and 2 child modules (FirstSectionModule
and SecondSectionModule
).
edge.module.ts
@NgModule({
declarations: [
EdgeComponent,
SidebarComponent,
TopbarComponent
],
imports: [
...
edgeRouting,
FirstSectionModule,
SecondSectionModule
],
providers: [
AuthGuard
]
})
export class EdgeModule {
}
Here is the routing rules for the module that loads, as you can see, topbar and sidebar components.
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);
Finally, this is one of the two child module, that have its components and imports its routing rules.
first-section.module.ts
@NgModule({
declarations: [
FirstSectionComponent,
SomeComponent
],
imports: [
...
firstSectionRouting
],
providers: [
AuthGuard,
]
})
export class FirstSectionModule {
}
These are the routing rules for the pages (components) of FirstSectionModule
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);
Almost the same happens for second-section.module.ts
and second-section.routing.ts
files.
When i run the app the first things that load is the page related to FirstSectionComponent
, with no sidebar nor topbar.
Can you tell me what's wrong with my code? There are not errors in the console.
See Question&Answers more detail:
os