Angularのバージョンアップ（v5 => v6）でハマったところ

Angularをv5からv6にアップデートした際に、開発環境でビルドしてるときは正常に動作していたが、一部コンポーネントでプロダクションビルドを行うと表示されないということがあって、かなりハマった。。

環境とかコードの書き方に問題があったのかもしれないが、プロダクションビルドする際に、内部的に必要なコードがTree Shakingの対象になっていたことが原因だったみたい。

Build Optimizerを使う場合、vendorChunk=false だと vendor.js は main.js に統合されて、未使用のコードはよしなに削除されてるようで、それに伴い、内部的に必要なコードがTree Shakingの対象になりコンポーネントが表示されないことがある。

angular.json で vendorChunk=true にし、 vendor.js を読み込むと解決した。

"configurations": {
  "development": {
    "optimization": false,
    "outputHashing": "none",
    "sourceMap": true,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": false,
    "vendorChunk": true, ←これをtrueにするとvendor.jsが出力されるようになる
    "buildOptimizer": false
  },
  "production": {
    "optimization": true,
    "outputHashing": "none",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": false,
    "vendorChunk": true, ←これをtrueにするとvendor.jsが出力されるようになる
    "buildOptimizer": true,
    "fileReplacements": [
      {
        "replace": "path/to/environment.ts",
        "with": "path/to/environment.prod.ts"
      }
    ]
  }
  ...