Angular Lazy loading Module Reload Not working

Question

I have implemented lazy loading module, and Inside the module's routing I'm loading the child components,

Like this.

  const routes: Routes = [
  {
    path: "",
    component: CustomerListComponent,
    children: [
      {
        path: "child",
        component: CustomerChildComponent
      }
    ]
  }
];

And Inside the CustomerListComponent's OnInit I'm navigate to the child component as below

export class CustomerListComponent implements OnInit {
constructor(private router: Router) {}
  ngOnInit() {
    this.router.navigate(["customers/child"]);
  }
}

My issue is If I click Menu/Button which is redirecting/loading to this module, the first time working fine, and Once this module loaded, again If click the same Menu/Button, it's not reloading/redirecting up to the child component as like this '/customers/child' instead it is load as '/customers

So My issues is, at first time I'm able to see both components Customers and Child also, but on the next click I'm able to see only Customers component only.

In My real time scenario, I keeping a tabs and one grid inside the customer component, that grid should be available to all the tabs,

In the router-outlet in Customers component I'm loading the child components.

So In the second click I'm seeing only the gird but the child component.

I have tried to simulate the problem with in this Stackblitz

In that stackblitz you can notice, On Clicking the Customers button at second time, The child will be removed from the routing.

Please help

Answer 1

I resolved this by adding below code in the constructor

this.subscriptions.add(router.events.subscribe((evt: any) => {
  if (evt.url === '/customers') {
    this.router.navigateByUrl('/customers/child');
  }
}));