typescript - "Canvas ei ole konstruktori" - Virhe - FabricJS:n käyttö Angular 6:n kanssa

Työskentelen projektin parissa, joka päivitettiin äskettäin Angular 5:stä 6:een. Lisään uutta ominaisuutta, joka vaatii minun piirtämään kuvia datasta, joten olen yrittänyt käyttää Canvas- ja SVG DOM -objekteja tämän tekemiseen. FabricJS:llä on paljon tarvitsemiani ominaisuuksia.

Yritin lisätä sen projektiin viime yönä. Latasin verkkosivustolta FabricJS:n täydet DEV/MIN-versiot, v2.3.3. Sitten tein node_modules-kansiooni "fabric"-kansion ja laitoin *.js-tiedostot sinne. Muokkasin angular.json-tiedostoni sisällyttääkseni tämän:

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

Sitten luodaan typings.d.ts -tiedosto näin:

declare const fabric: any;

Lopuksi, moduulissani tuon sen näin:

import * as fabric from 'fabric';

Laitoin sivulle canvas-elementin ja nimesin sen 'C'.

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

Ja sitten yritä käyttää kangaskoodia:

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

Kun kangaskoodi suoritetaan, se antaa virheen:

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

En ole oikein varma, mitä tämä tarkoittaa. Käytin jonkin aikaa etsiäkseni vastauksia enkä löytänyt tästä juuri mitään, vaikka löysinkin tämän sivun:

Fabric.js Typescriptin ja Webpackin kanssa: Canvas ei ole konstruktori

Tämä kuulostaa paljon minun ongelmaltani, mutta olen edelleen melko uusi Angularissa enkä aina ymmärrä, mitä tapahtuu. Tuossa viestissä he keskustelevat tekemisestä muutoksia webpack.mix.js-tiedostoon. Minulla ei kuitenkaan ole sellaista tiedostoa, ja tiedän että Angular 6:lla on uusi versio WebPackista, ehkä se rikkoo asioita?

Mitä ajatuksia tästä korjaamisesta? Mistä edes aloittaa?

Vastaus #1

Joten ensimmäinen asia, joka pitäisi tarkistaa, on import-lausunto.

Kangas tuodaan sisään nimellä

import { fabric } from 'fabric';

Mitä tulee webpackin asetuksiin ja fabriciin yleisesti, katso tästä:

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

Tässä löydät konfiguraatioesimerkin npm-moduulin suoraan käyttämiseen tarvittaessa, tai joka tapauksessa se auttaa webpackia välttämään Node-riippuvuuksien bundlaamista.

Vastaus #2

Käytän kangasta globaalina vienninä seuraavien vaiheiden mukaisesti:

  • suorita npm install fabric
  • Lisää skripteihin: ["node_modules/fabric/dist/fabric.js"]
  • Lisää se tiedostoon typings.d.ts: declare const fabric: any;
  • ÄLÄ TUO SITÄ, käytä sitä vain: const canvas=new fabric.Canvas('c');
  • voitto

Mielestäni viimeinen osa on se, mikä sinulta puuttuu: jos lisäät kirjaston skripteihin Angularissa, sinun ei sitten tarvitse tuoda sitä erikseen, muuten sinulla olisi kaksi eri kopiota kirjastosta. Jos haluat käyttää sitä moduulina, sinun ei pitäisi lisätä sitä skriptitaulukkoon. Lisätietoja: https://github.com/angular/angular-cli/wiki/stories-global-scripts#using-global-libraries-inside-your-app

Toivon, että tästä on apua.

Aiheeseen liittyviä artikkeleita