升级Angular v13后Ionic项目报HTMLIonIconElement接口冲突错误怎么解决

问题原因 #

这个错误是升级到Angular13后，项目使用的TypeScript版本与旧版ionicons的类型定义不兼容导致的：IonIcon接口里的ariaHidden、ariaLabel属性定义和HTMLStencilElement接口的同名属性冲突，不符合TS的类型校验规则。

解决方案 #

• 方案1：升级依赖到兼容版本
  执行以下命令安装适配Angular13的ionicons版本即可解决绝大多数冲突：

  npm install ionicons@6.x --save
  

  如果同时使用@ionic/angular，同步升级到对应Angular13的6.x版本：

  ng update @ionic/angular@6
  

• 方案2：配置TS跳过第三方库类型检查
  若不想升级依赖，可在项目根目录的tsconfig.json的compilerOptions节点下添加配置，跳过node_modules下的库类型校验，该配置不会影响业务代码的类型检查：

  {
    "compilerOptions": {
      // 保留其他原有配置
      "skipLibCheck": true
    }
  }
  

• 方案3：手动补充类型声明兼容
  若上述方案都不适用，可在项目src目录下新建typings.d.ts全局类型声明文件，添加以下内容手动修正冲突属性的定义：

  declare interface HTMLIonIconElement {
    ariaHidden: string | null;
    ariaLabel: string | null;
  }
  

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