Highcharts: `import`๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ `moment.js`๋ฅผ ๋ชจ๋“ˆ๋กœ ๋กœ๋“œ

์— ๋งŒ๋“  2018๋…„ 07์›” 23์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: highcharts/highcharts

์˜ˆ์ƒ๋˜๋Š” ํ–‰๋™

Highcharts๋Š” import ์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“ˆ๋กœ ๋กœ๋“œ๋  ๋•Œ moment ๋ฅผ ์ฐพ์„ ์ˆ˜ ์žˆ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์‹ค์ œ ํ–‰๋™

moment ๋Š” window ์— ์ €์žฅ๋˜์ง€ ์•Š์œผ๋ฏ€๋กœ ๋‹ค์Œ๊ณผ ๊ฐ™์ด moment ์— ์•ก์„ธ์Šคํ•˜๋ ค๊ณ  ํ•  ๋•Œ Highcharts๋Š” ์‹คํŒจํ•ฉ๋‹ˆ๋‹ค.
https://github.com/highcharts/highcharts/blob/3c8867e8ead548ada66c38f73fce74b2130dac8b/js/parts/Time.js#L370

์žฌํ˜„ ๋‹จ๊ณ„๊ฐ€ ํฌํ•จ๋œ ๋ผ์ด๋ธŒ ๋ฐ๋ชจ

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

app/app.component.ts ์ฝ”๋“œ ๋ฐ ์ฃผ์„ ๋ณด๊ธฐ

์ œ์•ˆ๋œ ์†”๋ฃจ์…˜

time.moment ์™€ ๊ฐ™์€ API ์˜ต์…˜์„ ์ถ”๊ฐ€ํ•˜์—ฌ ์‚ฌ์šฉ์ž๊ฐ€ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์œ„์— ์ธ์šฉ๋œ ์ฝ”๋“œ์—์„œ moment ๋ฅผ ๋กœ๋“œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

moment = options.moment || win.moment;

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

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

moment ๋ฅผ window.moment ๋กœ ์„ค์ •ํ•˜๋ฉด Highcharts์—์„œ ์ฐพ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์˜ˆ:

import * as moment from "moment";

window.moment = moment;
Enhancement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด ํŒ์„ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ ์Šค๋‹ˆํ•์ด ์ €์—๊ฒŒ ํšจ๊ณผ์ ์ด์—ˆ์Šต๋‹ˆ๋‹ค.

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
๊ตฌ์„ฑ์ด TS ์˜ค๋ฅ˜์— ๋Œ€ํ•œ ๋นŒ๋“œ๋ฅผ ๋ฐฉ์ง€ํ•˜์ง€ ์•Š๋Š” ํ•œ ์˜ค๋ฅ˜๋Š” ๋นŒ๋“œ JavaScript์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋‚ด ์†”๋ฃจ์…˜์€ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์ด๋ฏ€๋กœ window ๋ฅผ any ๋กœ ์บ์ŠคํŒ…ํ•˜๊ฑฐ๋‚˜ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ ์ด ์˜ค๋ฅ˜๋ฅผ ์–ต์ œํ•˜์—ฌ ์ด TS ์˜ค๋ฅ˜๋ฅผ ๋ฌด์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

(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 ๋“ฑ๊ธ‰