本節(jié)會(huì)向你展示如何配置一個(gè)名叫路由模塊的專用模塊，它會(huì)保存你應(yīng)用的路由配置。

路由模塊有以下幾個(gè)特點(diǎn)：

• 把路由這個(gè)關(guān)注點(diǎn)從其它應(yīng)用類關(guān)注點(diǎn)中分離出去。

• 測(cè)試特性模塊時(shí)，可以替換或移除路由模塊。

• 為路由服務(wù)提供者（如守衛(wèi)和解析器等）提供一個(gè)眾所周知的位置。

• 不要聲明組件。

把路由集成到應(yīng)用中

路由應(yīng)用范例中默認(rèn)不包含路由。 要想在使用 Angular CLI 創(chuàng)建項(xiàng)目時(shí)支持路由，請(qǐng)為項(xiàng)目或應(yīng)用的每個(gè) NgModule 設(shè)置 --routing 選項(xiàng)。 當(dāng)你用 CLI 命令 ng new 創(chuàng)建新項(xiàng)目或用 ng generate app 命令創(chuàng)建新應(yīng)用，請(qǐng)指定 --routing 選項(xiàng)。這會(huì)告訴 CLI 包含上 @angular/router 包，并創(chuàng)建一個(gè)名叫 "app-routing.module.ts" 的文件。 然后你就可以在添加到項(xiàng)目或應(yīng)用中的任何 NgModule 中使用路由功能了。

比如，可以用下列命令生成帶路由的 NgModule。

ng generate module my-module --routing

這將創(chuàng)建一個(gè)名叫 "my-module-routing.module.ts" 的獨(dú)立文件，來保存這個(gè) NgModule 的路由信息。 該文件包含一個(gè)空的 Routes 對(duì)象，你可以使用一些指向各個(gè)組件和 NgModule 的路由來填充該對(duì)象。

將路由配置重構(gòu)為路由模塊

在 "/app" 目錄下創(chuàng)建一個(gè) AppRouting 模塊，以包含路由配置。

ng generate module app-routing --module app --flat

導(dǎo)入 CrisisListComponent、HeroListComponent 和 PageNotFoundCompponent 組件，就像 app.module.ts 中那樣。然后把 Router 的導(dǎo)入語(yǔ)句和路由配置以及 RouterModule.forRoot() 移入這個(gè)路由模塊中。

把 Angular 的 RouterModule 添加到該模塊的 exports 數(shù)組中，以便再次導(dǎo)出它。 通過再次導(dǎo)出 RouterModule，當(dāng)在 AppModule 中導(dǎo)入了 AppRoutingModule 之后，那些聲明在 AppModule 中的組件就可以訪問路由指令了，比如 RouterLink 和 RouterOutlet。

做完這些之后，該文件變成了這樣：

Path："src/app/app-routing.module.ts" 。

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';


import { CrisisListComponent }   from './crisis-list/crisis-list.component';
import { HeroListComponent }     from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-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 purposes only
    )
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

接下來，修改 "app.module.ts" 文件，從 imports 數(shù)組中移除 RouterModule.forRoot。

Path："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/crisis-list.component';
import { HeroListComponent }     from './hero-list/hero-list.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';


@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HeroListComponent,
    CrisisListComponent,
    PageNotFoundComponent
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

應(yīng)用繼續(xù)照常運(yùn)行，你可以把路由模塊作為將來每個(gè)模塊維護(hù)路由配置的中心位置。

路由模塊的優(yōu)點(diǎn)

路由模塊（通常稱為 AppRoutingModule ）代替了根模板或特性模塊中的路由模塊。

這種路由模塊在你的應(yīng)用不斷增長(zhǎng)，以及配置中包括了專門的守衛(wèi)和解析器服務(wù)時(shí)會(huì)非常有用。

在配置很簡(jiǎn)單時(shí)，一些開發(fā)者會(huì)跳過路由模塊，并將路由配置直接混合在關(guān)聯(lián)模塊中（比如 AppModule ）。

大多數(shù)應(yīng)用都應(yīng)該采用路由模塊，以保持一致性。 它在配置復(fù)雜時(shí)，能確保代碼干凈。 它讓測(cè)試特性模塊更加容易。 它的存在讓人一眼就能看出這個(gè)模塊是帶路由的。 開發(fā)者可以很自然的從路由模塊中查找和擴(kuò)展路由配置。