prodビルドはイベント名も節約

事象

angularでページ遷移時に子画面にバインドしてるオブジェクトを更新し、描画を更新したい。
ところが、ローカル実行時や--aotビルドした時は問題なく動くが、--prodビルドした時だけ動かない。

原因

処理の実行判定を、イベントオブジェクトのコンストラクタ名で行っていたため。
最適化によって、イベントオブジェクトの中身も削減されるようだ。

this.router.events.subscribe(event => {
  // ひとまずイベントが発生してるか確かめる
  console.log(event.constructor.name);
  
  if (event.constructor.name === 'NavigationEnd') {
    ... // 画面にバインドしてるオブジェクトを更新
    console.log('base navEnd');
  }
});

↓↓↓

ng serve(local)

--prod

えっ…省略されすぎじゃね…？
数を合計してみたところ、発生イベントそのものは変化してなさそう。
こんなところまで最適化してくれるんだね。すげー。

対応

まあ、そもそもイベント名をハードコードしてる実装がイケてないわけでして。

this.router.events.subscribe(event => {
  // ひとまずイベントが発生してるか確かめる
  console.log(event.constructor.name);
  
  if (event instanceof NavigationEnd) {
    ... // 画面にバインドしてるオブジェクトを更新
    console.log('base navEnd');
  }
});

↓↓↓

やったー！直ったー！

このハードコード判定ロジック、あちこちのクラスに判子コピーされてるから
直すとこ他にもいっぱいあるんやけどね…

おわりに

誰がこんな実装して、そんでコードレビュー通ったのかわからんけど
実装のやり方次第で、後から問題が発覚するケースもあるんだなぁ、と。

僕なら、共通クラス作ってまとめてると思う。