Configuring the Router
Learn how to configure routes, render components, and create Angular applications with routing features.
We understand the usage of the forRoot method. The routes variable that we pass in the forRoot method is a list of Routes objects that specify what routes exist in the application and what components should respond to a specific route. It can look like the following:
const routes: Routes = [{ path: 'products', component: ProductListComponent },{ path: '**', component: PageNotFoundComponent }];
Each route definition object contains a path property, which is the URL path of the route, and a component property that defines which component will be loaded when the application navigates to that path.
Note: The value of a
pathproperty should not contain a leading/.
Navigation in an Angular application can occur either manually by changing the browser URL or by navigating using in-app links. In the first scenario, the browser will cause the application to reload, while the second will instruct the router to navigate along a route path in the application code. In our case, when the browser URL contains the /products path, the router creates an instance of ProductListComponent and displays its template on the page. On the contrary, when the ...