Signature_pad: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ n'est pas un constructeur

Créé le 11 avr. 2018 · 8Commentaires · Source: szimek/signature_pad

J'ai importé le module angular2-signature-pad avec mon application angular cli 4.0. J'ai suivi les instructions de https://github.com/dimpu/angular2-signature-pad avec l'importation dans un nouveau module. (Pas dans le module d'application). Avec cela, la toile du bloc-notes est parfaitement rendue. Malheureusement, avec l'erreur suivante et cela ne fonctionne pas comme prévu.

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)

Il y a un problème avec l'initialisation du SignaturePad ?

Une erreur se produit avec cette deuxième ligne sur signature-pad-component

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

"angular/cli": "1.6.8"
"angular2-signature-pad": "^1.0.2"
"signature_pad": "^2.3.2"
Sur Google Chrome avec CLI angulaire

Source

erangaapp

Commentaire le plus utile

Je ne maintiens pas la version angulaire de cette bibliothèque.

Vous pouvez vérifier ce que SignaturePad est réellement là - il se peut que ce soit un objet avec la propriété default , qui est le constructeur réel, donc peut-être que le changer en this._signaturePad = new SignaturePad.default(this._canvas); pourrait le réparer , mais ce n'est qu'une supposition.

Pouvez-vous vérifier quelle version de TypeScript vous utilisez ? J'ai vérifié cette bibliothèque (pas celle d'Angular) avec TS 2.7+ et cela fonctionne bien.

Il existe également une version bêta de signature_pad qui est écrite en TS et devrait fonctionner avec TS 2.7+

szimek le 11 avr. 2018

👍4 🎉1

Tous les 8 commentaires

Je ne maintiens pas la version angulaire de cette bibliothèque.

Pouvez-vous vérifier quelle version de TypeScript vous utilisez ? J'ai vérifié cette bibliothèque (pas celle d'Angular) avec TS 2.7+ et cela fonctionne bien.

Il existe également une version bêta de signature_pad qui est écrite en TS et devrait fonctionner avec TS 2.7+

szimek le 11 avr. 2018

👍4 🎉1

Oui ça marche avec this._signaturePad = new SignaturePad.default(this._canvas);
Merci beaucoup szimek

erangaapp le 11 avr. 2018

@erangaapp @szimek comment allez-vous les gars new SignaturePad ? Importez-vous quelque chose ? J'utilise également le https://github.com/dimpu/angular2-signature-pad

pedrofg le 27 avr. 2018

Vous pouvez l'importer depuis le signature_pad

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

erangaapp le 27 avr. 2018

@erangaapp Merci j'ai compris. Une autre question, avez-vous changé la ligne en this._signaturePad = new SignaturePad.default(this._canvas); dans le node_modules de votre projet ? À l'intérieur du code lib lui-même ? Ou vous pouvez le faire dans votre code de projet ?

pedrofg le 27 avr. 2018

Je l'ai contourné via le ci-dessous

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

glaidler le 12 avr. 2019

👍1

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

C'était la seule chose qui fonctionnait pour moi

jacobjackson888 le 13 juin 2019

Au cas où cela serait utile à quelqu'un, voici ce que j'ai fait pour que le pavé de signature fonctionne avec Angular 8 :

$npm install --save signature_pad

cool-composant.html :

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

cool-composant.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);
      }

}

Merci d'avoir créé cette bibliothèque, @szimek !