Angular の ui-router で lazy loading を書くと a の href がイマイチ
- Angular の ui-router を使っていて
- uiSref を使ってリンクを書いていて
- lazy loading を素直に実装すると
- lazy loading 後のページを指す A 要素の href がイマイチになる
イマイチ、というのは、だいたいこんな雰囲気のルーティングをしたときに……
// app.module.ts { state: 'items.**', url: '/items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) } // items/items.module.ts { state: 'items', url: '/items', component: ItemsComponent }, { state: 'items.new', url: '/new', component: ItemsNewComponent }
lazy loading 前のページから <a uiSref="items.new">New Item</a>
すると、その a 要素の href が /items/new
になってほしいところ /items
になってしまうというものです。
クリックして遷移するだけなら動作に問題ないのですが、右クリックして別タブで開くといった操作をすると /items
が開いてしまって残念な感じです。
「items.edit
という状態の URL は /items/new
ですよ」という情報が lazy loading 後じゃないと得られないので、当然といえば当然ですね。
これに対して解決策も示されていますが、なかなか煩雑な印象です。
Angular 標準のルーターなら最初から routerLink
で URL を直接書くので、特に問題になりません。