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].