Submodule 21.1: Routing - Practice

Update the Router

The existing  app-routing.module.ts  file includes:

Update the app-routing.module.ts file to make use of the routes defined above as follows:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { routes } from './routes';
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [ RouterModule ],
declarations: []
})
export class AppRoutingModule { }

Notice

  • the import of the { RouterModule, Routes } from '@angular/router' . The Angular Router is an optional service that presents a particular component view for a given URL. It is not part of the Angular core. It is in its own library package, @angular/router.
  • the import of OUR { routes } from './routes';
  • The creation of the Router Module AppRoutingModule in the imports array in the decorator @NgModule: RouterModule.forRoot(routes).
    This way a routing module is created that includes the router directives, the router configuration and the instantiation of the router service.
  • In addition, we also specify RouterModule in the exports property: exports: [RouterModule].