Angular 12升级至13：手动修改package.json的相关疑问

1. 手动修改package.json升级是否可行？ #

可行，但不推荐。ng update命令会自动处理依赖版本兼容、脚手架配置更新、代码迁移提示等细节，手动修改容易遗漏关键变更，增加出错概率。如果一定要手动操作，是可以完成升级的。

2. 需要修改的package.json内容及其他依赖 #

除了@angular/core、@angular/cli、@angular/material，所有Angular官方依赖版本必须统一到13.x，同时配套的第三方依赖也需要调整到兼容版本：

必须同步升级的Angular官方依赖 #

所有@angular/*包的主版本要保持一致，补丁版本建议统一到13系列的最新稳定版：

• 生产依赖（dependencies）：@angular/common、@angular/compiler、@angular/forms、@angular/platform-browser、@angular/platform-browser-dynamic、@angular/router
• 开发依赖（devDependencies）：@angular/compiler-cli、@angular/language-service
• 如果使用Angular Material，@angular/cdk版本必须和@angular/material完全一致

需要调整的第三方核心依赖 #

• rxjs：Angular 13要求rxjs ^7.4.0，需从Angular 12常用的6.x/7.0-7.3版本升级到7.4.x及以上的兼容版本
• typescript：Angular 13支持TypeScript 4.4.x和4.5.x，13.3及以上版本推荐使用4.5.x的最新补丁版
• zone.js：需升级到~0.11.4版本，匹配Angular 13的要求

修改示例 #

// dependencies 部分
{
  "@angular/core": "~13.3.11",
  "@angular/common": "~13.3.11",
  "@angular/compiler": "~13.3.11",
  "@angular/forms": "~13.3.11",
  "@angular/platform-browser": "~13.3.11",
  "@angular/platform-browser-dynamic": "~13.3.11",
  "@angular/router": "~13.3.11",
  "@angular/material": "~13.3.11",
  "@angular/cdk": "~13.3.11",
  "rxjs": "~7.4.0",
  "zone.js": "~0.11.4"
}

// devDependencies 部分
{
  "@angular/cli": "~13.3.11",
  "@angular/compiler-cli": "~13.3.11",
  "@angular/language-service": "~13.3.11",
  "typescript": "~4.5.5"
}

3. @angular/core应选择哪个13系列版本？ #

优先选择13系列的最新稳定补丁版本（如13.3.11），原因：

• 包含13.x全系列的bug修复和安全补丁，稳定性远高于早期版本（如13.0.3）
• 支持更高版本的TypeScript，提供更完善的类型检查和开发体验
• 修复了早期版本的已知兼容性问题

4. 如何确定需要升级的依赖及对应版本？ #

• Angular官方依赖：所有@angular/*包必须保持相同的主版本（13.x），补丁版本建议统一到13系列的最新稳定版，确保内部兼容性
• 配套核心依赖：参考Angular官方13版本的默认依赖要求，可通过新建一个Angular 13项目查看其package.json作为基准
• 第三方依赖：查看每个依赖的peerDependencies字段（可在npm官网或项目README中找到），确保其版本范围包含Angular 13

5. 手动修改后只执行npm i即可？ #

不行，还需要完成以下步骤：

1. 删除node_modules目录和package-lock.json（或yarn.lock）文件，避免缓存导致的版本冲突
2. 执行npm install（或yarn install）安装调整后的依赖
3. 检查配置文件：对比新建Angular 13项目的angular.json，调整现有项目的配置项（如build输出路径、优化选项等）
4. 代码迁移：Angular 13存在部分破坏性变更（如ViewEncapsulation.ShadowDom行为调整、部分API废弃），需手动检查代码并修复，也可运行ng update --dry-run查看官方提示的迁移项
5. 验证项目：执行ng serve启动开发服务器、ng build构建生产包，排查并修复编译/运行时错误

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