Signature_pad: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ is not a constructor

Created on 11 Apr 2018 · 8Comments · Source: szimek/signature_pad

I have import the angular2-signature-pad module with my angular cli 4.0 app. I have follow the instructions of https://github.com/dimpu/angular2-signature-pad with importing to a new module.(Not to the app module). With this the signature-pad canvas is rendering perfectly. Unfortunately with the following error and It doesn't working as expected.

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)

There is a something went wrong with the initialization of the SignaturePad ?

Error is coming through with this second line on 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"
On Google Chrome with angular CLI

Source

erangaapp

Most helpful comment

I do not maintain Angular version of this library.

You can check what SignaturePad actually is there - it might be that's it an object with default property, which is the actual constructor, so maybe changing it to this._signaturePad = new SignaturePad.default(this._canvas); could fix it, but it's just a guess.

Can you check which version of TypeScript you're using? I checked this library (not the Angular one) with TS 2.7+ and it works fine.

There's also a beta release of signature_pad that is written in TS and should work with TS 2.7+

szimek on 11 Apr 2018

👍4 🎉1

All 8 comments

I do not maintain Angular version of this library.

Can you check which version of TypeScript you're using? I checked this library (not the Angular one) with TS 2.7+ and it works fine.

There's also a beta release of signature_pad that is written in TS and should work with TS 2.7+

szimek on 11 Apr 2018

👍4 🎉1

Yes it's works with this._signaturePad = new SignaturePad.default(this._canvas);
Thanks lot szimek

erangaapp on 11 Apr 2018

@erangaapp @szimek how do you guys do new SignaturePad? Do you import anything? I am also using the https://github.com/dimpu/angular2-signature-pad

pedrofg on 27 Apr 2018

You can import it from the signature_pad

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

erangaapp on 27 Apr 2018

@erangaapp Thanks I got it. Another question, did you change the line to this._signaturePad = new SignaturePad.default(this._canvas); in the node_modules of your project? Inside the lib code itself? Or you can do it in your project code?

pedrofg on 27 Apr 2018

I got round it via the below

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

glaidler on 12 Apr 2019

👍1

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

This was the only thing that worked for me

jacobjackson888 on 13 Jun 2019

In case this is helpful to anyone, this is what i've done to get signature pad working with 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);
      }

}

Thanks for putting this library together, @szimek!