Highcharts: Cargando `moment.js` como un módulo, usando` import`

Creado en 23 jul. 2018  ·  3Comentarios  ·  Fuente: highcharts/highcharts

Comportamiento esperado

Highcharts debería poder encontrar moment cuando se carga como un módulo usando import .

Comportamiento real

moment no se guarda en window , por lo que Highcharts fallan al intentar acceder a moment como:
https://github.com/highcharts/highcharts/blob/3c8867e8ead548ada66c38f73fce74b2130dac8b/js/parts/Time.js#L370

Demostración en vivo con pasos para reproducir

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

Ver código y comentarios en app/app.component.ts

Solución sugerida

Agregue opciones de API, como time.moment que serán configurables para un usuario, por lo que será posible cargar moment en el código citado anteriormente como:

moment = options.moment || win.moment;

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

Solución alterna

Establezca moment como window.moment , para que Highcharts pueda encontrarlo. Por ejemplo, como:

import * as moment from "moment";

window.moment = moment;
Enhancement

Comentario más útil

Muchas gracias por este consejo, el siguiente snipit funcionó bien para mí:

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

Todos 3 comentarios

Tengo el mismo problema, pero la solución alternativa sugerida no me funciona.
Recibo el mensaje de error en la compilación:
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'.

Se configuró de la siguiente manera:

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
El error no afectará la compilación de JavaScript, a menos que la configuración evite las compilaciones en los errores de TS. Mi solución es solo una solución alternativa, por lo que puede ignorar este error de TS al convertir window a any o usar cualquier otro método para suprimir este error.

(window as any).moment = Moment;

o puede extender la interfaz Window y agregar la definición moment , que es una solución adecuada para este tipo de errores.

Muchas gracias por este consejo, el siguiente snipit funcionó bien para mí:

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 {
...
¿Fue útil esta página
0 / 5 - 0 calificaciones