AngularのAppRoutingModuleのワイルドカード(**)は一番最後に指定すべし

こんにちは!kossyです!



さて、今回はAngularのAppRoutingModuleのワイルドカード(**)は一番最後に指定すべし、という備忘録をブログに残したいと思います。
初歩的なミスをしてしまう自分を戒めようと思います。笑

const routes: Routes = [
  { path: '',        component: ChatComponent },
  { path: '**',      component: PageNotFoundComponent }
  { path: 'account', loadChildren: './account/account.module#AccountModule' },

];

http://localhost:4200/account/login

にアクセスしてもerrorページが表示されてしまう、、、


URLを解析するときはルーティングに設定されている値を上から順番に確認していくからですね。

account/loginにマッチする前に**にマッチしてしまい、エラーページが表示されていたわけです。