中安拓也のブログ

プログラミングについて書くブログ

【Angular】[障害メモ]Error: Invalid configuration of route path cannot start with a slash

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