既存の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のオプションをじっくり見る機会にもなってよかったです。
