Signature_pad: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ ist kein Konstruktor

Erstellt am 11. Apr. 2018  ·  8Kommentare  ·  Quelle: szimek/signature_pad

Ich habe das Angular2-Signature-Pad-Modul mit meiner Angular CLI 4.0-App importiert. Ich habe die Anweisungen von https://github.com/dimpu/angular2-signature-pad beim Importieren in ein neues Modul befolgt (nicht in das App-Modul). Damit wird die Leinwand des Unterschriftenpads perfekt gerendert. Leider mit folgendem Fehler und es funktioniert nicht wie erwartet.

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ is not a constructor
at SignaturePadComponent.ngAfterViewInit (signature-pad.component.js:60)
at callProviderLifecycles (core.js:12702)
at callElementProvidersLifecycles (core.js:12669)
at callLifecycleHooksChildrenFirst (core.js:12652)
at checkAndUpdateView (core.js:13807)
at callViewAction (core.js:14149)
at execEmbeddedViewsAction (core.js:14107)
at checkAndUpdateView (core.js:13799)
at callViewAction (core.js:14149)
at execComponentViewsAction (core.js:14081)

Bei der Initialisierung des SignaturePad ist etwas schief gelaufen ?

Bei dieser zweiten Zeile auf Signatur-Pad-Komponente tritt ein Fehler auf

SignaturePadComponent.prototype.ngAfterViewInit = function () {
        this._canvas = this._el.nativeElement.querySelector("canvas");
        this._signaturePad = new SignaturePad(this._canvas);
    }; 

"Winkel/Kli": "1.6.8"
"angular2-signature-pad": "^1.0.2"
"signature_pad": "^2.3.2"
Auf Google Chrome mit eckiger CLI

Hilfreichster Kommentar

Ich pflege keine Angular-Version dieser Bibliothek.

Sie können überprüfen, was SignaturePad tatsächlich dort ist - es könnte sein, dass es sich um ein Objekt mit der Eigenschaft default handelt, die der eigentliche Konstruktor ist, also könnte es vielleicht durch Ändern in this._signaturePad = new SignaturePad.default(this._canvas); behoben werden , aber es ist nur eine Vermutung.

Können Sie überprüfen, welche Version von TypeScript Sie verwenden? Ich habe diese Bibliothek (nicht die von Angular) mit TS 2.7+ überprüft und sie funktioniert einwandfrei.

Es gibt auch eine Betaversion von signature_pad, die in TS geschrieben ist und mit TS 2.7+ funktionieren sollte

Alle 8 Kommentare

Ich pflege keine Angular-Version dieser Bibliothek.

Sie können überprüfen, was SignaturePad tatsächlich dort ist - es könnte sein, dass es sich um ein Objekt mit der Eigenschaft default handelt, die der eigentliche Konstruktor ist, also könnte es vielleicht durch Ändern in this._signaturePad = new SignaturePad.default(this._canvas); behoben werden , aber es ist nur eine Vermutung.

Können Sie überprüfen, welche Version von TypeScript Sie verwenden? Ich habe diese Bibliothek (nicht die von Angular) mit TS 2.7+ überprüft und sie funktioniert einwandfrei.

Es gibt auch eine Betaversion von signature_pad, die in TS geschrieben ist und mit TS 2.7+ funktionieren sollte

Ja, es funktioniert mit this._signaturePad = new SignaturePad.default(this._canvas);
Vielen Dank szimek

@erangaapp @szimek wie macht ihr new SignaturePad ? Importieren Sie etwas? Ich verwende auch das https://github.com/dimpu/angular2-signature-pad

Sie können es aus dem signature_pad importieren

npm install --save signature_pad
import * as SignaturePad from 'signature_pad';

@erangaapp Danke, ich habe es verstanden. Eine andere Frage, haben Sie die Zeile in $ node_modules Ihres Projekts in this._signaturePad = new SignaturePad.default(this._canvas); geändert? Innerhalb des Lib-Codes selbst? Oder können Sie es in Ihrem Projektcode tun?

Ich habe es über das Folgende umgangen

window.SignaturePad = require('signature_pad').default

this._signaturePad = new SignaturePad.default(this._canvas);

Dies war das einzige, was für mich funktionierte

Falls dies für jemanden hilfreich ist, habe ich Folgendes getan, um das Signaturpad mit Angular 8 zum Laufen zu bringen:

$ npm install --save signature_pad

coole-komponente.html:

<div class="wrapper">
  <canvas id="signature-pad" class="signature-pad" width=400 height=200 style="border: 2px solid blue"></canvas>
</div>

cool-component.ts:

import { Component, OnInit, ElementRef  } from '@angular/core';
import * as SignaturePad from 'signature_pad'
...
export class CoolComponent implements OnInit {
    _canvas
    _signaturePad
    constructor(private el: ElementRef) { }

    ngOnInit() {

    }

       ngAfterViewInit(){
         this._canvas = this.el.nativeElement.querySelector("canvas");
         this._signaturePad = new SignaturePad.default(this._canvas);
      }

}

Danke, dass du diese Bibliothek zusammengestellt hast, @szimek!

War diese Seite hilfreich?
0 / 5 - 0 Bewertungen

Verwandte Themen

davidosuna1987 picture davidosuna1987  ·  11Kommentare

hostcia picture hostcia  ·  6Kommentare

chitgoks picture chitgoks  ·  5Kommentare

Emmark picture Emmark  ·  4Kommentare

lowe493 picture lowe493  ·  5Kommentare