Angular - Routing and Navigation Part 3

Milestone 2: Routing module

In the initial route configuration, you provided a simple setup with two routes used to configure the application for routing. This is perfectly fine for simple routing. As the application grows and you make use of more Router features, such as guards, resolvers, and child routing, you'll naturally want to refactor the routing configuration into its own file. We recommend moving the routing information into a special-purpose module called a Routing Module.

The Routing Module has several characteristics:

• Separates routing concerns from other application concerns.
• Provides a module to replace or remove when testing the application.
• Provides a well-known location for routing service providers including guards and resolvers.
• Does not declare components.

Refactor the routing configuration into a routing module

Create a file named app-routing.module.ts in the /app folder to contain the routing module.

Import the CrisisListComponent and the HeroListComponent components just like you did in the app.module.ts. Then move the Router imports and routing configuration, including RouterModule.forRoot, into this routing module.

Following convention, add a class name AppRoutingModule and export it so you can import it later in AppModule.

Finally, re-export the Angular RouterModule by adding it to the module exports array. By re-exporting the RouterModule here and importing AppRoutingModule in AppModule, the components declared in AppModulewill have access to router directives such as RouterLink and RouterOutlet.

After these steps, the file should look like this.

src/app/app-routing.module.ts

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';
 
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';
import { PageNotFoundComponent } from './not-found.component';
 
const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'heroes',        component: HeroListComponent },
  { path: '',   redirectTo: '/heroes', pathMatch: 'full' },
  { path: '**', component: PageNotFoundComponent }
];
 
@NgModule({
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging="" only="" purposes="" span="">
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

Next, update the app.module.ts file, first importing the newly created AppRoutingModulefrom app-routing.module.ts, then replacing RouterModule.forRoot in the imports array with the AppRoutingModule.

src/app/app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
 
import { AppComponent }     from './app.component';
import { AppRoutingModule } from './app-routing.module';
 
import { CrisisListComponent }   from './crisis-list.component';
import { HeroListComponent }     from './hero-list.component';
import { PageNotFoundComponent } from './not-found.component';
 
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
    PageNotFoundComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Later in this guide you will create multiple routing modules and discover that you must import those routing modules in the correct order.

The application continues to work just the same, and you can use AppRoutingModule as the central place to maintain future routing configuration.

Do you need a Routing Module?

The Routing Module replaces the routing configuration in the root or feature module. Either configure routes in the Routing Module or within the module itself but not in both.

The Routing Module is a design choice whose value is most obvious when the configuration is complex and includes specialized guard and resolver services. It can seem like overkill when the actual configuration is dead simple.

Some developers skip the Routing Module (for example, AppRoutingModule) when the configuration is simple and merge the routing configuration directly into the companion module (for example, AppModule).

Choose one pattern or the other and follow that pattern consistently.

Most developers should always implement a Routing Module for the sake of consistency. It keeps the code clean when configuration becomes complex. It makes testing the feature module easier. Its existence calls attention to the fact that a module is routed. It is where developers expect to find and expand routing configuration.