Search code examples
angulartypescriptangular7lazy-loadingangular7-router

Angular 7 lazy loaded module's component loading twice

I made a very cut down version of our project here: https://stackblitz.com/edit/angular-double-load-issue

We have a lazy loaded 'client' module, which contains a client-layout component.

Components rendered in client-layout, such as the Home component load twice, can anyone tell me why this would be?

See the console in slackbitz to see the home component's initialisation message display twice.

Solution

  • Because you have a duplicate router-outlet:

    client.component.html:

    <sl-client-layout>
  <router-outlet></router-outlet>
</sl-client-layout>

    client-layout.component (aka sl-client-layout):

    <router-outlet></router-outlet>


    Either change client.component.html to:

    <sl-client-layout></sl-client-layout>

    or just:

    <router-outlet></router-outlet>