从Angular 8.X升级至更高版本时遇Renderer声明错误求助

问题情况 #

从Angular 8.X升级到9.X、15-17.X等更高版本时，弹出「Renderer is declared here」错误。已经跟着官方升级指南操作，也试过npm audit fix、npm update --force、--legacy-peer-deps这些命令，不想改node_modules里的文件，想知道是不是漏了步骤或者用了已经废弃的内容。

错误截图：

当前package.json内容：

{
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "set NODE_OPTIONS=--openssl-legacy-provider && ng serve -o",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "9.1.13",
    "@angular/cdk": "9.2.4",
    "@angular/common": "9.1.13",
    "@angular/compiler": "9.1.13",
    "@angular/core": "9.1.13",
    "@angular/forms": "9.1.13",
    "@angular/material": "9.2.4",
    "@angular/platform-browser": "9.1.13",
    "@angular/platform-browser-dynamic": "9.1.13",
    "@angular/router": "9.1.13",
    "@auth0/angular-jwt": "3.0.0",
    "@ng-bootstrap/ng-bootstrap": "4.2.2",
    "angular-bootstrap-md": "7.5.4",
    "angular-plotly.js": "1.4.2",
    "bn-ng-idle": "0.0.2",
    "bootstrap": "4.3.1",
    "chart.js": "2.8.0",
    "core-js": "2.6.9",
    "file-saver": "2.0.2",
    "jwt-decode": "2.2.0",
    "lodash.isequal": "4.5.0",
    "ng2-charts": "2.2.3",
    "ng2-search-filter": "0.5.1",
    "ngx-bootstrap": "3.3.0",
    "ngx-chips": "2.0.2",
    "ngx-nestable": "0.9.4",
    "ngx-quill": "8.0.0",
    "plotly.js": "1.50.1",
    "quill": "1.3.7",
    "rxjs": "6.5.3",
    "tslib": "1.14.1",
    "xlsx": "0.15.1",
    "zone.js": "0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "0.901.15",
    "@angular/cli": "9.1.15",
    "@angular/compiler-cli": "9.1.13",
    "@angular/language-service": "9.1.13",
    "@types/jasmine": "2.8.8",
    "@types/jasminewd2": "2.0.3",
    "@types/node": "8.9.4",
    "angular-file": "1.2.2",
    "codelyzer": "4.5.0",
    "jasmine-core": "2.99.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "3.1.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-coverage-istanbul-reporter": "2.0.1",
    "karma-jasmine": "1.1.2",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "5.4.0",
    "ts-node": "7.0.0",
    "tslint": "5.11.0",
    "typescript": "3.8.3",
    "ngx-quill-editor": "2.2.2"
  }
}

错误原因 #

1. Renderer被废弃：Angular 9开始彻底移除了Renderer类，换成了Renderer2。你的代码或者依赖库还在调用旧的Renderer，所以编译报错。
2. 第三方库版本太老：比如ngx-chips、angular-bootstrap-md这些库的版本没跟上Angular升级，内部还在使用Renderer，导致不兼容。
3. 跨版本跳升太猛：直接从Angular 8跳到15-17，跳过了中间版本的过渡，很多API变更没处理到位，堆积出问题。

解决步骤 #

1. 把代码里的Renderer换成Renderer2 #

• 全局搜项目里的import { Renderer } from '@angular/core';，全部改成import { Renderer2 } from '@angular/core';
• 修改注入代码：

  // 旧写法
  constructor(private renderer: Renderer) {}
  
  // 新写法
  constructor(private renderer: Renderer2) {}
  

• 调整方法调用：Renderer和Renderer2的方法有差异，比如原来的renderer.setElementClass要改成renderer.addClass或removeClass，挨个改适配。

2. 升级第三方依赖到兼容版本 #

检查package.json里的第三方库，换成对应Angular版本兼容的版本：

• ngx-chips：Angular 9要升到2.2.0+，更高版本的Angular要找对应兼容版
• angular-bootstrap-md：Angular 9对应8.0.0+
• ngx-quill：Angular 9要升到9.0.0+
• @ng-bootstrap/ng-bootstrap：Angular 9对应5.0.0+
• 其他像ng2-charts、ngx-bootstrap这些库，查各自的版本兼容表，逐个升级。

执行升级命令：

npm install <包名>@<兼容版本号> --save

3. 按官方指南分步升级，别跳版本 #

不能直接从8跳到15-17，得一步步来：
8 → 9 → 10 → 11 → 12 → 13 → 14 → 15 → 16 → 17
每次升完一个版本，先跑ng update @angular/core @angular/cli解决当前版本的兼容问题，确保项目能正常编译运行，再升下一个版本。

4. 清理缓存重新装依赖 #

# 删除node_modules和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install --legacy-peer-deps
# 清理Angular缓存
ng cache clean

5. 检查修复TypeScript和代码规则 #

Angular 9+对TypeScript版本有要求（当前typescript: 3.8.3符合Angular 9，但更高版本要升级TS），升级后检查代码里的类型错误，修复TSLint报的问题。

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