Highcharts: Memuat `moment.js` sebagai modul, menggunakan `import`

Dibuat pada 23 Jul 2018 · 3Komentar · Sumber: highcharts/highcharts

Perilaku yang diharapkan

Highcharts harus dapat menemukan moment saat dimuat sebagai modul menggunakan import .

Perilaku sebenarnya

moment tidak disimpan di window , jadi Highcharts gagal ketika mencoba mengakses moment seperti:
https://github.com/highcharts/highcharts/blob/3c8867e8ead548ada66c38f73fce74b2130dac8b/js/parts/Time.js#L370

Demo langsung dengan langkah-langkah untuk mereproduksi

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

Lihat kode dan komentar di app/app.component.ts

Solusi yang disarankan

Tambahkan opsi API, seperti time.moment yang dapat disetel untuk pengguna, sehingga dimungkinkan untuk memuat moment dalam kode yang dikutip di atas seperti:

moment = options.moment || win.moment;

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

Solusi

Tetapkan moment sebagai window.moment , sehingga Highcharts akan dapat menemukannya. Misalnya seperti:

import * as moment from "moment";

window.moment = moment;

Enhancement

Sumber

KacperMadej

👍10

Komentar yang paling membantu

Terima kasih banyak untuk tip ini, snipit berikut bekerja dengan baik untuk saya:

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 pada 3 Jul 2019

👍3

Semua 3 komentar

Punya masalah yang sama, tetapi solusi yang Anda sarankan tidak berhasil untuk saya.
Saya mendapatkan pesan kesalahan saat kompilasi:
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'.

Itu diatur dengan cara berikut:

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 pada 29 Jun 2019

@mfechner
Kesalahan tidak akan memengaruhi JavaScript build - kecuali jika Anda mengonfigurasi mencegah kesalahan build pada TS. Solusi saya hanyalah solusi, jadi Anda dapat mengabaikan kesalahan TS ini dengan mentransmisikan window ke any atau menggunakan metode lain untuk menekan kesalahan ini.

(window as any).moment = Moment;

atau Anda dapat memperluas antarmuka Window dan menambahkan definisi moment , yang merupakan solusi yang tepat untuk jenis kesalahan ini.

KacperMadej pada 30 Jun 2019

Terima kasih banyak untuk tip ini, snipit berikut bekerja dengan baik untuk saya:

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 pada 3 Jul 2019

👍3

Apakah halaman ini membantu?

0 / 5 - 0 peringkat