Highcharts: تحميل "moment.js" كوحدة نمطية ، باستخدام "import"

تم إنشاؤها على ٢٣ يوليو ٢٠١٨  ·  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;
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();

تضمين التغريدة
لن يؤثر الخطأ في إنشاء 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 التقييمات