Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

angular.jsonvendorChunk=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"
      }
    ]
  }
  ...
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away