interview community logo

0
0
What is Eager and Lazy loading?
1 answer

What is Eager and Lazy loading?

and how to use lazy loading with module and with standalone architecture?

Angular Robert Isaac asked 9 months ago


0

eager loaded is a JS code is imported into your root application e.g. AppComponent or AppModule, you just import it and use it

lazy loaded is the JS code that you use it in routing, e.g. { path: 'items', loadChildren: () => import('./items/items.module') }, in this example the module items and all of it's dependencies will only be downloaded and parsed when the user go to items route, if the user never went there it will never be downloaded

in standalone architecture, since we don't have module you can lazy load multiple component by having a routing file name for example items-routes.ts

export default [
  {
    path: 'foo',
    component: FooComponent,
  },
  {
    path: 'bar',
    component: BarComponent,
  },
] satisfies Routes;

then in your app.routes.ts to use it like that { path: 'items', loadChildren: async () => import('./items-routes') }

Robert Isaac answered 9 months ago loading comments...