rch850 の上澄み

技術的な話題とか、雑談とか。タイトルを上澄みに変えました @ 2020/09/02

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 後じゃないと得られないので、当然といえば当然ですね。

これに対して解決策も示されていますが、なかなか煩雑な印象です。

github.com

Angular 標準のルーターなら最初から routerLink で URL を直接書くので、特に問題になりません。