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

執筆者:

関連記事

Angular4.4のHTTP通信処理にタイムアウトを設定をすると「timeout is not a function」エラーが発生する

目次1 事象2 原因3 対処4 まとめ 事象 Angular4.3で追加されたHttpClientModuleに移行せず、HttpModuleを使い続けているアプリで、とある理由からpackage-l …

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

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

EclipseのXMLエディタ一行目でDTDエラー「参照ファイルにエラーが含まれています」

目次1 事象2 原因3 対処4 まとめ 事象 checkstyleのルールXMLをEclipseで開くと一行目にエラーマーク。 カーソルを合わせた時のメッセージ。 XMLのデータ構造整合性をチェックす …

Metabaseの登録データベース削除時に入力を求められて消せない

分析対象として登録したデータベースを一覧から削除する際に入力値を求められ、何を入れていいか分からずプチはまりました。 結論から述べると入力する文字は「delete」でした。 事象 Metabase(v …

PuppeteerでGoogle検索すると「UnhandledPromiseRejectionWarning: Error: Node is either not visible or not an HTMLElement」

Puppeteerを新規インストールしてGoogle検索すると大概失敗、稀に成功します。 公式サンプルのGoogle Developers検索は動くのにGoogle検索は何でしっかり動かんの?となりま …

 

shingo.nakanishi
 

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