angular trouble shooting

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

投稿日:2022年1月28日

既存の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, trouble shooting

執筆者:

関連記事

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

やりたかったのは「Rubular」が提供してくれるマッチした部分をハイライトしてくれる機能。 https://rubular.com/ ちょっとしたツールにこういう機能を入れようと思ったのですが、ニー …

nvm-windows1.1.6でNode.jsを入れようとするとnpmコマンドのインストールがエラーになる

目次1 事象2 原因3 対処4 まとめ 事象 Win10、nvm-windows 1.1.6環境下でNode.js 10.16.0を入れようとした際に以下のエラーが発生。 C:\src\js\angu …

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

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

Typescript3.0以下の環境で発生する「Cannot find name ‘unknown’」に対処する

目次1 事象2 原因3 対処4 まとめ 事象 Typescript2.3.4を使っている息の長いWebシステムでnpm installをし直し、tscビルドし直したらトランスパイルエラーが発生。「un …

スタンドアロンモードのPgAdmin4が開くデフォルトブラウザを変更

PostgreSQL公式GUIクライアントツールの「PgAdmin4」。 PostGISのgeometry型をWeb地図上に表示出来たり、サーバモードで起動すればチーム内で共通的に使えるPostgre …

 

shingo.nakanishi
 

東京在勤、1977年生まれ、IT職歴2n年、生涯技術者として楽しく生きることを目指しています。デスマに負けず健康第一。