Angularのルーティング設定モジュールを作成中に下記のエラーが発生した
Error: Invalid configuration of route '/home': path cannot start with a slash at validateNode (router.js:613) at validateConfig (router.js:577) at Router.push../node_modules/@angular/router/fesm5/router.js.Router.resetConfig (router.js:4108) at new Router (router.js:3784) at setupRouter (router.js:5581) at _callFactory (core.js:21292) at _createProviderInstance (core.js:21238) at initNgModule (core.js:21168) at new NgModuleRef_ (core.js:21895) at createNgModuleRef (core.js:21884) (anonymous) @ main.ts:15
エラーメッセージの内容としては、スラッシュ(\
)でパスを始めないでね〜って言ってる
修正前のコード
エラーメッセージの通り、{ path: '/home',
にスラッシュが入ってしまっているのがエラーの原因となる
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, // pathに'/'が入ってしまっているのがエラーの原因 { path: '/home', component: HomeComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}
修正後のコード
path
プロパティの値からスラッシュを取り除いてあげると、エラーが解消されて正常な画面が表示される
import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, // '/'が取り除かれている { path: 'home', component: HomeComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule {}
バージョン情報
- Angular v7.2.0
参考サイト
Angular 2 router Error: Invalid configuration of route 'undefined' - Stack Overflow