{"id":3001,"date":"2023-11-15T23:23:08","date_gmt":"2023-11-15T22:23:08","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=3001"},"modified":"2023-11-15T23:23:08","modified_gmt":"2023-11-15T22:23:08","slug":"configuring-the-router-using-standalone-features","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2023\/11\/15\/configuring-the-router-using-standalone-features\/","title":{"rendered":"Configuring the router using standalone features"},"content":{"rendered":"\n<p>To configure the\u00a0<code>Router<\/code>, we pass the\u00a0<code>with*<\/code>\u00a0feature provider factories to the\u00a0<code>provideRouter<\/code>\u00a0function. The first argument passed must be\u00a0<code>Routes<\/code>\u00a0while subsequent arguments are 0..n router features, for example:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ main.ts\n\nimport { enableProdMode } from \"@angular\/core\";\r\nimport { bootstrapApplication } from \"@angular\/platform-browser\";\r\nimport { PreloadAllModules, provideRouter, Routes, withPreloading, withRouterConfig } from \"@angular\/router\";\r\n\r\nimport { AboutComponent } from \".\/app\/about.component\";\r\nimport { AppComponent } from \".\/app\/app.component\";\r\nimport { HomeComponent } from \".\/app\/home.component\";\r\nimport { environment } from \".\/environments\/environment\";\r\n\r\nif (environment.production) {\r\n  enableProdMode();\r\n}\r\n\r\nconst 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    component: AboutComponent,\r\n  },\r\n];\r\n\r\nbootstrapApplication(AppComponent, {\r\n  providers: &#91;\r\n    provideRouter(\r\n      routes,\r\n      withPreloading(PreloadAllModules),\r\n      withRouterConfig({\r\n        onSameUrlNavigation: \"reload\",\r\n      })\r\n    ),\r\n  ],\r\n}).catch((err) => console.error(err));<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>To configure the\u00a0Router, we pass the\u00a0with*\u00a0feature provider factories to the\u00a0provideRouter\u00a0function. The first argument passed must be\u00a0Routes\u00a0while subsequent arguments are 0..n router features, for example:<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[338,754],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3001"}],"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=3001"}],"version-history":[{"count":1,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3001\/revisions"}],"predecessor-version":[{"id":3002,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/3001\/revisions\/3002"}],"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=3001"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=3001"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=3001"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}