Highcharts: Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ° `moment.js` ΠΊΠ°ΠΊ модуля с использованиСм` import`

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 23 июл. 2018  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: highcharts/highcharts

ОТидаСмоС повСдСниС

Highcharts Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠΌΠ΅Ρ‚ΡŒ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ moment ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ ΠΊΠ°ΠΊ модуля с использованиСм import .

ЀактичСскоС ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅

moment Π½Π΅ сохраняСтся Π½Π° window , поэтому Highcharts тСрпят Π½Π΅ΡƒΠ΄Π°Ρ‡Ρƒ ΠΏΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ доступа ΠΊ moment Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:
https://github.com/highcharts/highcharts/blob/3c8867e8ead548ada66c38f73fce74b2130dac8b/js/parts/Time.js#L370

Живая дСмонстрация с инструкциями ΠΏΠΎ Π²ΠΎΡΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄Π΅Π½ΠΈΡŽ

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

Π‘ΠΌ. Код ΠΈ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π² app/app.component.ts

ΠŸΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ API, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ time.moment ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π±Ρ‹Π»ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ moment Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

moment = options.moment || win.moment;

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

ΠžΠ±Ρ…ΠΎΠ΄Π½ΠΎΠΉ ΠΏΡƒΡ‚ΡŒ

УстановитС moment ΠΊΠ°ΠΊ window.moment , Ρ‡Ρ‚ΠΎΠ±Ρ‹ Highcharts ΠΌΠΎΠ³Π»ΠΈ Π΅Π³ΠΎ Π½Π°ΠΉΡ‚ΠΈ. НапримСр:

import * as moment from "moment";

window.moment = moment;

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ спасибо Π·Π° этот совСт, Ρƒ мСня ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ сработал ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ снипит:

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

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π£ мСня такая ΠΆΠ΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, Π½ΠΎ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠ΅ Π²Π°ΠΌΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для мСня.
Π― ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ сообщСниС ΠΎΠ± ошибкС ΠΏΡ€ΠΈ компиляции:
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'.

Он Π±Ρ‹Π» настроСн ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

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
Ошибка Π½Π΅ повлияСт Π½Π° сборку JavaScript - Ссли Π²Ρ‹ Π½Π΅ настроитС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ сборку с ошибками TS. МоС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ - всСго лишь ΠΎΠ±Ρ…ΠΎΠ΄Π½ΠΎΠΉ ΠΏΡƒΡ‚ΡŒ, поэтому Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ эту ΠΎΡˆΠΈΠ±ΠΊΡƒ TS, ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π² window Π² any ΠΈΠ»ΠΈ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ любой Π΄Ρ€ΡƒΠ³ΠΎΠΉ ΠΌΠ΅Ρ‚ΠΎΠ΄ для подавлСния этой ошибки.

(window as any).moment = Moment;

ΠΈΠ»ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ интСрфСйс Window ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ moment , Ρ‡Ρ‚ΠΎ являСтся ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ для этого Ρ‚ΠΈΠΏΠ° ошибок.

Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ спасибо Π·Π° этот совСт, Ρƒ мСня ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ сработал ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ снипит:

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 {
...
Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ