يجب أن تتمكن 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;
لديك نفس المشكلة ، ولكن الحل البديل الخاص بك لا يعمل بالنسبة لي.
تلقيت رسالة الخطأ عند التحويل البرمجي:
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 {
...
التعليق الأكثر فائدة
شكرًا جزيلاً على هذه النصيحة ، لقد نجح القصاصة التالية بشكل جيد بالنسبة لي: