Angular 11升级至12遇ts.resolveTypeReferenceDirective错误求助

针对你遇到的Non-string value passed to ts.resolveTypeReferenceDirective错误，结合你的package.json情况，可按以下步骤排查修复：

1. 同步Angular CDK与Material版本到12 #

你的Angular核心已升级到12，但@angular/cdk和@angular/material仍停留在11版本，版本不兼容会引发底层TS编译冲突。执行以下命令完成升级：

ng update @angular/material@12

2. 移除废弃的@angular/http包 #

@angular/http在Angular 4.x之后已被废弃，Angular 12不再兼容该包，需彻底移除：

npm uninstall @angular/http

同时将代码中所有@angular/http的引用替换为@angular/common/http的HttpClientModule和HttpClient。

3. 更新其他不兼容依赖 #

• rxjs：Angular 12要求rxjs版本为~6.6.6及以上的6.x版本，当前6.6.3版本过低，执行升级：

  npm install rxjs@~6.6.7
  

• ts-node：当前~9.0.0版本与TypeScript 4.3.5不兼容，升级到适配版本：

  npm install ts-node@~10.9.1 --save-dev
  

• 移除TSLint相关依赖：Angular 12已官方推荐ESLint替代TSLint，codelyzer和rxjs-tslint均为TSLint生态工具，建议直接移除：

  npm uninstall codelyzer rxjs-tslint tslint --save-dev
  

  若暂时保留TSLint，至少升级codelyzer到兼容Angular 12的版本：

  npm install codelyzer@~6.0.2 --save-dev
  

4. 清理依赖并重新安装 #

1. 删除项目根目录下的node_modules文件夹和package-lock.json文件
2. 清除npm缓存：

   npm cache clean --force
   

3. 重新安装依赖：

   npm install
   

5. 检查tsconfig.json配置 #

确保tsconfig.json的compilerOptions中typeRoots和types配置为字符串数组，无非法值：

{
  "compilerOptions": {
    // ...其他配置
    "typeRoots": ["node_modules/@types"],
    "types": ["node", "jasmine"]
  }
}

完成以上步骤后，重新执行ng serve即可正常启动项目。

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