Highcharts: Chargement de `moment.js` en tant que module, en utilisant `import`

Créé le 23 juil. 2018 · 3Commentaires · Source: highcharts/highcharts

Comportement attendu

Highcharts devrait pouvoir trouver moment lorsqu'il est chargé en tant que module en utilisant import .

Comportement réel

moment n'est pas enregistré sur window , donc Highcharts échoue en essayant d'accéder à moment comme :
https://github.com/highcharts/highcharts/blob/3c8867e8ead548ada66c38f73fce74b2130dac8b/js/parts/Time.js#L370

Démo en direct avec étapes à reproduire

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

Voir le code et les commentaires dans app/app.component.ts

Solution suggérée

Ajoutez des options d'API, comme time.moment qui seront paramétrables pour un utilisateur, il sera donc possible de charger moment dans le code cité ci-dessus comme :

moment = options.moment || win.moment;

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

solution de contournement

Définissez moment comme window.moment , afin que Highcharts puisse le trouver. Par exemple, comme :

import * as moment from "moment";

window.moment = moment;

Enhancement

Source

KacperMadej

👍10

Commentaire le plus utile

Merci beaucoup pour cette astuce, le snipit suivant a bien fonctionné pour moi:

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

mfechner le 3 juil. 2019

👍3

Tous les 3 commentaires

Vous avez le même problème, mais votre solution de contournement suggérée ne fonctionne pas pour moi.
J'ai le message d'erreur à la compilation :
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'.

Il a été défini de la manière suivante :

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 le 29 juin 2019

@mfechner
L'erreur n'affectera pas la compilation JavaScript - à moins que la configuration n'empêche les compilations sur les erreurs TS. Ma solution n'est qu'une solution de contournement, vous pouvez donc ignorer cette erreur TS en convertissant le window en any ou en utilisant toute autre méthode pour supprimer cette erreur.

(window as any).moment = Moment;

ou vous pouvez étendre l'interface Window et ajouter la définition moment , qui est une solution appropriée pour ce type d'erreurs.

KacperMadej le 30 juin 2019

Merci beaucoup pour cette astuce, le snipit suivant a bien fonctionné pour moi:

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

mfechner le 3 juil. 2019

👍3

Cette page vous a été utile?

0 / 5 - 0 notes