Highcharts: Loading `moment.js` as a module, using `import`

Created on 23 Jul 2018  ·  3Comments  ·  Source: highcharts/highcharts

Expected behaviour

Highcharts should be able to find moment when loaded as a module using import.

Actual behaviour

moment is not saved on window, so Highcharts fail when trying to access moment like:
https://github.com/highcharts/highcharts/blob/3c8867e8ead548ada66c38f73fce74b2130dac8b/js/parts/Time.js#L370

Live demo with steps to reproduce

https://codesandbox.io/s/7yyz98kv4x

See code and comments in app/app.component.ts

Suggested solution

Add API options, like time.moment that will be settable for a user, so it will be possible to load moment in above quoted code like:

moment = options.moment || win.moment;

POC: https://codesandbox.io/s/jjr666l539

Workaround

Set moment as window.moment, so Highcharts will be able to find it. E.g. like:

import * as moment from "moment";

window.moment = moment;
Enhancement

Most helpful comment

Thanks a lot for this tip, the following snipit worked fine for me:

import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';

import * as Highcharts from 'highcharts';
import ExportingModule from 'highcharts/modules/exporting';
import * as Moment from 'moment';
import * as mTZ from 'moment-timezone';

declare global {
  interface Window {
    moment: any;
  }
}
window.moment = Moment;
mTZ();

ExportingModule(Highcharts);
Highcharts.setOptions({
  title: {
...

@Component({
...
})
export class CellPowerGraphComponent implements OnInit, OnDestroy {
...

All 3 comments

Have the same problem, but your suggested work-around does not work for me.
I get the error message at compile:
apps/frontend/src/app/solar-data/cell-power-graph/cell-power-graph.component.ts(8,8): error TS2339: Property 'moment' does not exist on type 'Window'.

It was set the following way:

import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';

import * as Highcharts from 'highcharts';
import ExportingModule from 'highcharts/modules/exporting';
import * as Moment from 'moment';
import * as mTZ from 'moment-timezone';

window.moment = Moment;
mTZ();

@mfechner
The error will not affect build JavaScript - unless you config prevents builds on TS errors. My solution is just a workaround, so you could ignore this TS error by casting the window to any or using any other method to suppress this error.

(window as any).moment = Moment;

or you could extend the Window interface and add the moment definition, which is a proper solution for this type of errors.

Thanks a lot for this tip, the following snipit worked fine for me:

import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';

import * as Highcharts from 'highcharts';
import ExportingModule from 'highcharts/modules/exporting';
import * as Moment from 'moment';
import * as mTZ from 'moment-timezone';

declare global {
  interface Window {
    moment: any;
  }
}
window.moment = Moment;
mTZ();

ExportingModule(Highcharts);
Highcharts.setOptions({
  title: {
...

@Component({
...
})
export class CellPowerGraphComponent implements OnInit, OnDestroy {
...
Was this page helpful?
0 / 5 - 0 ratings