Does Angular 4 supports highcharts-angular (Highcharts wrapper for Angular)?

Question

I tried installing all the highcharts-angular versions from 2.0.0 to 2.10.0. With all I'm getting the similar error while running the app.

ERROR in Metadata version mismatch for module C:/dev/Angular-WorkSpace/ma-property-report/node_modules/highcharts-angular/highcharts-angular.d.ts, found version 4, expected 3, resolving symbol SharedModule in C:/dev/Angular-WorkSpace/ma-property-report/src/app/shared/shared.module.ts, resolving symbol SharedModule in C:/dev/Angular-WorkSpace/ma-property-report/src/app/shared/shared.module.ts

Error Message Screenshot

While surfing internet, I get to know that these errors occurs if the dependency(highcharts-angular) is not compatible with Angular 4. Updating to angular 5 is not an option right now. I tried downgrading the highcharts-angular versions all the way from 2.10.0 to 2.0.0. But still getting the same Metadata version mismatch. This raises the question does Angular 4 supports highcharts-angular (Highcharts wrapper for Angular), if yes How can I resolve this error ?

npm -v
6.14.8

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

Checkout my package.json file.

{
  "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"
  }
}

Answer 1

If you take a look at the version from 2.0.0 until 2.10.0 of highcharts-angular wrapper all of them requires Angular to be in a version higher than 6.0.0. In other words, it won't work like this.

But you always can create a chart in Angular without that wrapper like in the demo below.
Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-i9etwb