Angular 使用wildcard route (**) 處理無效的URL

在設計Angular元件的Route時，對於錯誤或非預期的URL請求，可以透過配置wildcard route來攔截，並返回預先設計好的結果。

首先使用Angular CLI建立一個Angular專案。

Angular專案建好後先把app.component.html的預設內容刪除，只留下<router-outlet></router-outlet>。

app.component.html

<router-outlet></router-outlet>

接著在專案目錄下分別輸入以下命令來建立HelloComponent及PageNotFoundComponent。
ng generate component hello，
ng generate component page-not-found。
請參考使用Angular CLI建立新的Component元件。

D:\myapps\demo>ng generate component hello
CREATE src/app/hello/hello.component.html (24 bytes)
CREATE src/app/hello/hello.component.spec.ts (621 bytes)
CREATE src/app/hello/hello.component.ts (265 bytes)
CREATE src/app/hello/hello.component.css (0 bytes)
UPDATE src/app/app.module.ts (471 bytes)

D:\myapps\demo>ng generate component page-not-found
CREATE src/app/page-not-found/page-not-found.component.html (33 bytes)
CREATE src/app/page-not-found/page-not-found.component.spec.ts (672 bytes)
CREATE src/app/page-not-found/page-not-found.component.ts (299 bytes)
CREATE src/app/page-not-found/page-not-found.component.css (0 bytes)
UPDATE src/app/app.module.ts (581 bytes)

開啟page-not-found.component.html將內容修改如下。

page-not-found.component.html

<h1>錯誤，Page Not Found!!</h1>

關於下面Route的設定，建議先參考使用Angular Router切換頁面template。

開啟app-routing.module.ts。

在routes: Routes新增到HelloComponent的path：
{ path:'hello', component:HelloComponent }，
並將HelloComponent import進app-routing.module.ts。

在routes: Routes新增處理錯誤URL的path：
{ path:'**', component:PageNotFoundComponent } 將結果導向PageNotFoundComponent。
並把PageNotFoundComponent import進app-routing.module.ts。

設定完後如下。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloComponent } from './hello/hello.component'; // <-- import
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; // <-- import


const routes: Routes = [
  { path:'hello', component:HelloComponent }, // 導向HelloComponent, 後面記得加上逗號
  { path:'**', component:PageNotFoundComponent } // 錯誤的URL都會導向PageNotFoundComponent，要放在Routes陣列的最後
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

導向PageNotFoundComponent的path即為wildcard route (**)，表示任何不在Route中的URL都會被導向PageNotFoundComponent的template。

注意wildcard route必須放在其他route的後面，也就是Routes陣列中最後的位置，因為Angular的URL路徑匹配是採first match wins strategy，會返回第一個找到的批配路徑，若將wildcard route的配置擺在其他route的前面，則所有的URL都會被導向wildcard route路徑的Component。

開啟瀏覽器並在位址欄輸入http://localhost:4200/hello會正確地導向HelloComponent的template，也就是hello.component.html

若在瀏覽器位址欄輸入任何其他的URL，例如http://localhost:4200/abc，因為abc並不在Route設定的path，所以會導向 PageNotFoundComponent

參考：

• Define a Wildcard route
• Angular 使用Angular Router切換頁面template
• Angular 使用Angular CLI建立Component元件
• Angular 使用routeLink切換頁面
• Angular 使用Router Parameters 路由參數