تايبسكريبت - خطأ "Canvas ليس منشئًا" - استخدام FabricJS مع Angular 6

أنا أعمل على مشروع تم تحديثه مؤخرًا من Angular 5 إلى 6. أنا أقوم بإضافة ميزة جديدة تتطلب مني رسم الصور من البيانات، لذا كنت أحاول استخدام كائنات Canvas وSVG DOM للقيام بذلك. تتميز FabricJS بالعديد من المميزات التي أحتاجها.

لقد حاولت إضافته إلى المشروع الليلة الماضية. قمت بتحميل النسخ الكاملة DEV/MIN من FabricJS من الموقع، الإصدار 2.3.3. ثم قمت بإنشاء مجلد "fabric" في مجلد node_modules الخاص بي ووضع ملفات *.js هناك. قمت بتحرير ملف angular.json الخاص بي لتضمين هذا:

    "scripts": [
      "node_modules/fabric/fabric.js"
    ]

ثم أنشأ ملف typings.d.ts بهذا:

declare const fabric: any;

أخيرًا، في وحدتي، أستوردها هكذا:

import * as fabric from 'fabric';

وضعت عنصر قماش على الصفحة وسميته "C"

<canvas id="c"></canvas>

ثم حاول استخدام رمز القماش:

        // create a wrapper around native canvas element (with id="c")
        const canvas = new fabric.Canvas('c');

عند تنفيذ كود القماش، يظهر خطأ:

***ERROR TypeError: fabric__WEBPACK_IMPORTED_MODULE_2__.Canvas is not a constructor
at SafeSubscriber._next***

لست متأكدًا حقًا مما يعنيه هذا. قضيت بعض الوقت أبحث عن إجابات ولم أجد الكثير حول هذا، على الرغم من أنني وجدت هذه الصفحة:

Fabric.js مع Typescript و Webpack: Canvas ليس مُنشئًا

هذا يبدو كثيراً مثل مشكلتي، لكنني لا زلت جديدًا نسبيًا على Angular ولا أفهم دائمًا ما يحدث. في ذلك المنشور، يناقشون إجراء تغييرات على ملف webpack.mix.js. ومع ذلك، ليس لدي مثل هذا الملف، وأعلم أن Angular 6 لديها نسخة جديدة من WebPack، ربما هذا هو ما يسبب المشكلة؟

هل لديك أي أفكار حول كيفية إصلاح هذا؟ من أين نبدأ حتى؟

الإجابة رقم 1

لذلك أول شيء يجب التحقق منه هو جملة الاستيراد.

يتم استيراد القماش كـ

استورد { fabric } من 'fabric';

فيما يخص إعدادات webpack و fabric بشكل عام، يرجى إلقاء نظرة هنا:

https://github.com/fabricjs/fabricjs-webpack

هنا ستجد مثالاً على الإعدادات لاستخدام وحدة npm مباشرة إذا لزم الأمر، أو على أي حال سيساعد webpack على تجنب محاولة تجميع تبعيات node.

الإجابة رقم 2

أنا أستخدم Fabric كمصدر تصدير عام باتباع هذه الخطوات:

• شغّل npm install fabric
• أضف إلى السكريبتات: ["node_modules/fabric/dist/fabric.js"]
• أضفه إلى typings.d.ts: declare const fabric: any;
• لا تستورده، فقط استخدمه: const canvas=new fabric.Canvas('c');
• ربح

أعتقد أن الجزء الأخير هو ما تنقصك، إذا قمت بإضافة مكتبة إلى السكربتات في Angular فلن تضطر لاستيرادها، وإلا سيكون لديك نسختان مختلفتان من المكتبة. إذا كنت تريد استخدامها كوحدة، فلا يجب عليك إضافتها إلى مصفوفة السكربتات. لمزيد من المعلومات: https://github.com/angular/angular-cli/wiki/stories-global-scripts#using-global-libraries-inside-your-app

آمل أن هذا يساعد.