I have created an ngModule (EducationModule) that loads a set of navigation items and child routes that load into a router outlet defined in the root component (EducationComponent) defined in the module. Everything is working great except that I want the feature defined in the module to be a child route of another component (AuthenticatedComponent). In other words I want the routing defined in the module to be appended as child routes to a route defined at the root level. Is this possible using router 3?
I want the routes defined in EducationModule to be loaded in the router-outlet defined in AuthenticatedComponent but they are being loaded in the router-outlet in the root AppComponent template. See the route definitions below.
app.routes.ts - main routes loaded in AppModule
{
path: '', component: AuthenticatedComponent, canActivate: [AuthGuard],
children: [
{
path: 'profile/education',
loadChildren: 'app/modules/education/education-module#EducationModule'
},
education.routing.ts - routes in EducationModule
const educationRoutes: Routes = [
{
path: 'profile/education',
component: EducationComponent,
children: [
{ path: '', component: WebinarsComponent },
{ path: 'webinars', component: WebinarsComponent },
{ path: 'programs', component: ProgramsComponent },
{
path: 'courses',
component: CoursesComponent,
resolve: {
courses: CoursesResolve
}
}
]
}
];
export const educationRouting: ModuleWithProviders = RouterModule.forChild(educationRoutes);
I think the first route in educationRoutes
should not have profile/education prefix as it is already being present on its parent (route from AppModule
).
I normally use the same scenario as you described and it works.
Try this:
const educationRoutes: Routes = [{
path: '' // prefix is already specified in AppModule,
component: EducationComponent,
children: [
{ path: '', component: WebinarsComponent },
{ path: 'webinars', component: WebinarsComponent },
{ path: 'programs', component: ProgramsComponent },
{
path: 'courses',
component: CoursesComponent,
resolve: {
courses: CoursesResolve
}
}
]
}
];
export const educationRouting: ModuleWithProviders = RouterModule.forChild(educationRoutes);