Multiple router-outlet, named router-outlet doesn't work

Question

I am trying to get multiple router-outlet working with different Component on the same path, however, the following code doesn't work.

Routes:

const routes: Routes = [
{ path: 'products', component: ProductComponent},
{ path: 'products', component: ProductHeaderComponent, outlet: 'header-route' },
{ path: 'products', component: ProductFooterComponent, outlet: 'footer-route' }
];

Html:

<router-outlet></router-outlet>//Primary Outlet
<router-outlet name="header-route"></router-outlet>
<router-outlet name="footer-route"></router-outlet>

Primary Outlet works.

Named Outlets, header-route and footer-route does not work.

Can you show your code for how you're trying to navigate to those components. Are you using routerlinks or doing it programmatically in your component code? — Narm
I am testing it by navigating to via the browser url. localhost:4200/products — Michela Dennis
I see. Would you show the path you're entering into the URL to attempt to navigate to those routes? — Narm
Oh geez, I totally overlooked that you have the exact same path to your different components. That is definitely not going to work either. You need to have a unique path to each component. They all can't have path: 'products' as their path. — Narm
I've got to run off for a bit. Take a look at this StackBlitz example. Hopefully that helps for now, if not I will check back later. Good luck! — Narm

Md Rafee Md Rafee · Accepted Answer · 2019-09-08T15:33:30

you can use multiple router outlet and access secondary router url by using (outletname: route) Example:

localhost:4200/loginpage(header-route: products)

Live Example: Stackblitz

Multiple router-outlet, named router-outlet doesn't work

1 Answers