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;
๊ฐ์ ๋ฌธ์ ๊ฐ ์์ง๋ง ์ ์ํ ํด๊ฒฐ ๋ฐฉ๋ฒ์ด ์๋ํ์ง ์์ต๋๋ค.
์ปดํ์ผ ์ ์ค๋ฅ ๋ฉ์์ง๊ฐ ๋ํ๋ฉ๋๋ค.
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 {
...
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด ํ์ ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค. ๋ค์ ์ค๋ํ์ด ์ ์๊ฒ ํจ๊ณผ์ ์ด์์ต๋๋ค.