Highcharts: Carregando `moment.js` como um módulo, usando` import`

Criado em 23 jul. 2018  ·  3Comentários  ·  Fonte: highcharts/highcharts

Comportamento esperado

Highcharts devem ser capazes de encontrar moment quando carregados como um módulo usando import .

Comportamento real

moment não é salvo em window , então Highcharts falham ao tentar acessar moment como:
https://github.com/highcharts/highcharts/blob/3c8867e8ead548ada66c38f73fce74b2130dac8b/js/parts/Time.js#L370

Demonstração ao vivo com etapas para reproduzir

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

Veja o código e os comentários em app/app.component.ts

Solução sugerida

Adicione opções de API, como time.moment que serão configuráveis ​​para um usuário, para que seja possível carregar moment no código citado acima como:

moment = options.moment || win.moment;

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

Gambiarra

Defina moment como window.moment , para que os Highcharts possam encontrá-lo. Por exemplo, como:

import * as moment from "moment";

window.moment = moment;
Enhancement

Comentários muito úteis

Muito obrigado por esta dica, o seguinte snipit funcionou bem para mim:

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 comentários

Tenho o mesmo problema, mas sua solução sugerida não funciona para mim.
Recebo a mensagem de erro na compilação:
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'.

Foi definido da seguinte forma:

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
O erro não afetará a construção de JavaScript - a menos que você config impeça as compilações em erros de TS. Minha solução é apenas uma solução alternativa, portanto, você pode ignorar esse erro de TS convertendo window em any ou usando qualquer outro método para suprimir esse erro.

(window as any).moment = Moment;

ou você pode estender a interface Window e adicionar a definição moment , que é uma solução adequada para esse tipo de erro.

Muito obrigado por esta dica, o seguinte snipit funcionou bem para mim:

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 {
...
Esta página foi útil?
0 / 5 - 0 avaliações