Angular从7.3.10升级到8.3.29后ScrollbarHelper参数解析错误求助

问题重现 #

把Angular项目从7.3.10升级到8.3.29，编译顺利通过，但浏览器控制台报错：

compiler.js:2175 Uncaught Error: Can't resolve all parameters for 
  ScrollbarHelper: (?).
   at syntaxError (compiler.js:2175:1)
   at CompileMetadataResolver._getDependenciesMetadata 
    (compiler.js:20401:1)
   at CompileMetadataResolver._getTypeMetadata (compiler.js:20296:1)
   at CompileMetadataResolver._getInjectableTypeMetadata 
     (compiler.js:20514:1)
   at CompileMetadataResolver.getProviderMetadata (compiler.js:20523:1)
   at compiler.js:20461:1
   at Array.forEach (<anonymous>)
   at CompileMetadataResolver._getProvidersMetadata 
     (compiler.js:20421:1)
   at CompileMetadataResolver.getNgModuleMetadata (compiler.js:20148:1)
   at CompileMetadataResolver.getNgModuleSummary (compiler.js:19983:1)

试过删除node_modules重新安装，问题依旧，项目依赖见文末。

解决步骤 #

1. 升级不兼容的第三方库 #

你的依赖里primeng@6.1.3是针对Angular 6的版本，和Angular 8的依赖注入系统冲突，而ScrollbarHelper正是PrimeNG的内置服务。直接升级到兼容Angular 8的版本：

npm install primeng@^8.0.0 primeicons@^2.0.0 --save

2. 修复Angular核心依赖版本不一致 #

目前@angular/platform-server和@angular/language-service还停留在Angular 7版本，这会导致DI系统异常，升级它们到Angular 8.2.14：

npm install @angular/platform-server@^8.2.14 --save
npm install @angular/language-service@^8.2.14 --save-dev

3. 检查自定义ScrollbarHelper服务（如果是自己写的） #

如果ScrollbarHelper是项目内的自定义服务，确认：

• 服务类上添加了@Injectable()装饰器，推荐用providedIn: 'root'声明：

  import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class ScrollbarHelper {
    // 检查构造函数参数是否都正确声明了类型，需要注入非类令牌的话要加@Inject()
    constructor(private someService: SomeService) {}
  }
  

• 构造函数里的参数有没有未声明类型的情况，或者遗漏了@Inject()装饰器。

4. 清理缓存并重新构建 #

做完上面的修改后，彻底清理缓存再构建：

# 删除依赖和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install
# 清理Angular构建缓存
ng clean
# 重新构建项目
ng build --prod

原项目依赖 #

"dependencies":{
   "@agm/core":"^1.0.0-beta.7",
   "@angular/animations":"^8.2.14",
   "@angular/cdk":"^8.2.3",
   "@angular/common":"^8.2.14",
   "@angular/compiler":"^8.2.14",
   "@angular/core":"^8.2.14",
   "@angular/forms":"^8.2.14",
   "@angular/material":"^8.2.3",
   "@angular/platform-browser":"^8.2.14",
   "@angular/platform-browser-dynamic":"^8.2.14",
   "@angular/platform-server":"^7.2.16",
   "@angular/router":"^8.2.14",
   "@ng-bootstrap/ng-bootstrap":"^4.2.2",
   "@ng-idle/core":"^6.0.0-beta.5",
   "@ng-idle/keepalive":"^6.0.0-beta.5",
   "@ng-select/ng-select":"^3.7.3",
   "@ngrx/store":"^6.1.2",
   "@ngx-translate/core":"^13.0.0",
   "@ngx-translate/http-loader":"^2.0.1",
   "@nicky-lenaers/ngx-scroll-to":"^1.1.1",
   "@stomp/stompjs":"^6.1.2",
   "@swimlane/ngx-charts":"^9.0.0",
   "@swimlane/ngx-datatable":"^12.0.0",
   "@types/chartist":"^0.9.48",
   "@types/crypto-js":"^3.1.47",
   "@types/d3-shape":"^1.3.12",
   "@types/jquery":"^3.5.29",
   "@types/socket.io-client":"^1.4.36",
   "angular-calendar":"^0.25.2",
   "angular-ng-autocomplete":"^1.1.6",
   "angular2-cookie":"^1.2.6",
   "angularfire2":"^5.4.2",
   "bootstrap":"4.0.0",
   "bourbon":"^4.3.4",
   "chartist":"^0.11.0",
   "classlist.js":"^1.1.20150312",
   "core-js":"^2.6.12",
   "crypto-js":"^3.3.0",
   "d3":"^4.13.0",
   "datatables.net":"^1.13.11",
   "exceljs":"^4.2.1",
   "file-saver":"^2.0.5",
   "firebase":"^5.1.0",
   "intl":"^1.2.5",
   "jquery":"^3.7.1",
   "jszip":"^3.10.1",
   "material-design-icons":"^3.0.1",
   "moment":"^2.30.1",
   "net":"^1.0.2",
   "ng-chartist":"^1.1.1",
   "ng-click-outside":"^4.0.0",
   "ng2":"^0.2.4",
   "ng2-charts":"^1.6.0",
   "ng2-completer":"^3.0.3",
   "ng2-dragula":"^2.1.1",
   "ng2-file-upload":"^1.3.0",
   "ng2-img-cropper":"^0.9.0",
   "ng2-nouislider":"^1.8.3",
   "ng2-smart-table":"^1.5.0",
   "ng2-validation":"^4.2.0",
   "ng6-toastr-notifications":"^1.0.4",
   "ngx-chips":"^1.9.8",
   "ngx-pagination":"^3.1.0",
   "ngx-quill":"^4.8.0",
   "ngx-ui-switch":"^1.4.9",
   "node-sass":"^4.11.0",
   "nouislider":"^11.1.0",
   "npm":"^6.4.1",
   "primeicons":"^1.0.0-beta.10",
   "primeng":"^6.1.3",
   "quill":"^1.3.7",
   "resize-observer-polyfill":"^1.5.0",
   "rxjs":"^6.4.0",
   "screenfull":"^3.3.1",
   "socket.io-client":"2.2.0",
   "sockjs-client":"^1.6.1",
   "stompjs":"^2.3.2",
   "stream":"0.0.2",
   "sweetalert2":"^7.12.9",
   "videogular2":"^6.0.6",
   "web-animations-js":"^2.2.5",
   "xlsx":"^0.16.5",
   "zone.js":"^0.9.1"
},
"devDependencies":{
   "@angular-devkit/build-angular":"^0.803.29",
   "@angular/cli":"^8.3.29",
   "@angular/compiler-cli":"^8.2.14",
   "@angular/language-service":"^7.2.16",
   "@types/core-js":"^0.9.43",
   "@types/jasmine":"^2.8.23",
   "@types/moment":"^2.13.0",
   "@types/node":"^9.6.55",
   "codelyzer":"^4.0.2",
   "jasmine-core":"^2.99.1",
   "jasmine-spec-reporter":"^4.2.1",
   "karma":"^2.0.0",
   "karma-chrome-launcher":"^2.2.0",
   "karma-cli":"~1.0.1",
   "karma-coverage-istanbul-reporter":"^1.3.1",
   "karma-jasmine":"^1.1.1",
   "karma-jasmine-html-reporter":"^0.2.2",
   "protractor":"^5.4.1",
   "ts-node":"^4.1.0",
   "tslint":"^5.7.0",
   "typescript":"^3.5.3"
}

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