TypeError: __WEBPACK_IMPORTED_MODULE_1_signature_pad__ is not a constructor

Ionic Framework ionic-v3
1

I am trying to use angular2-signature-pad library for signature input in my angular project. I have tried using the library as follows:

// in .module.ts file
import {SignaturePadModule} from "angular2-signature-pad";
@NgModule({
  declarations: [
    AddProgressNotePage,
  ],
  imports: [
    IonicPageModule.forChild(AddProgressNotePage),
    SignaturePadModule // Signature Module
  ]
})

// in .ts file   
  import 'signature_pad';

   // in .html file
   <ion-row>
    <signature-pad 
        (onSave)="onSaveHandler($event)" 
        (onClear)="onClearHandler()" 
        [width]="width" 
        [height]="height" 
        [hideFooter]="noFooter" 
        [label]="label">
    </signature-pad>
   </ion-row>

But i got the following error: Error: Uncaught (in promise): TypeError: WEBPACK_IMPORTED_MODULE_1_signature_pad is not a constructor.
enter image description here

I saw another SO question in this link and installed below package

npm install --save @types/signature_pad

But the same error happened again. Which part am i missing to work signature pad perfectly?

2

Hi,

I am using another module called ‘angular2-signaturepad’ to make that work, this is working very good, here is my code:

signature.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SignaturePage } from './signature';
import { SignaturePadModule } from 'angular2-signaturepad';

@NgModule({
  declarations: [
    AssinarPage,
  ],
  imports: [
    IonicPageModule.forChild(AssinarPage),
    SignaturePadModule
  ],
})
export class SignaturePageModule {}

signature.ts

export class SignaturePage {
  @ViewChild(SignaturePad) private signaturePad : SignaturePad;
   signaturePadOptions = {
      minWidth: 0.4,
      maxWidth: 1.5,
      dotSize: 1.5,
      penColor: "DarkBlue",
      /* INVERSE BECAUSE IT IS SHOW ONLY IN LANDSCAPE */
      canvasWidth: platform.height(),
      canvasHeight: platform.width() + 30
    }

    drawComplete () {
    if (this.signaturePad.isEmpty()) {
      return this.alertService.showError('Sign first.');
    }

    this.signatureImage = this.signaturePad.toDataURL();
  }

  drawClear () {
    this.signaturePad.clear();
  }

signature.html

<signature-pad [options]="signaturePadOptions" id="signatureCanvas" drag-content="false" ></signature-pad>
1 Like
3

Can anyone find me out, what’s wrong with angular2-signature-pad library?

4

This is for angular2 and works good with angular cli, Ionic uses a different webpack approach and this lib does not support that.

1 Like
5

I am using the module you have suggested. But my signature does not follow the cursor. I have seen the library live demo. It is working perfectly in the demo. Do i have to change any configuration for my screen so that while signing the signature will follow the cursor.