Whenever I run my tests they throw me an error that SignaturePad (a npm library) apparently does not have a constructor...
● SignaturePadComponent › should create
TypeError: signature_pad_1.default is not a constructor
31 | ngAfterViewInit() {
32 | if (this.canvasEl.nativeElement) {
> 33 | this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
| ^
34 | }
35 | }
36 |
but if I look into the module it actually has a constructor and is defined as a class:
export default class SignaturePad extends SignatureEventTarget {
.
.
.
constructor(canvas: HTMLCanvasElement, options?: Options);
clear(): void;
toDataURL(type?: string, encoderOptions?: number): string;
.
.
.
}
The code I'm using right now is this one:
import SignaturePad from 'signature_pad';
export class SignaturePadComponent implements AfterViewInit {
signaturePad: SignaturePad;
@ViewChild('canvas') canvasEl: ElementRef;
ngAfterViewInit() {
if (this.canvasEl.nativeElement) {
this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
}
}
The tests always fail at ngAfterViewInit since this.signaturePad = new SignaturePad is not a constructor???!
A colleague suggested to write it like this (using SignaturePad.default)
import * as SignaturePad from 'signature_pad';
export class SignaturePadComponent implements AfterViewInit {
signaturePad: SignaturePad.default;
@ViewChild('canvas') canvasEl: ElementRef;
ngAfterViewInit() {
if (this.canvasEl.nativeElement) {
this.signaturePad = new SignaturePad.default(this.canvasEl.nativeElement);
}
}
but that does not work as well. It seems to be some kind of an import problem... I also tried
import { SignaturePad } from 'signature_pad/dist/signature_pad';
and
import SignaturePad from 'signature_pad/dist/signature_pad';
but nothing works... What am I supposed to do know? I'm working with Angular if that matters at all.
HTMLCanvasElementand you are providingnativeElement. Check if it accepts that - Kshitij