{"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":"http:\/\/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":[],"_links":{"self":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/596","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/comments?post=596"}],"version-history":[{"count":5,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/596\/revisions"}],"predecessor-version":[{"id":605,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/posts\/596\/revisions\/605"}],"wp:attachment":[{"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/media?parent=596"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/categories?post=596"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.angulartraining.com\/daily-newsletter\/wp-json\/wp\/v2\/tags?post=596"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}