下面的命令會用 Angular CLI 來生成一個帶有應(yīng)用路由模塊（AppRoutingModule）的基本 Angular 應(yīng)用，它是一個 NgModule，可用來配置路由。下面的例子中應(yīng)用的名字是 routing-app。

ng new routing-app --routing

一旦生成新應(yīng)用，CLI 就會提示你選擇 CSS 或 CSS 預(yù)處理器。在這個例子中，我們接受 CSS 的默認(rèn)值。

為路由添加組件

為了使用 Angular 的路由器，應(yīng)用至少要有兩個組件才能從一個導(dǎo)航到另一個。要使用 CLI 創(chuàng)建組件，請在命令行輸入以下內(nèi)容，其中 first 是組件的名稱：

ng generate component first

為第二個組件重復(fù)這個步驟，但給它一個不同的名字。這里的新名字是 second。

ng generate component second

CLI 會自動添加 Component 后綴，所以如果在編寫 first-component，那么其組件名就是 FirstComponentComponent。

本指南適用于 CLI 生成的 Angular 應(yīng)用。如果你是手動工作的，請確保你的 "index.html" 文件的 <head& 中有 <base href="/"& 語句。這里假定 "app" 文件夾是應(yīng)用的根目錄，并使用 "/" 作為基礎(chǔ)路徑。

導(dǎo)入這些新組件

要使用這些新組件，請把它們導(dǎo)入到該文件頂部的 AppRoutingModule 中，具體如下：

//AppRoutingModule (excerpt)


import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';