Issue with multiple layouts using route data in Angular

Question

Fellow developers,

I've got an app that makes use of multiple layouts (eg. the login route has no navbar, but dashboard routes have a navbar + footer). What I'm doing is adding the layout to use in the data property in the route definition, so for example:

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
    data: { layout: Layouts.FooterOnly }
  },
];

The layout to use is then set in the AppComponent on route changes. Something strange is happening though and it's a bit tough to explain exactly what's going wrong. The bug can be reproduced by doing the following in the sample repo below:

1. Navigate to Login route from Dashboard route.
2. Navigate back to Dashboard route.
3. Navigate to Users route.

For some reason, the router outlet then stops working and always displays the content of the Dashboard page (ie. dashboard works!). There's no errors and I can't pinpoint why this is happening. Can someone shed some light on how on Earth to handle this?

Sample repo with the issue: https://stackblitz.com/edit/routing-layouts-xv1s8k

Answer 1

because you have two router-outlet

you can put your router outlet in an ng-template and pass it to your layout components

Here 's your repo adapted https://stackblitz.com/edit/routing-layouts-jzgekp