Does importing a component from a lazy loaded module elsewhere in the app circumvent lazy loading of this module in Angular 12?

Question

We have some modules that come with their own navigation bars. These nav bars are actual components and they activated in the global HeaderComponent of the app as soon as the corresponding route is activated.

To pass the navigation component we use the dataproperty of the route in app-routing.module.ts:

import { TestNavigationComponent } from './modules/test/components/test-navigation/test-navigation.component';

{
  path: 'test',
  loadChildren: () => import('./modules/test/test.module').then(m => m.TestModule),
  data: {
    nav: TestNavigationComponent
  },
},

While this works fine, I wonder:

Does this circumvent lazy loading of the module? Is the module loaded anyway, because the navigation component is imported in the gobal app-routing.module.ts already?

If yes, how could I bundle the navigation component along with the module and pass it to the application's header?

The naviagtion is rendered in the header component like this currently:

private updateNavigation(snapshot: ActivatedRouteSnapshot): void {
  const nav: Type<Component> = (snapshot.data as {nav: Type<Component>}).nav;

  if (nav instanceof Type) {
    if (nav === this.navigationType) {
      return;
    }

    this.clearNavigation();
    this.navigationType = nav;

    const factory: ComponentFactory<Component> = this.componentFactoryResolver.resolveComponentFactory(nav);
    this.navigationComponentRef = this.navigationRef.createComponent(factory);

    return;
  }

  for (let childSnapshot of snapshot.children) {
    this.updateNavigation(childSnapshot);
  }
}

Yes if you directly import that component it will be eagerly loaded. For the second question, you can have 2 router outlets 1 for the application header and 1 for the main. And your lazy loaded module can fill the header outlet once it's requested. And this will bring more complexity to your application. — Eldar
– Eldar, Commented Jun 7, 2021 at 9:26
@Eldar That was some great advice. I now have a router outlet for that, which makes everything much easier. — lampshade
– lampshade, Commented Oct 28, 2021 at 13:01

Simon_Weaver · Accepted Answer · 2022-10-26 23:33:11Z

1

I'm not sure exactly the reason you're passing the component itself rather than a string, which would allow you inside the module to just use a switch statement to give the correct component.

For visualizing what ends up in each module the --stats-json option for ng build is invaluable.

You can check to see where your components ended up with webpack-bundle-analyzer using the command

npx webpack-bundle-analyzer dist/APPNAME/browser/stats.json

That would (for this case) show your component in your main bundle.

I misunderstood your question at first but I'll leave this here as an aside:

You can now lazy load just components (if they are standalone) in Angular 14 and above.

{
   path: 'faq',
   loadComponent: () => import('./lazy-faq-dialog/lazy-faq-dialog.component').then(m => m.LazyFaqDialogComponent)
}

answered Oct 26, 2022 at 23:33

Simon_Weaver

147k92 gold badges688 silver badges724 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

lampshade Over a year ago

That's actually a nice idea, to create the component programatically. I'll give it a shot. Unfortunately the project is still on v13 and will not be updated before February I think. The anaylzer bundle is awesome. Must check it out. Thanks for that also.

Simon_Weaver Over a year ago

@lampshade good luck! I managed to update to v14 pretty easily as far as the base update went. But changing components over to standalone is what takes time. One of the biggest issues I came across is this one github.com/angular/angular/issues/46351 - so good to bear this in mind before you start.

Collectives™ on Stack Overflow

Does importing a component from a lazy loaded module elsewhere in the app circumvent lazy loading of this module in Angular 12?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related