将 Ionic Angular 的版本升级到 11 的经历令人惊叹
首先
当我试图将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” 的版本为 “3”，说实话有点随意…
因为在官方指南中有如下描述，所以我大概选择了 3。
这将更新Angular的核心库，包括CLI和构建工具。这还包括对@ionic/angular-toolkit的更新，其中包含了一个重大变更，使其成为3.0版本。所以如果您不打算升级到Angular的11版本，请继续使用@ionic/angular-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好像不太可能呢。
首先将Angular升级至10版本。
% 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版本。
将版本升级为Angular 11。
% 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”，但它本来就不存在了…
尝试安装@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″与原始项目相同，我参考了它！
% 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上提交再试一次。
提交后再尝试一次。
% 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了！！！
不过在其他的依赖关系中又出现了许多错误的情况。
虽然不太明白，但我们继续前进吧（笑）。
迈出一步向前！！！
要升级@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！
最后
"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.
虽然有些地方被省略了，也有些部分我记不清楚跳过了，总的来说，大致就是这样的流程！
升级框架和库等是一件艰巨的任务，但我们应该像定期考试一样，一定要努力完成它！
