Angular 4 是否支持 highcharts-angularAngular 的 Highcharts 包装器？

编程问答 2022-05-10

问题描述

我尝试安装从 2.0.0 到 2.10.0 的所有 highcharts-angular 版本。 尽管如此，我在运行应用程序时遇到了类似的错误。

模块 C:/dev/Angular-WorkSpace/ma-property-report/node_modules/highcharts-angular/highcharts-angular.d.ts 的元数据版本不匹配中的错误，发现版本 4，预期 3，解析 C:/dev/Angular-WorkSpace/ma-property-report/src/app/shared/shared.module.ts 中的符号 SharedModule，解析 C:/dev/ 中的符号 SharedModule Angular-WorkSpace/ma-property-report/src/app/shared/shared.module.ts

Error Message Screenshot

在上网时，我知道如果依赖项（highcharts-angular）与 Angular 4 不兼容，就会发生这些错误。 更新到 angular 5 现在不是一个选项。 我尝试将 highcharts-angular 版本从 2.10.0 降级到 2.0.0。 但仍然得到相同的元数据版本不匹配。 这就提出了一个问题，Angular 4 是否支持 highcharts-angular（Angular 的 Highcharts 包装器），如果是的话，我该如何解决这个错误？

npm -v
6.14.8

@angular/cli: 1.2.7 // global Angular CLI version = 6.2.9
node: 8.17.0
os: win32 x64

检查我的 package.json 文件。

{
  "name": "underwriter-web","version": "0.0.0","license": "MIT","scripts": {
    "ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"
  },"private": true,"dependencies": {
    "@angular/animations": "^4.4.3","@angular/common": "4.3.x","@angular/compiler": "4.3.x","@angular/core": "4.3.x","@angular/forms": "4.3.x","@angular/http": "4.3.x","@angular/platform-browser": "4.3.x","@angular/platform-browser-dynamic": "4.3.x","@angular/router": "4.3.x","@auth0/angular-jwt": "^1.0.0-beta.9","@ng-bootstrap/ng-bootstrap": "1.0.0-beta.5","@realpage-da/ng-map": "1.0.x","@types/nouiSlider": "^9.0.1","ag-grid": "11.0.0","ag-grid-angular": "11.0.0","ag-grid-enterprise": "11.0.0","angular2-jwt": "0.2.3","bootstrap": "4.0.0-alpha.6","cachefactory": "^3.0.0","core-js": "^2.4.1","file-saver": "1.3.3","font-awesome": "^4.7.0","highcharts": "5.0.12","highcharts-angular": "^2.4.0","lodash": "^4.17.4","moment": "2.18.1","ng2-date-picker": "2.8.1","ng2-toastr": "^4.1.2","ngx-cookie-service": "1.0.9","node-sass": "~4.5.3","nouiSlider": "^10.1.0","roboto-fontface": "^0.9.0","rxjs": "5.5.0","sass-loader": "^6.0.5","web-animations-js": "^2.3.1","zone.js": "^0.8.4"
  },"devDependencies": {
    "@angular/cli": "1.2.7","@angular/compiler-cli": "4.3.x","@types/highcharts": "5.0.10","@types/jasmine": "2.5.38","@types/lodash": "4.14.73","@types/node": "~6.0.60","codelyzer": "~2.0.0","jasmine-core": "~2.5.2","jasmine-spec-reporter": "~3.2.0","karma": "~1.4.1","karma-chrome-launcher": "~2.1.1","karma-cli": "~1.0.1","karma-coverage-istanbul-reporter": "^0.2.0","karma-jasmine": "~1.1.0","karma-jasmine-html-reporter": "^0.2.2","protractor": "~5.1.0","ts-node": "3.0.4","tslint": "~4.5.0","typescript": "2.3.2"
  }
}

解决方法

如果您查看 highcharts-angular 包装器从 2.0.0 到 2.10.0 的版本，所有这些都要求 Angular 的版本高于 6.0.0。换句话说，它不会像这样工作。

但是您始终可以在 Angular 中创建图表，而无需像下面的演示那样使用包装器。
演示：https://stackblitz.com/edit/highcharts-angular-basic-line-i9etwb

angularangularangular2-highchartshighchartshighchartsjavascripttypescripttypescripttypescript