How to lazy-load an Angular component from an html template?

Question

I have an existing Angular app which eager-loads everything, and I would now like to add lazy-loading capabilities to it.

Lazy-loading routes works fine, especially by following the guidelines provided by https://link.medium.com/xJ18mitCElb and https://link.medium.com/8F3G2rg0slb, with the following routes construct in AppRoutingModule:

{path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule)}

Programmatically loading components is also doable from the TypeScript code, by using a component factory, such as in https://medium.com/angular-in-depth/lazy-load-components-in-angular-596357ab05d8

However my application has multiple components which template embeds other components like:

component-a.html:

<h1>Title</h1>
<app-component-b></app-component-b>
<app-component-c></app-component-c>

Is it possible to have app-component-b and app-component-c lazy-loaded without changing significantly the existing html code of component-a? (So far, as they are not accessed via a route, lazy loading just does not happen).

Many thanks for any help and guidance!

How and when do you want lazy loading in angular components ? Can You spot more details ? — GRD
– GRD, Commented Dec 5, 2021 at 14:56
Thank you your help GRD! In the given example, I would like that when component-a is instantiated, it triggers the lazy-loading of child components app-component-b and app-component-c. component-a could either be itself lazy-loaded (because bound a lazy-loaded route), or eager-loaded (because it belongs to the root AppModule module). Does it clarify? — bfredo123
– bfredo123, Commented Dec 5, 2021 at 16:16
Are you on what version of angular currently using with this ? — GRD
– GRD, Commented Dec 5, 2021 at 16:51
If you add <component-b> </component-b> inside template of component-a then it is not lazy loading. Are you wanting to put component-b exactly at this place in template of component-a ? — GRD
– GRD, Commented Dec 5, 2021 at 17:13

androbin · Accepted Answer · 2024-12-16 19:57:05Z

0

In newer versions of Angular Deferring can be used to lazy load some parts of the components. During SSR/SSG Incremental Hydration can be used for further optimization. Placeholders can be defined, too.

In the template it looks like the following:

<h1>Title</h1>
@defer {
  <app-component-b></app-component-b>
} @placeholder (minimum 500ms) {
  <p>Placeholder content</p>
}
@defer (hydrate on idle) {
  <app-component-c></app-component-c>
} @placeholder {
  <div>Large component placeholder</div>
}

Using standalone components in the router configuration loadComponent can be used, too:

const routes = [
  {
     path: 'lazy',
     loadComponent: import('./my-component').then((m) => m.MyComponent),
  },
];

answered Dec 16, 2024 at 19:57

androbin

1,76918 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

How to lazy-load an Angular component from an html template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related