{"id":596,"date":"2023-03-02T05:00:00","date_gmt":"2023-03-02T13:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=596"},"modified":"2023-03-01T19:26:42","modified_gmt":"2023-03-02T03:26:42","slug":"lazy-loading-standalone-components","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/lazy-loading-standalone-components\/","title":{"rendered":"Lazy-loading standalone components"},"content":{"rendered":"\n

Now that we’ve covered both standalone components<\/a> and lazy-loading Angular modules<\/a>, we can introduce the concept of lazy-loading a standalone component<\/a>, which wasn’t possible before Angular 14.<\/p>\n\n\n\n

From a syntax standpoint, the only difference is that we use loadComponent<\/code> instead of loadChildren<\/code>. Everything else remains the same in terms of route configuration:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Now, one of the benefits of lazy-loading a module is that it can have its own routing config, thus lazy-loading multiple components for different routes at once<\/a>.<\/p>\n\n\n\n

The good news is that we can also lazy-load multiple standalone components. All it takes is creating a specific routing file that we point loadChildren<\/code> to, like so:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

One last cool thing to share today: Along with the above syntax, Angular now supports default exports in Typescript with both loadChildren<\/code> and loadComponent<\/code>. <\/p>\n\n\n\n

This means that the previous verbose syntax:<\/p>\n\n\n\n

loadComponent: () => import('.\/admin\/panel.component').then(mod => mod.AdminPanelComponent)},<\/code><\/p>\n\n\n\n

Can now become:<\/p>\n\n\n\n

loadComponent: () => import('.\/admin\/panel.component')<\/code><\/p>\n\n\n\n

This works if that component is the default export in its file, meaning that the class declaration looks like this:<\/p>\n\n\n\n

export default class PanelComponent<\/code><\/p>\n\n\n\n

The same applies to loadChildren<\/code> if the array of routes (or NgModule<\/code>) is the default export in its file. You can see an example in Stackblitz here<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Now that we’ve covered both standalone components and lazy-loading Angular modules, we can introduce the concept of lazy-loading a standalone component, which wasn’t possible before Angular 14. From a syntax standpoint, the only difference is that we use loadComponent instead of loadChildren. Everything else remains the same in terms of route configuration: Now, one of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,21,8,20,23],"tags":[],"class_list":["post-596","post","type-post","status-publish","format-standard","hentry","category-angular","category-architecture","category-components","category-performance","category-standalone"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t