Highcharts devem ser capazes de encontrar moment
quando carregados como um módulo usando import
.
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
https://codesandbox.io/s/7yyz98kv4x
Veja o código e os comentários em app/app.component.ts
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
Defina moment
como window.moment
, para que os Highcharts possam encontrá-lo. Por exemplo, como:
import * as moment from "moment";
window.moment = moment;
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 {
...
Comentários muito úteis
Muito obrigado por esta dica, o seguinte snipit funcionou bem para mim: