Loading Angular 2 module as child route

Question

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);

Klinki Klinki · Accepted Answer · 2016-11-15T13:50:13

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);

Loading Angular 2 module as child route

1 Answers