Angular

「Invalid configuration of route ”: redirectTo and children cannot be used together」が出たときの原因と対処法

先日、Angularでルーティングまわりの実装を行っていたところ、以下のようなエラーが発生しました。

Invalid configuration of route ”: redirectTo and children cannot be used together

app-routing.module.tsの中でchildrenを設定し、入れ子でルーティングしようとしていたのですが、このエラーでうまく動きません・・。

確認したところ、無事に解決できましたので、その際のメモを記事にしようと思います。

そんなわけで、今回はAngularのルーティング箇所で「Invalid configuration of route ”: redirectTo and children cannot be used together」が出た場合の対処法についてご紹介しますね。

確認した際の環境
  • Angular CLI: 7.3.8
  • Node: 8.11.1
  • OS: darwin x64
  • Angular: 7.2.0

エラー発生時のコードの紹介

問題のエラーが発生した際のコードをご紹介します。

以下のようなコードでルーティングしようとしていました。

const routes: Routes = [
  { path: '',  redirectTo: '/main', component: HomeComponent,
      children: [
        { path: 'main', component: MainComponent},
      ]
  },
  { path: 'systemError', component: SystemErrorComponent}
];

一番上位で正常ルートとシステムエラーのルートを分岐し、正常ルートだった場合は「main」というパスにリダイレクトしようとしています。

ですが、これではどうもうまくいきません。

このまま実行すると「Invalid configuration of route ”: redirectTo and children cannot be used together」が出てしまうのです。

原因はchildrenの中に空のルートがなかったから。

それでは、「Invalid configuration of route ”: redirectTo and children cannot be used together」の原因について、確認しましょう。

調べてみたところ、どうやらchildrenの中に空のルート(”)がなくて、うまくリダイレクトができていなかったことが原因のようです。

こちらのstackoverflowが参考になりました。
参考:Use redirectTo if you using also children parameter, is this possible?

早速、上記のコードを書き直してみましょう。

const routes: Routes = [
  { path: '', component: HomeComponent,
      children: [
        { path: '', redirectTo: 'main', pathMatch: 'full'},
        { path: 'main', component: MainComponent},
      ]
  },
  { path: 'systemError', component: SystemErrorComponent}
]

2~4行目を修正しています。
最上位での「redirectTo: ‘/main’」を削除し、4行目に以下を追加しました。

{ path: ”, redirectTo: ‘main’, pathMatch: ‘full’},

このようにchildrenの中に「path: ”」を追加したところ、正常にルーティングされるようになりました。

childrenの同じ階層の中でリダイレクトしなければならなかったのですね。
勉強になりました。

終わりに

今回は、Angularで「Invalid configuration of route ”: redirectTo and children cannot be used together」が出た場合の対処法についてご紹介しました。

内容をまとめると以下のようになります。

分かってみると、本当にちょっとした違いでしたね。
ルーティングの作法をきちんと理解しなければならないな、と改めて思いました。

今回はここまでです。それでは。