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

執筆者:

関連記事

git push時に「error: RPC failed; result=22, HTTP code = 501」エラー

目次1 事象2 原因3 対処 事象 オンプレGitLabへのgit push時に掲題のエラーが発生してpushに失敗します。 原因 git push時の1ファイル最大サイズは1Mbyteの為。 git …

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

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

Tomcatのcatalina.outが「java.util.zip.ZipException: error in opening zip file」で溢れかえった原因はAppleDouble

目次1 事象2 原因3 対処4 まとめ 事象 ある日、共有development環境として使っているCentOSのディスク使用率がどんどん増えていってることに気づきました。 増加原因になっていたTom …

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

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

compodocでAngularプロジェクトのビジュアルなドキュメントを自動生成する

Java、C、Pythonのドキュメントを自動生成する際にDoxygenを使えばクラス図や呼び出し図、呼び出され図を作れて便利です。 しかしDoxygenはTypescriptには対応しておらず、.t …

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯現役技術者を目指しています。健康第一。