Signature_pad: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ no es un constructor

Creado en 11 abr. 2018 · 8Comentarios · Fuente: szimek/signature_pad

Importé el módulo angular2-signature-pad con mi aplicación angular cli 4.0. He seguido las instrucciones de https://github.com/dimpu/angular2-signature-pad con la importación a un nuevo módulo (no al módulo de la aplicación). Con esto, el lienzo del bloc de firmas se representa perfectamente. Desafortunadamente, con el siguiente error y no funciona como se esperaba.

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)

¿Algo salió mal con la inicialización del SignaturePad?

Aparece un error con esta segunda línea en el componente del panel de firmas

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

"angular/cli": "1.6.8"
"angular2-firma-pad": "^1.0.2"
"signature_pad": "^2.3.2"
En Google Chrome con CLI angular

Fuente

erangaapp

Comentario más útil

No mantengo la versión Angular de esta biblioteca.

Puede verificar qué SignaturePad realmente está allí; podría ser que sea un objeto con la propiedad default , que es el constructor real, por lo que tal vez cambiarlo a this._signaturePad = new SignaturePad.default(this._canvas); podría arreglarlo , pero es solo una suposición.

¿Puedes comprobar qué versión de TypeScript estás usando? Revisé esta biblioteca (no la Angular) con TS 2.7+ y funciona bien.

También hay una versión beta de signature_pad que está escrita en TS y debería funcionar con TS 2.7+

szimek en 11 abr. 2018

👍4 🎉1

Todos 8 comentarios

No mantengo la versión Angular de esta biblioteca.

¿Puedes comprobar qué versión de TypeScript estás usando? Revisé esta biblioteca (no la Angular) con TS 2.7+ y funciona bien.

También hay una versión beta de signature_pad que está escrita en TS y debería funcionar con TS 2.7+

szimek en 11 abr. 2018

👍4 🎉1

Sí, funciona con this._signaturePad = new SignaturePad.default(this._canvas);
muchas gracias szimek

erangaapp en 11 abr. 2018

@erangaapp @szimek ¿cómo hacen new SignaturePad ? ¿Importas algo? También estoy usando https://github.com/dimpu/angular2-signature-pad

pedrofg en 27 abr. 2018

Puedes importarlo desde el signature_pad

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

erangaapp en 27 abr. 2018

@erangaapp Gracias, lo tengo. Otra pregunta, ¿cambió la línea a this._signaturePad = new SignaturePad.default(this._canvas); en el node_modules de su proyecto? ¿Dentro del propio código lib? ¿O puedes hacerlo en el código de tu proyecto?

pedrofg en 27 abr. 2018

Lo obtuve a través de la siguiente

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

glaidler en 12 abr. 2019

👍1

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

esto fue lo unico que me funciono

jacobjackson888 en 13 jun. 2019

En caso de que esto sea útil para alguien, esto es lo que he hecho para que el pad de firma funcione con Angular 8:

$ npm install --save signature_pad

genial-componente.html:

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

genial-componente.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);
      }

}

¡Gracias por armar esta biblioteca, @szimek!