Signature_pad: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ não é um construtor

Criado em 11 abr. 2018 · 8Comentários · Fonte: szimek/signature_pad

Eu importei o módulo angular2-signature-pad com meu aplicativo angular cli 4.0. Eu segui as instruções de https://github.com/dimpu/angular2-signature-pad com importação para um novo módulo. (Não para o módulo do aplicativo). Com isso, a tela do bloco de assinatura está renderizando perfeitamente. Infelizmente com o seguinte erro e não funciona como esperado.

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)

Há algo de errado com a inicialização do SignaturePad?

O erro está ocorrendo com esta segunda linha no componente do bloco de assinatura

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"
No Google Chrome com CLI angular

Fonte

erangaapp

Comentários muito úteis

Eu não mantenho a versão Angular desta biblioteca.

Você pode verificar o que SignaturePad realmente está lá - pode ser que seja um objeto com a propriedade default , que é o construtor real, então talvez alterá-lo para this._signaturePad = new SignaturePad.default(this._canvas); possa corrigi-lo , mas é apenas um palpite.

Você pode verificar qual versão do TypeScript você está usando? Eu verifiquei esta biblioteca (não a Angular) com o TS 2.7+ e funciona bem.

Há também uma versão beta do signature_pad que é escrito em TS e deve funcionar com TS 2.7+

szimek em 11 abr. 2018

👍4 🎉1

Todos 8 comentários

Eu não mantenho a versão Angular desta biblioteca.

Você pode verificar qual versão do TypeScript você está usando? Eu verifiquei esta biblioteca (não a Angular) com o TS 2.7+ e funciona bem.

Há também uma versão beta do signature_pad que é escrito em TS e deve funcionar com TS 2.7+

szimek em 11 abr. 2018

👍4 🎉1

Sim, funciona com this._signaturePad = new SignaturePad.default(this._canvas);
Muito obrigado szimek

erangaapp em 11 abr. 2018

@erangaapp @szimek como vocês fazem new SignaturePad ? Você importa alguma coisa? Também estou usando o https://github.com/dimpu/angular2-signature-pad

pedrofg em 27 abr. 2018

Você pode importá-lo do signature_pad

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

erangaapp em 27 abr. 2018

@erangaapp Obrigado, entendi. Outra pergunta, você alterou a linha para this._signaturePad = new SignaturePad.default(this._canvas); no node_modules do seu projeto? Dentro do próprio código lib? Ou você pode fazer isso no código do seu projeto?

pedrofg em 27 abr. 2018

Eu contornei através do abaixo

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

glaidler em 12 abr. 2019

👍1

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

Esta foi a única coisa que funcionou para mim

jacobjackson888 em 13 jun. 2019

Caso isso seja útil para alguém, foi isso que fiz para que o bloco de assinaturas funcionasse com o Angular 8:

$ npm install --save signature_pad

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

}

Obrigado por montar esta biblioteca, @szimek!