This happens only sometimes ( usually after opening the application in the morning ).
We are using SwUpdate to update the app, and this behavior seems to coincide with the update times. The result html looks like this:
<app-root _nghost-vrt-c0="" ng-version="7.2.15">
<router-outlet _ngcontent-vrt-c0=""></router-outlet>
<app-layout _nghost-vrt-c4="">
<div _ngcontent-vrt-c4="" class="app-class">
<router-outlet _ngcontent-vrt-c4=""></router-outlet>
<app-component-1 _nghost-vrt-c7="">
</app-component-1>
<app-component-1 _nghost-vrt-c7="">
</app-component-1>
</div>
</app-layout>
</app-root>
The problem is the duplicate app-component-1. Under normal situations it only renders once. I have not been able to find a solution or even a question that describes this. Appreciate any help.
The relevant routing rules:
const routes: Routes = [
{
path: '',
component: Layout,
canActivate: [AuthGuard],
children: [
{ path: 'home', loadChildren: './home/home.module#HomeModule'},
{ path: 'otherRoute', loadChildren: './otherRoute/otherRoute.module#OtherRouteModule'},
{ path: '', redirectTo: 'home', pathMatch: 'full' },
]
}
{ path: 'under-construction', component: UnderConstructionComponent, data: { title: 'Under Construction' } },
{ path: '**', redirectTo: 'under-construction' },
]
here is the layout template:
<div class="tm-app">
<div >
<app-menu></app-menu>
<div>
<div>
<app-top-bar></app-top-bar>
</div>
<router-outlet></router-outlet>
</div>
</div>
I cleaned up as much as I could from the layout and output to keep code base safe. I'm editing this question to bump it. Because I did not find a solution yet. Is this ok?
In my particular case the issue had to do with a route guard implementing CanActivate
.
When the guard returns false
, the route can't activate (but it was already created). If at the same time the guard also redirects to another route, then a duplicated router-outlet component is created.
Solution: don't redirect from route guard CanActivate
. Only return true or false.
Alternative solution: Do redirect from the CanActivate
guard and always return true (while redirecting in the guard).
An alternative route can be returned from the guard, which is a better solution than always returning true.