Angular 6 library, Import highcharts exporting

[vicatcu]

In order to get it to work in an Angular 6 library module, I had to do it very slightly differently from what's in the README, and I just wanted to share that back for possible inclusion in the docs.

Instead of:

import * as Highcharts from 'highcharts';
import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

I did:

import * as Highcharts from 'highcharts';
import * as HC_exporting_ from 'highcharts/modules/exporting';
const HC_exporting = HC_exporting_;
HC_exporting(Highcharts);

As far as I can tell this is just a workaround. It's not something "special" to highcharts, I had to do the same sort of thing for moment. But maybe this will save someone else some search time. This follows from advice I found here: jvandemo/generator-angular2-library#221

The code above lives in any Component in which I want to use highcharts.

[KacperMadej]

Hi @vicatcu

Did you had to use the second way of loading the files? or are you just sharing an alternative way that also works?

If

import * as HC_exporting from 'highcharts/modules/exporting';

does't work, then you could try

import HC_exporting from 'highcharts/modules/exporting';

It depends on environment configuration and Highcharts version (at least haven't been reported differently so far).

It looks like the code you shared is about loading Highcharts. We would like to keep problems about Highcharts among it's other GitHub issues, so if this is a bug report we should move it to the right place.

[KacperMadej]

Closing due to inactivity, but will reopen if needed.

[Getz85]

I follow the instructions in the readme to use the exporting module with the new version but there is still a typescript error:

import * as Highcharts from 'highcharts';
import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

error TS2497: Module '"D:/Projets/Vehiparc/vehiparc-front/node_modules/@types/highcharts/modules/exporting"' resolves to a non-module entity and cannot be imported using this construct.

Reading your comment above, i tried:

import HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

This give me:

error TS1192: Module '"D:/Projets/Vehiparc/vehiparc-front/node_modules/@types/highcharts/modules/exporting"' has no default export.

I also tried:

import * as Highcharts from 'highcharts';
require('highcharts/modules/exporting')(Highcharts);

error TS2304: Cannot find name 'require'.

My versions in the package.json are:

    "@angular/core": "^6.0.9"
    "highcharts": "^6.1.1"
    "highcharts-angular": "^2.0.3"
    "highcharts-custom-events": "^2.1.6"
    "@types/highcharts": "^5.0.27"

[KacperMadej]

@Getz85
I'll check the first two TS errors, but in the meantime you could try resolving the 3rd way as it's not connected to Highcharts. Please see this Stack Overflow answer or in short - add declare var require: any at the top of your TypeScript file.

[Getz85]

@KacperMadej

Indeed, the workaround for the 'require' options works, thank you!

[KacperMadej]

@Getz85
I tried recreating the problem you have, but couldn't. Maybe some dependencies are different. Here's my list:

  "dependencies": {
    "@angular/common": "^6.0.9",
    "@angular/core": "^6.0.9",
    "@angular/compiler": "^6.0.9",
    "@angular/animations": "^6.0.9",
    "@angular/forms": "^6.0.9",
    "@angular/http": "^6.0.9",
    "@angular/platform-browser": "^6.0.9",
    "@angular/platform-browser-dynamic": "^6.0.9",
    "@angular/router": "^6.0.9",
    "core-js": "^2.4.1",
    "highcharts": "^6.1.1",
    "highcharts-custom-events": "^2.1.6",
    "rxjs": "^6.0.9",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.7.0",
    "@angular-devkit/build-ng-packagr": "~0.7.0",
    "@angular/cli": "^6.0.9",
    "@angular/compiler-cli": "^6.0.9",
    "@angular/language-service": "^6.0.9",
    "@types/highcharts": "^5.0.27",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.4.2",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng-packagr": "^4.0.0",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tsickle": ">=0.27.3",
    "tslib": "^1.7.1",
    "tslint": "^5.10.0",
    "typescript": "~2.7.2"
  }

I have used this repo as a demo, so I only changed this file.

Please check if there are any differences or if you could recreate the problem using this repo as a demo with some modification.

[Getz85]

Well I cloned this repo, do a npm install, change the line 7 in app.component.ts:

const HC_exporting = require('highcharts/modules/exporting');

to

import * as HC_exporting from 'highcharts/modules/exporting';

And the message is displayed on VS code and when compiling...

ERROR in src/app/app.component.ts(7,31): error TS2497: Module '"D:/Projets/hc-angular/highcharts-angular/node_modules/@types/highcharts/modules/exporting"' resolves to a non-module entity and cannot be imported using this construct.

That's really strange as we have the same tsconfig...

I try to create a stackblitz to reproduce

[Getz85]

And the stackblitz raise an other error...

He can't find the exporting module, can't find why: https://stackblitz.com/edit/angular-zgfvbs

[KacperMadej]

Not sure what's going on in stackblitz. highcharts is added to dependencies. Seems the problem is caused by @types definitions, but it works through require.

[fmorc]

I found a solution for this. I had the same problem with Angular 6 and this wrapper whenever I wanted to make usage of the "exporting" module, so instead of doing:

import * as Highcharts from 'highcharts'; import * as HC_exporting from 'highcharts/modules/exporting'; HC_exporting(Highcharts);

I did:

import * as exporting from 'highcharts/modules/exporting.src'; exporting(Highcharts);

I don't think it has to be the solution, but at least is a workaround that works

[KacperMadej]

Thank you @fmorc for sharing your solution. This could be used as a workaround for now - using files with .src or .src.js endings to avoid outdated definitions.

Types definitions are outdated, but we are close to an new types definitions release that should help in this case - please refer to: highcharts/highcharts#4876 (comment)

[ghost]

Hi @KacperMadej , I am getting the same error, but I am using highcharts with angular universal, client-side rendering is all good but when it comes to server-side rendering, it's giving me that error.

Here are my configs:

Angular CLI: 6.0.0
Node: 8.11.3
OS: win32 x64
Angular: 6.1.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Detailed Package Version
"dependencies": {
"@angular/animations": "^6.1.10",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/flex-layout": "^6.0.0-beta.18",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/platform-server": "^6.0.0",
"@angular/router": "^6.0.0",
"@nguniversal/common": "^6.0.0",
"@nguniversal/express-engine": "^6.0.0",
"@nguniversal/module-map-ngfactory-loader": "^6.0.0",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"highcharts": "^6.1.4",
"highcharts-angular": "^2.3.1",
"primeicons": "^1.0.0-beta.10",
"primeng": "^6.1.4",
"rxjs": "^6.3.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.6.0",
"@angular/cli": "6.0.0",
"@angular/compiler-cli": "^6.0.0",
"@angular/language-service": "^6.0.0",
"@types/node": "^8.0.30",
"codelyzer": "^4.0.2",
"express": "^4.15.2",
"http-server": "^0.10.0",
"pre-commit": "^1.2.2",
"reflect-metadata": "^0.1.10",
"ts-loader": "^4.2.0",
"tslint": "^5.7.0",
"typescript": "~2.9.2"
}

Please tell me if you need any other info for debugging this.

This is my code for chart:

import * as Highcharts from 'highcharts';
import * as HC_exporting from 'highcharts/modules/exporting';
HC_exporting(Highcharts);

@Component({
  selector: 'app-data',
  templateUrl: './data.component.html',
  styleUrls: ['./data.component.css']
})
export class DataComponent implements OnInit {
  Highcharts = Highcharts; // required
  chartConstructor = 'chart'; // optional string, defaults to 'chart'
  chartOptions = {
    series: [{
      type: 'column',
      data: [1, 2, 3]
    }]
  }; // required

  updateFlag = false; // optional boolean
  oneToOneFlag = true; // optional boolean, defaults to false
  runOutsideAngularFlag = false; // optional boolean, defaults to false


  constructor() { }

  ngOnInit() {
  }
}

Here is live demo on sandbox -
https://codesandbox.io/s/8yvn62v400

[ghost]

I am getting this error while running "npm run serve:ssr" in angular universal project:

\node_modules\highcharts\modules\exporting.src.js:49
userAgent = win.navigator.userAgent,
^ <-------------------------------------------------------This upside arrow is under "n" of navigator

TypeError: Cannot read property 'navigator' of undefined
at D:\Projects\statsncharts\ui-snc-com\node_modules\highcharts\modules\exporting.src.js:49:23
at D:\Projects\statsncharts\ui-snc-com\node_modules\highcharts\modules\exporting.src.js:1737:3
at Object../src/app/stats/stats.component.ts (D:\Projects\statsncharts\ui-snc-com\dist\server\main.js:2192:1)
at webpack_require (D:\Projects\statsncharts\ui-snc-com\dist\server\main.js:23:30)
at Object../src/app/stats/stats.component.ngfactory.js (D:\Projects\statsncharts\ui-snc-com\dist\server\main.js:2160:10)
at webpack_require (D:\Projects\statsncharts\ui-snc-com\dist\server\main.js:23:30)
at Object../src/app/stats/stats.module.ngfactory.js (D:\Projects\statsncharts\ui-snc-com\dist\server\main.js:2233:10)
at webpack_require (D:\Projects\statsncharts\ui-snc-com\dist\server\main.js:23:30)
at Object../src/main.server.ts (D:\Projects\statsncharts\ui-snc-com\dist\server\main.js:2284:18)
at webpack_require (D:\Projects\statsncharts\ui-snc-com\dist\server\main.js:23:30)

[KacperMadej]

If navigator is not available, then context of Highcharts initialization is wrong and it's not a window, so other features of Highcharts might not work also - not only exporting.

The demo you have provided doesn't throw any error and doesn't show any chart. After changing anything the project tries to rebuild, but fails with overload of errors and problems making the demo freeze and unusable. Errors start like:

←→1 of 118 errors on the page
ModuleNotFoundError
Could not find module in path: '@angular/flex-layout/core' relative to '/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js'

[ghost]

Ok, I will make another working demo on sandbox, and will send you it's link. Thanks for looking into it.

Can you please tell me how can I make the demo project as angular-univeral, as I was only able to build angular project on sandbox.

[KacperMadej]

@yaseen-nadaf
I'm afraid Angular Universal will not allow Highcharts to work by default due to this documentation section:
https://angular.io/guide/universal#working-around-the-browser-apis

Highcharts needs window and document to work, as it's designed to have access to those elements. As explained in the linked docs - you could...

find an injectable Angular abstraction over the object you need such as Location or Document; it may substitute adequately for the specific API that you're calling. If Angular doesn't provide it, you can write your own abstraction that delegates to the browser API while in the browser and to a satisfactory alternative implementation while on the server.

[KacperMadej]

Docs are updated now.
Load modules as e.g. import HC_exporting from 'highcharts/modules/exporting'; and when using TypeScript definitions be sure to load Highcharts v7+ with TypeScript definitions provided (or beta declarations for Highcharts v6 with that Highcharts version).
Closing as resolved.

[moelzanaty3]

As documentation at angular-highcharts.

// app.module.ts
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as exporting from 'highcharts/modules/exporting.src';

@NgModule({
  providers: [
    { provide: HIGHCHARTS_MODULES, useFactory: () => [ exporting ] } // add as factory to your providers
  ]
})
export class AppModule { }

[KacperMadej]

@mohammedelzanaty

Wrong repository? This is highcharts-angular, not angular-highcharts.

[Zherdmant]

Thank you @fmorc for sharing your solution. This could be used as a workaround for now - using files with .src or .src.js endings to avoid outdated definitions.

Types definitions are outdated, but we are close to an new types definitions release that should help in this case - please refer to: highcharts/highcharts#4876 (comment)

Hi I from Ecuador, I had the same problem but I solved it in Angular 8 this way:
import * as Highcharts from 'highcharts'; require('highcharts/modules/exporting.src')(Highcharts);

I hope help someone. Sorry by my English :)

[khatekar]

I had the same problem and I tried a different option mentioned above, but I solved it in Angular 8 by:

import * as Highcharts from "highcharts";
import exporting from "highcharts/modules/exporting";
exporting(Highcharts);
import exportingData from "highcharts/modules/export-data";
exportingData(Highcharts);