从Angular 10升级到Angular 11后执行ng serve出现非自研代码报错

根本原因 #

该报错虽然指向TypeScript官方自带的类型声明文件，但和业务代码或者项目依赖的兼容性直接相关，本质是Angular升级带动TypeScript版本变化后，类型校验规则收紧触发的问题，具体分为以下几种情况：

• TypeScript版本适配问题
  Angular 11要求的TypeScript版本范围为4.0.x ~ 4.3.x，远高于Angular 10支持的3.9.x版本。新版本TS对Promise的泛型校验规则收紧：如果Promise的泛型没有显式声明为void，调用resolve()时必须传入对应类型的参数，否则就会触发类型错误。项目里大概率存在new Promise(resolve => { resolve() })这类无参调用resolve的旧代码，低版本TS没有校验这个场景，升级后就会抛出报错。
• 第三方依赖不兼容
  如果排查完自主开发的业务代码没有上述写法，那问题出在项目依赖的第三方npm包中，包里存在无参调用resolve的写法，TS校验依赖的类型声明时触发了报错。
• tsconfig配置问题
  如果tsconfig.json中compilerOptions下没有配置skipLibCheck: true，TS默认会校验所有node_modules下的类型声明文件，哪怕是非业务代码的问题也会阻塞项目启动。

解决方法 #

• 排查所有业务代码中的Promise实例化逻辑，对于不需要返回值的Promise，显式声明泛型为void，示例：

// 错误写法
new Promise(resolve => {
  // 业务逻辑
  resolve()
})

// 正确写法
new Promise<void>(resolve => {
  // 业务逻辑
  resolve()
})

• 调整tsconfig.json配置，开启跳过依赖库校验：

{
  "compilerOptions": {
    "skipLibCheck": true
  }
}

• 确认当前安装的TypeScript版本在Angular 11支持的范围内，不要安装过高版本的TS引发额外兼容问题。

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