@ionic/angular与Angular13、TypeScript、ionicons依赖冲突解决咨询

已安装环境信息 #

ionic info

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.8.5
   @angular-devkit/build-angular : 13.0.2
   @angular-devkit/schematics    : 13.0.2
   @angular/cli                  : 13.0.2
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.1
   @capacitor/android : 3.3.1
   @capacitor/core    : 3.3.1
   @capacitor/ios     : 3.3.1

Utility:

   cordova-res : 0.15.3
   native-run  : 1.5.0

System:

   NodeJS : v17.0.1 (/usr/local/Cellar/node/17.0.1/bin/node)
   npm    : 8.1.3
   OS     : macOS Monterey

问题背景 #

• Angular 13 要求 TypeScript 版本 >= 4.4.2
• 当前使用的 @ionic/angular 5.8.5 依赖 @ionic/core 5.8.5
• @ionic/core 5.8.5 依赖的 ionicons 5.5.3 与 TypeScript >= 4.4.x 不兼容
• ionicons 6.x 版本已适配 TypeScript >= 4.4.x 版本

解决方案 #

你可以通过npm的依赖覆盖功能强制指定@ionic/core使用ionicons 6.x版本，操作步骤如下：

方案1：使用package.json的overrides配置（npm 8.3.0及以上版本支持） #

1. 打开项目根目录的package.json文件，添加overrides字段：

{
  "name": "你的项目名",
  "version": "0.0.1",
  // 其他原有配置
  "overrides": {
    "@ionic/core": {
      "ionicons": "^6.0.0"
    }
  }
}

2. 删除原有的node_modules文件夹和package-lock.json文件
3. 执行npm install重新安装依赖即可。

方案2：使用npm-force-resolutions（适配npm 8.3.0以下版本） #

1. 打开项目根目录的package.json文件，添加resolutions字段：

{
  "name": "你的项目名",
  "version": "0.0.1",
  // 其他原有配置
  "resolutions": {
    "ionicons": "^6.0.0"
  }
}

2. 在package.json的scripts字段中添加预安装钩子：

"scripts": {
  "preinstall": "npx npm-force-resolutions",
  // 其他原有脚本
}

3. 删除原有的node_modules文件夹和package-lock.json文件
4. 执行npm install重新安装依赖即可。

验证方案是否生效 #

安装完成后执行npm ls ionicons，如果输出中ionicons的版本为6.x，且@ionic/core下的ionicons依赖也指向6.x版本，即说明配置生效。

注意：修改依赖版本后建议跑一遍项目核心功能测试，避免ionicons大版本升级带来的图标命名、API变更兼容问题。

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