Angular 4 nested router outlet

3
votes

I have a router outlet in the AppComponent which loads child components fine. One of the child component has multiple child components and I want to load all child components into the parent router-outlet like below

AppComponent  <router-outlet> (This loads all child including products)
  Customers (component)
  Pricing   (component)
  Products  (component) <router-outlet name="products"> (This should load child products)
     TypeProduct1   (Component)
     TypeProduct2   (Component)

But all my child products are loaded in the main router-outlet e.g. when I type the url

http://localhost:4200/products/typeproduct1 - it loads the TypeProduct1 component successfully but in the main router outlet and not the product router outlet.

I am lazily loading Products module in the route. Could that be the issue?

EDIT:

The routes looks like this:

AppRoutingModule:

const routes:Route = [
  { path: 'customers', loadChildren:'/path/to/customers/module' },
  { path: 'pricing', loadChildren:'/path/to/pricing/module' }
  { path: 'products', loadChildren: 'path/to/products/module' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, useHash: true })],
  exports: [RouterModule],
  declarations: [NotFoundComponent]
})

ProductRoutingModule looks like this:

const routes: Routes = [
  { path: '', component: ProductsComponent },
  { path: 'type1', loadChildren: 'path/to/Type1product/module' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

All components load in the top level router outlet. I expected the type1 module to load in the products router outlet.

2
angular
Lazy loading shouldn't be an issue. What does your route configuration look like? Also, if you use named (also called secondary or auxiliary routes), the syntax for using them are different. You may want to remove the name attribute and just use nested (also called child) routes. – DeborahK

2 Answers

2
votes

If I'm understanding your question correctly, you want to the components TypeProduct1 and TypeProduct2 into the <router-outlet> in ProductsComponent. As already stated, child routes may be the solution.

I think your AppRoutingModule should be edited to:

// AppRoutingModule
const routes:Route = [
  { path: 'customers', loadChildren:'/path/to/customers/module' },
  { path: 'pricing', loadChildren:'/path/to/pricing/module' }
  { 
    path: 'products',
    loadChildren: 'path/to/products/module',
    children: [
      { path: 'type1', loadChildren: 'path/to/Type1product/module' },
      { path: 'type2', loadChildren: 'path/to/Type2product/module' },
    ]
  }
];
1
votes

To correctly use the concept of modules the routes should still be defined in the ProductRoutingModule. You only need to make a small edit. You should define the lazy loaded routes as children of the empty route.

ProductRoutingModule

const routes: Routes = [
  { path: '', component: ProductsComponent, 
    children: [
        { path: 'type1', loadChildren: 'path/to/Type1product/module' },
        { path: 'type2', loadChildren: 'path/to/Type2product/module' }
    ]}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

UPDATE

If you have named routes in your lazy loaded component, do not use an empty route like shown. This is a known bug in angular that can be tracked here: Github: Lazy load auxilary #10981