如何将Angular 12项目升级至Angular 16并适配所有依赖？

架构老林

2026-7-12

Angular 12 升级到 16 同步适配 Node、Capacitor 全依赖指南

现状说明

当前维护的Angular项目版本信息：

Angular: 12
Node: 14.21.2
Capacitor相关：android 4.5.0、app 1.0.6

仅升级Node到14.21.3后，出现Angular CLI提示：Node.js version v14.21.3 detected. The Angular CLI requires a minimum of v16.13。现需将项目升级至Angular 16，同步升级所有依赖（Node、Angular CLI、Capacitor等）以确保版本兼容。

项目当前package.json内容：

{
 "name": "my-app",
 "version": "0.0.1",
 "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~12.1.1",
    "@angular/core": "~12.1.1",
    "@angular/forms": "~12.1.1",
    "@angular/platform-browser": "~12.1.1",
    "@angular/platform-browser-dynamic": "~12.1.1",
    "@angular/router": "~12.1.1",
    "@capacitor/android": "4.5.0",
    "@capacitor/app": "1.0.6",
    "@capacitor/haptics": "1.1.3",
    "@capacitor/keyboard": "1.1.3",
    "@capacitor/push-notifications": "^5.0.6",
    "@capacitor/splash-screen": "^4.1.4",
    "@capacitor/status-bar": "1.0.6",
    "@capgo/capacitor-updater": "^4.17.46",
    "@ionic/angular": "^5.5.2",
    "@ionic/storage-angular": "^3.0.6",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "ionic-color-picker": "^1.0.3",
    "moment": "^2.29.4",
    "rxjs": "^6.6.7",
    "tslib": "^2.2.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.1.1",
    "@angular-eslint/builder": "~12.0.0",
    "@angular-eslint/eslint-plugin": "~12.0.0",
    "@angular-eslint/eslint-plugin-template": "~12.0.0",
    "@angular-eslint/template-parser": "~12.0.0",
    "@angular/cli": "~12.1.1",
    "@angular/compiler": "~12.1.1",
    "@angular/compiler-cli": "~12.1.1",
    "@angular/language-service": "~12.0.1",
    "@capacitor/cli": "^4.5.0",
    "@capacitor/core": "^4.5.0",
    "@ionic/angular-toolkit": "^4.0.0",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "4.16.1",
    "@typescript-eslint/parser": "4.16.1",
    "eslint": "^7.6.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsdoc": "30.7.6",
    "eslint-plugin-prefer-arrow": "1.2.2",
    "jasmine-core": "~3.8.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.2",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "typescript": "~4.2.4"
  },
  "description": "myApp"
}

升级操作步骤

一、升级Node.js

Angular 16要求Node.js版本16.13.x 或更高（推荐18.x LTS版本），可通过以下方式升级：

使用nvm（Node版本管理器）：
```
nvm install 18 --lts
nvm use 18
```
直接下载对应版本安装包覆盖安装。

二、自动升级Angular核心依赖

使用Angular官方CLI工具自动处理版本适配，会自动更新package.json中Angular相关依赖：

全局升级Angular CLI到16版本：
```
npm install -g @angular/cli@16
```
项目根目录执行升级命令，按提示完成操作：
```
ng update @angular/core@16 @angular/cli@16
```
该命令会自动同步所有Angular核心依赖（common、forms、router等）、构建工具包的版本，并处理兼容性冲突。

三、升级Capacitor到兼容版本

Angular 16适配Capacitor 5.x版本（需Node.js 16+），执行以下命令升级：

升级Capacitor核心及CLI：

npm install @capacitor/core@latest @capacitor/cli@latest

升级所有Capacitor插件到5.x版本：

npm install @capacitor/android@latest @capacitor/app@latest @capacitor/haptics@latest @capacitor/keyboard@latest @capacitor/push-notifications@latest @capacitor/splash-screen@latest @capacitor/status-bar@latest

同步更新Android项目文件：
```
npx cap sync android
```

四、适配第三方依赖

Ionic相关：Angular 16需搭配Ionic 7.x，执行升级：

npm install @ionic/angular@latest @ionic/angular-toolkit@latest @ionic/storage-angular@latest

RxJS：Angular 16依赖RxJS 7.x，执行升级：
```
npm install rxjs@latest
```
Zone.js：升级到Angular 16兼容版本：
```
npm install zone.js@latest
```

ngx-translate：升级到适配Angular 16的版本：

npm install @ngx-translate/core@latest @ngx-translate/http-loader@latest

TypeScript：Angular 16要求TypeScript 4.9.x或5.0.x，执行升级：
```
npm install typescript@~5.0.0 --save-dev
```

ESLint相关：升级到兼容Angular 16的版本：

npm install @angular-eslint/builder@latest @angular-eslint/eslint-plugin@latest @angular-eslint/eslint-plugin-template@latest @angular-eslint/template-parser@latest eslint@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest --save-dev

五、验证升级结果

安装所有更新后的依赖：
```
npm install
```
检查版本是否符合要求：
```
ng version
npx cap version
```
启动项目验证功能正常：
```
ng serve
```
构建并同步Capacitor项目：
```
ng build
npx cap sync
```

批量自动更新工具推荐

除Angular CLI的ng update外，可使用npm-check-updates批量更新所有依赖到最新兼容版本：

安装工具：
```
npm install -g npm-check-updates
```
查看可更新的依赖列表：
```
ncu
```
自动更新package.json中的版本号：
```
ncu -u
```
安装更新后的依赖：
```
npm install
```

注意：该工具需手动验证强依赖（如Angular、Capacitor）的兼容性，建议先通过ng update处理Angular核心依赖后，再用此工具处理第三方库。

内容的提问来源于stack exchange，提问作者quma

如何将Angular 12项目升级至Angular 16并适配所有依赖？

现状说明 #

升级操作步骤 #

一、升级Node.js #

二、自动升级Angular核心依赖 #

三、升级Capacitor到兼容版本 #

四、适配第三方依赖 #

五、验证升级结果 #

批量自动更新工具推荐 #