#はじめに
IonicアプリのAngularのバージョンを9系から11にアップグレードしようとしたら、とんでもなく壮絶な戦いになったお話です。。。
（まぁ簡単に終わるとは思ってなかったから、ある意味想定内ではありますが、、
）
一応👇の記事を参考に進めました。
#環境
アップグレード作業スタート時の環境
% ionic info
Ionic:
Ionic CLI : 6.17.1 (/Users/userName/.nodebrew/node/v14.17.2/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.1.0
@angular-devkit/build-angular : 0.901.9
@angular-devkit/schematics : 8.1.3
@angular/cli : 9.1.4
@ionic/angular-toolkit : 2.3.3
Capacitor:
Capacitor CLI : 3.0.2
@capacitor/android : 3.0.2
@capacitor/core : 3.0.2
@capacitor/ios : 3.0.2
Cordova:
Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)
Utility:
cordova-res : not installed globally
native-run (update available: 1.5.0) : 1.4.0
System:
NodeJS : v14.17.2 (/Users/userName/.nodebrew/node/v14.17.2/bin/node)
npm : 8.1.0
OS : macOS Big Sur
Xcode : Xcode 12.5.1 Build version 12E507
#まずはバージョンを指定してアップグレードする方法を確認
👆を参考に
公式ガイドではこんな感じですが、これだと最新になってしまいます。
ng update @angular/core @angular/cli
npm install @ionic/angular-toolkit@latest
最新にしてしまうと色々と依存関係が面倒っぽいのでとりあえず「11」にバージョンを固定します。
ng update @angular/core@11 @angular/cli@11
npm install @ionic/angular-toolkit@3.0.0
「@ionic/angular-toolkit」が「３」なのは、正直適当です。。。
公式ガイドにて👇のような記述があったので、何となく３にしてみました。
This updates the core libraries of Angular as well as the CLI and build tools. This also includes an update to the @ionic/angular-toolkit which has a breaking change, making it a 3.0 release. So If you are not upgrading to version 11 of Angular, please stay on @ionic/angular-toolkit@2.
これにより、AngularのコアライブラリとCLIおよびビルドツールが更新されます。これには、@ ionic / angle-toolkitの更新も含まれています。これには重大な変更があり、3.0リリースになっています。したがって、Angularのバージョン11にアップグレードしない場合は、@ ionic / angle-toolkit @ 2にとどまってください。
#壮絶な戦いの始まり
% ng update @angular/core@11 @angular/cli@11
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 62 dependencies.
Fetching dependency metadata from registry...
Updating multiple major versions of '@angular/core' at once is not supported. Please migrate each major version individually.
Run 'ng update @angular/core@10' in your workspace directory to update to latest '10.x' version of '@angular/core'.
For more information about the update process, see https://update.angular.io/?v=9.0-10.0
ふむふむ。いきなり11にはできんようですね。
##まずはAngular10にアップグレード
% ng update @angular/core@10 @angular/cli@10
The installed local Angular CLI version is older than the latest stable version.
Installing a temporary version to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 62 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular-devkit/build-angular @ "0.1002.4" (was "0.901.9")...
Updating package.json with dependency @angular-devkit/core @ "10.2.4" (was "8.1.3")...
Updating package.json with dependency @angular-devkit/schematics @ "10.2.4" (was "8.1.3")...
Updating package.json with dependency @angular/cli @ "10.2.4" (was "9.1.4")...
Updating package.json with dependency @angular/compiler-cli @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency @angular/core @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency @angular/language-service @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency typescript @ "4.0.8" (was "3.8.3")...
Updating package.json with dependency @angular/common @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency @angular/compiler @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency @angular/forms @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency @angular/localize @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency @angular/platform-browser @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "10.2.5" (was "9.1.4")...
Updating package.json with dependency @angular/router @ "10.2.5" (was "9.1.4")...
UPDATE package.json (2679 bytes)
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular-devkit/build-angular@0.901.9
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.4" from the root project
npm ERR! peer @angular-devkit/build-angular@">=0.800.0" from @ionic/angular-toolkit@2.3.3
npm ERR! node_modules/@ionic/angular-toolkit
npm ERR! dev @ionic/angular-toolkit@"^2.3.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^0.1002.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@10.2.5
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/build-angular@0.1002.4
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/gen/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/userName/.npm/_logs/2021-12-19T03_00_03_119Z-debug.log
✖ Package install failed, see above.
うーん、、エラーはよくわからんがpackage.jsonを見る限りAngular10系にはアップグレードされったっぽい。
##Angular11にする
% ng update @angular/core@11 @angular/cli@11
The "@angular-devkit/schematics" package cannot be resolved from the workspace root directory. This may be due to an unsupported node modules structure.
Please remove both the "node_modules" directory and the package lock file; and then reinstall.
If this does not correct the problem, please temporarily install the "@angular-devkit/schematics" package within the workspace. It can be removed once the update is complete.
はい、意味不明
そしていつからかnode_modulesフォルダが消失していた。いつからかは不明だが、この時点では確かに存在していなかった。。。
エラーメッセージで「node_modulesを削除して」とあるが、そもそも無くなったんだが・・・w
##@angular-devkit/schematicsを入れてみる
同じエラーメッセージだったので、試してみた！
% npm ls @angular-devkit/schematics
myApp@0.0.1 /Users/userName/Desktop/basic/ionic/myApp
└── (empty)
% npm install @angular-devkit/schematics
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular-devkit/build-angular@0.901.9
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! peer @angular-devkit/build-angular@">=0.800.0" from @ionic/angular-toolkit@2.3.3
npm ERR! node_modules/@ionic/angular-toolkit
npm ERR! dev @ionic/angular-toolkit@"^2.3.3" from the root project
npm ERR! dev @angular-devkit/build-angular@"^0.1002.4" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^0.1002.4" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@10.2.5
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^10.0.0" from @angular-devkit/build-angular@0.1002.4
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1002.4" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/userName/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/userName/.npm/_logs/2021-12-19T03_02_55_102Z-debug.log
???????
##何やかんやあってnpm installしてみる
ちょっと間で何があったか忘れましたが、、、
とりあえず一回npm installしてみます。。。
% npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: hCarender@0.0.1
npm ERR! Found: @angular/compiler@10.2.5
npm ERR! node_modules/@angular/compiler
npm ERR! @angular/compiler@"~10.2.5" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/compiler@">=2.3.1 <10.0.0 || >9.0.0-beta <10.0.0 || >9.1.0-beta <10.0.0 || >9.2.0-beta <10.0.0" from codelyzer@5.2.2
npm ERR! node_modules/codelyzer
npm ERR! dev codelyzer@"^5.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/userName/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/userName/.npm/_logs/2021-12-19T03_25_37_843Z-debug.log
##--legacy-peer-depsを使ってみる
npm ERR! dev codelyzer@"^5.2.0" from the root projectが同じだったので、参考にしてみました！
% npm install --legacy-peer-deps
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated core-js@2.6.12: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
added 1818 packages, and audited 2032 packages in 3m
99 packages are looking for funding
run `npm fund` for details
48 vulnerabilities (1 low, 33 moderate, 13 high, 1 critical)
To address issues that do not require attention, run:
npm audit fix
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
お、なんかうまくいった気がする！！！
##改めてAngularのバージョンを11にアップグレード
% ng update @angular/core@11 @angular/cli@11
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 11.2.17 to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Repository is not clean. Please commit or stash any changes before updating.
Gitにcommitしてからやれと言われました。。。
commitしてもう一度try
% ng update @angular/core@11 @angular/cli@11
The installed Angular CLI version is outdated.
Installing a temporary Angular CLI versioned 11.2.17 to perform the update.
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Using package manager: 'npm'
Collecting installed dependencies...
Found 61 dependencies.
Fetching dependency metadata from registry...
Updating package.json with dependency @angular-devkit/architect @ "0.1102.17" (was "0.801.3")...
Updating package.json with dependency @angular-devkit/build-angular @ "0.1102.17" (was "0.1002.4")...
Updating package.json with dependency @angular-devkit/core @ "11.2.17" (was "10.2.4")...
Updating package.json with dependency @angular/cli @ "11.2.17" (was "10.2.4")...
Updating package.json with dependency @angular/compiler-cli @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/core @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/language-service @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency karma @ "6.3.9" (was "4.1.0")...
Updating package.json with dependency protractor @ "7.0.0" (was "5.4.4")...
Updating package.json with dependency tslint @ "6.1.3" (was "5.15.0")...
Updating package.json with dependency @angular/common @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/compiler @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/forms @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/localize @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/platform-browser @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/platform-browser-dynamic @ "11.2.14" (was "10.2.5")...
Updating package.json with dependency @angular/router @ "11.2.14" (was "10.2.5")...
UPDATE package.json (2648 bytes)
⠹ Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @angular-devkit/build-angular@0.1002.4
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1102.17" from the root project
npm ERR! peer @angular-devkit/build-angular@">=0.800.0" from @ionic/angular-toolkit@2.3.3
npm ERR! node_modules/@ionic/angular-toolkit
npm ERR! dev @ionic/angular-toolkit@"^2.3.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @angular-devkit/build-angular@"^0.1102.17" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/compiler-cli@11.2.14
npm ERR! node_modules/@angular/compiler-cli
npm ERR! peer @angular/compiler-cli@"^11.0.0 || ^11.2.0-next" from @angular-devkit/build-angular@0.1102.17
npm ERR! node_modules/@angular-devkit/build-angular
npm ERR! dev @angular-devkit/build-angular@"^0.1102.17" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/gen/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/gen/.npm/_logs/2021-12-19T03_37_33_111Z-debug.log
✖ Package install failed, see above.
✖ Migration failed. See above for further details.
Angularのバージョンを11にアップグレードする事自体はうまくいった！！！
けどその他の依存関係でまたエラーが多発した模様
よくわからんけど次へ行きますw
一歩前進！！！
##@ionic/angular-toolkitもアップグレード
% npm install @ionic/angular-toolkit@3.0.0
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: @ionic/angular-toolkit@2.3.3
npm ERR! node_modules/@ionic/angular-toolkit
npm ERR! dev @ionic/angular-toolkit@"3.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! dev @ionic/angular-toolkit@"3.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular-devkit/architect@0.1100.7
npm ERR! node_modules/@angular-devkit/architect
npm ERR! peer @angular-devkit/architect@"^0.1100.0" from @ionic/angular-toolkit@3.0.0
npm ERR! node_modules/@ionic/angular-toolkit
npm ERR! dev @ionic/angular-toolkit@"3.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/userName/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/userName/.npm/_logs/2021-12-19T05_15_33_387Z-debug.log
まぁ予想通りではあるが、また盛大な依存関係のエラー！！！
Conflicting peer dependency: @angular-devkit/architect@0.1100.7
とあったので、とりあえずこいつを入れてみる
% npm install @angular-devkit/architect@0.1100.7
##@ionic/angular-toolkitのアップデート成功
% npm install @ionic/angular-toolkit@3.0.0
npm WARN ERESOLVE overriding peer dependency
npm WARN Found: karma@6.3.9
npm WARN node_modules/karma
npm WARN peer karma@"*" from karma-jasmine@2.0.1
npm WARN node_modules/karma-jasmine
npm WARN peer karma-jasmine@">=1.1" from karma-jasmine-html-reporter@1.7.0
npm WARN node_modules/karma-jasmine-html-reporter
npm WARN 1 more (the root project)
npm WARN 2 more (karma-jasmine-html-reporter, the root project)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peerOptional karma@"~5.1.0" from @angular-devkit/build-angular@0.1100.7
npm WARN node_modules/@angular-devkit/build-angular
npm WARN peer @angular-devkit/build-angular@"^0.1100.0" from @ionic/angular-toolkit@3.0.0
npm WARN node_modules/@ionic/angular-toolkit
npm WARN deprecated fsevents@2.1.3: "Please update to latest v2.3 or v2.2"
npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
added 146 packages, removed 63 packages, changed 94 packages, and audited 1950 packages in 58s
109 packages are looking for funding
run `npm fund` for details
37 vulnerabilities (29 moderate, 8 high)
To address all issues (including breaking changes), run:
npm audit fix --force
Run `npm audit` for details.
何かめっちゃ警告が出てるが、@ionic/angular-toolkitのアップデートに成功！！
#最後に
package.json
"dependencies": {
"@angular-devkit/architect": "^0.1100.7",
"@angular/common": "~11.2.14",
"@angular/compiler": "~11.2.14",
"@angular/fire": "6.0",
"@angular/forms": "~11.2.14",
"@angular/localize": "^11.2.14",
"@angular/platform-browser": "~11.2.14",
"@angular/platform-browser-dynamic": "~11.2.14",
"@angular/router": "~11.2.14",
省略
"devDependencies": {
"@angular-devkit/core": "~11.2.17",
"@angular/cli": "^11.2.17",
"@angular/compiler-cli": "~11.2.14",
"@angular/core": "^11.2.14",
"@angular/language-service": "~11.2.14",
"@capacitor/cli": "^3.0.2",
"@ionic/angular-toolkit": "^3.0.0",
こんな感じでなんとかIonicアプリのAngularのバージョンを11にアップグレードすることができました。。
色々と端折ってる部分があったり、覚えてなくて飛ばしてる部分もありますが、、、まぁ全体的にはこんな流れでした！
フレームワークやライブラリーなどのアップグレードは大変ですが、毎度のこと**「定期試験のように必ずやってくるものだ！」**と思って取り組んで行きましょう