angular issue closed

Angular11から12にアップデートしたらng serveがproductionモードで起動するようになってしまう

投稿日:

既存のAngular11のプロジェクトを12に上げた際に発生。

環境

  • Windows 11
  • Node.js 14.15.1
  • Angular13リリース前、以下コマンドで12にupdateした(と思われていた)Angular11プロジェクト
ng update @angular/core @angular/cli

事象

ng serveを実行すると-c productionで起動した時と同じ警告文が出る。バンドルサイズも小さい。

> npx ng serve
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
main.js               | main          |   1.54 MB
scripts.js            | scripts       | 844.68 kB
polyfills.js          | polyfills     | 222.24 kB
styles.css, styles.js | styles        | 179.23 kB
runtime.js            | runtime       |   2.77 kB

                      | Initial Total |   2.76 MB

Lazy Chunk Files      | Names         |      Size
105.js                | -             | 701.06 kB
527.js                | -             | 229.14 kB
common.js             | common        | 422 bytes

また、Chromeから開発者ツールを開き、Angular DevToolsタブを開いても「これproductionビルドだよ、developmentビルドじゃないとサポートしないよ」とメッセージが出ていてページ分析が行われていない。

We detected an application built with production configuration. Angular DevTools only supports development builds.

原因

Angular12からng buildのデフォルトビルドモードはproductionになり、buildOptimizer: trueが効いて、最適化されているのが原因。

対処

じゃあdevelopmentビルドに戻すにはどうするのか。試しに別途@angular/cli@12でng newしたプロジェクトのangular.jsonを参考に、以下を追加して最適化無しでビルドしてみます。

        (snip)

            "architect": {
                "build": {
                    "configurations": {
                        "production": {

                        ↓ 追記
                        "development": {
                            "buildOptimizer": false,
                            "optimization": false,
                            "vendorChunk": true,
                            "extractLicenses": false,
                            "sourceMap": true,
                            "namedChunks": true                        }
                        }

                "serve": {
                    "builder": "@angular-devkit/build-angular:dev-server",

                    "configurations": {
                        "production": {

                        ↓ 追記
                        "development": {
                            "browserTarget": "プロジェクト名:build:development"
                        },
                    "defaultConfiguration": "development"

        (snip)

上記設定によって、以降はproductionビルドによるng serveの警告文は出なくなり、バンドルもデバッグ情報込みのサイズになります。旧世界に帰ってきました。

> npx ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |      Size
main.js               | main          |   5.59 MB
scripts.js            | scripts       |   1.60 MB
polyfills.js          | polyfills     | 582.70 kB
styles.css, styles.js | styles        | 417.56 kB
runtime.js            | runtime       |  12.49 kB

                      | Initial Total |   8.18 MB

Lazy Chunk Files      | Names         |      Size
462.js                | -             |   1.61 MB
648.js                | -             | 549.33 kB
762.js                | -             |  13.40 kB

しかし、これだとzone.jsバージョンアップに伴う既存コードのマイグレーションが行われていませんでした。手作業で編集した上記angular.jsonは元に戻し、ngコマンドでマイグレーションするようにしました。

ng update @angular/cli --migrate-only --from=11 --to=12.2

結果、以下の5ファイルが自動で変更される。

  • angular.json(前述の手編集プラスアルファ内容の変更がされた)
  • package.json(zone.jsの最低バージョンアップ~0.11.3 → ~0.11.4)
  • polyfills.ts(import ‘zone.js/dist/zone’; → import ‘zone.js’;)
  • test.ts(import ‘zone.js/dist/zone-testing’; → import ‘zone.js/testing’;)
  • environment.ts(コメントアウト文言変更)

うん・・・これは手でやるもんじゃないですね(-_-)。–migrate-onlyして良かった。無事12に上がり切り、developmentビルドをデフォルトにし、Angular Devtoolsで開くことが出来ました。

因みに自動変更されたangular.jsonはこんな感じになっています。

            "architect": {
                "build": {
                    "options": {
                        ↓ 自動追加されたデフォルトビルドオプション
                        "vendorChunk": true,
                        "extractLicenses": false,
                        "buildOptimizer": false,
                        "sourceMap": true,
                        "optimization": false,
                        "namedChunks": true
                    "configurations": {

                        (snip)

                    },
                    "defaultConfiguration": ""   ← デフォルトビルド設定は非production

根本原因

アップデートをBasic手順だけで終わらせたこと。

Advanced手順の以下までやっていれば、ng buildだけでなく、angular.json内のdefaultConfigurationがproductionになって「あぁ、デフォルトはproductionになったんだな、じゃあちょっとdevelopmentに戻そう」と設定から読み取れたんだと思います。

ng update @angular/cli@12 --migrate-only production-by-default

まとめ

黎明期に比べれば格段に楽になったものの、アップデートは慎重にしよう。と思った次第でした。

ng updateのオプションをじっくり見る機会にもなってよかったです。

-angular, issue closed

執筆者:

関連記事

正規表現結果をHTMLコード化してマッチ部分をハイライト表示

正規表現を可視化したり、ヒットした文字列をハイライトしてくれるWebサイトやチートシートは沢山紹介されていてニーズを満たしてくれます。 今回やりたかったのは「Rubular」が提供してくれるマッチした …

ローカルネットワーク内のHTTP通信が2回に1回交互にタイムアウトするようになった原因

目次1 事象2 調査3 解決4 その後 事象 ある日突然、オフィスのローカル開発環境でHTTP通信が異常なほど遅くなり、タイムアウトするようになりました。 その後F5でリロードすると普通にレスポンスが …

Angularのテンプレート評価式にビット演算を使うとTemplate parse errorが発生する

AngularのテンプレートHTMLでビット演算をすることは禁じられているので代替手段を考えます。 目次1 事象2 原因3 対処 事象 CSSクラスをビット演算で切り替えるテンプレートを書きました。c …

Apple PayのMerchant Doamin設定がPendingになり、Verifiedにならなかった原因

開発しているWebシステム上でApple Payによるクレジットカード選択が出来るようにするには「Apple Developer Program」で「Merchant Domain」を設定します。 O …

キャッシュされているはずのServiceWorker資源にオフラインアクセス出来ない(Workbox + ionicons)

そのHTTPリクエストしたファイル資源、ひょっとしてURLパラメータついてたりしませんか? 目次1 事象2 原因3 対処 事象 ionic3(SPA)でWorkboxを使ったServiceWorker …

 

shingo.nakanishi
 

東京在勤、職歴2n年中年ITエンジニアです。まだ開発現場で頑張っています。

19歳(1996年)から書き始めたアウトプット用プライベートWeb日記数が5,000日を超え、残りの人生は発信をして行きたいと思い、令和元日からこのサイトを開始しました。勉強と試行錯誤をしながら、自分が経験したIT関連情報を投稿しています。

私と同じく、今後IT業界で生計を立てて行きたいと考えている方や、技術共有したいけど仲間が居なくて孤独、といった方と一緒に成長、知識共有して行けたら楽しいな、と思っています。