Highcharts: Laden von `moment.js` als Modul mit `import`

Erstellt am 23. Juli 2018  ·  3Kommentare  ·  Quelle: highcharts/highcharts

Erwartetes Verhalten

Highcharts sollte moment wenn es als Modul mit import geladen wird.

Tatsächliches Verhalten

moment wird nicht auf window gespeichert, daher schlagen Highcharts fehl, wenn versucht wird, auf moment zuzugreifen, wie:
https://github.com/highcharts/highcharts/blob/3c8867e8ead548ada66c38f73fce74b2130dac8b/js/parts/Time.js#L370

Live-Demo mit Schritten zum Reproduzieren

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

Siehe Code und Kommentare in app/app.component.ts

Vorgeschlagene Lösung

Fügen Sie API-Optionen wie time.moment , die für einen Benutzer einstellbar sind, damit es möglich ist, moment in den oben zitierten Code zu laden:

moment = options.moment || win.moment;

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

Problemumgehung

Legen Sie moment als window.moment , damit Highcharts es finden kann. ZB wie:

import * as moment from "moment";

window.moment = moment;
Enhancement

Hilfreichster Kommentar

Vielen Dank für diesen Tipp, der folgende Ausschnitt hat bei mir gut funktioniert:

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 {
...

Alle 3 Kommentare

Habe das gleiche Problem, aber deine vorgeschlagene Problemumgehung funktioniert bei mir nicht.
Beim Kompilieren bekomme ich die Fehlermeldung:
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'.

Es wurde wie folgt eingestellt:

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
Der Fehler wirkt sich nicht auf Build-JavaScript aus – es sei denn, Sie config verhindert Builds auf TS-Fehlern. Meine Lösung ist nur eine Problemumgehung, daher können Sie diesen TS-Fehler ignorieren, indem Sie window in any oder eine andere Methode verwenden, um diesen Fehler zu unterdrücken.

(window as any).moment = Moment;

oder Sie könnten die Window Schnittstelle erweitern und die moment Definition hinzufügen, was eine geeignete Lösung für diese Art von Fehlern ist.

Vielen Dank für diesen Tipp, der folgende Ausschnitt hat bei mir gut funktioniert:

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 {
...
War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

vivekk123 picture vivekk123  ·  3Kommentare

KacperMadej picture KacperMadej  ·  3Kommentare

Dunge picture Dunge  ·  3Kommentare

fedegara picture fedegara  ·  3Kommentare

remilandais picture remilandais  ·  3Kommentare