{"id":2999,"date":"2023-11-15T23:17:32","date_gmt":"2023-11-15T22:17:32","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=2999"},"modified":"2023-11-15T23:17:32","modified_gmt":"2023-11-15T22:17:32","slug":"lazy-loading-a-standalone-component-using-the-angular-router","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/11\/15\/lazy-loading-a-standalone-component-using-the-angular-router\/","title":{"rendered":"Lazy loading a standalone component using the Angular Router"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p>To lazy load a component, let us add a\u00a0<code>loadComponent<\/code>\u00a0property to a\u00a0<code>Route<\/code>\u00a0object. <\/p>\n\n\n\n<p>The value is a function that returns a dynamic\u00a0<code>import<\/code>\u00a0statement that points to an ES module (a\u00a0<code>.ts<\/code>\u00a0file), then resolves to the component class:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/app.routes.ts\n\nimport { Routes } from \"@angular\/router\";\r\n\r\nimport { HomeComponent } from \".\/app\/home.component\";\r\n\r\nexport const routes: Routes = &#91;\r\n  {\r\n    path: \"\",\r\n    pathMatch: \"full\",\r\n    redirectTo: \"home\",\r\n  },\r\n  {\r\n    path: \"home\",\r\n    component: HomeComponent,\r\n  },\r\n  {\r\n    path: \"about\",\r\n    loadComponent: () => import(\".\/about.component\").then((m) => m.AboutComponent),\r\n  },\r\n];<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>To lazy load a component, let us add a\u00a0loadComponent\u00a0property to a\u00a0Route\u00a0object. The value is a function that returns a dynamic\u00a0import\u00a0statement that points to an ES module (a\u00a0.ts\u00a0file), then resolves to the component class:<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[569,338,754],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2999"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=2999"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2999\/revisions"}],"predecessor-version":[{"id":3000,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/2999\/revisions\/3000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=2999"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=2999"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=2999"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}