How to Resolve 'Cannot Find Module' Error in Angular for 'angular2-signaturepad/signature-pad'?

Question

I'm installed 'npm install angular2-signaturepad --save'.

Angular CLI: 10.1.5.

I am getting this error.
How to fix?

I tried to fix this.

npm install angular2-signaturepad@latest

Install and update the 'angular2-signaturepad' library.

Then tried importing SignaturePad,AngularSignaturePadModule.forRoot() and SignaturePadModule.forRoot() into app.module.ts

Answer 1

I did as in this blog. That's right.

1. install

npm install @almothafar/angular-signature-pad --save

2. create a new component

ng generate component signaturePad

3. In the app.module.ts 'declarations' are updated.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { SignaturePadComponent } from './component/shared/signature-pad/signature-pad.component';

@NgModule({
  declarations: [
    AppComponent,
    SignaturePadComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Update signature-pad.component.ts and signature-pad.component.html as follows

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import SignaturePad from 'signature_pad';

@Component({
  selector: 'app-signature-pad',
  templateUrl: './signature-pad.component.html',
  styleUrls: ['./signature-pad.component.scss']
})
export class SignaturePadComponent implements OnInit {
  signatureNeeded!: boolean;
  signaturePad!: SignaturePad;
  @ViewChild('canvas') canvasEl!: ElementRef;
  signatureImg!: string;

  constructor() { }

  ngOnInit(): void {
  }
  ngAfterViewInit() {
    this.signaturePad = new SignaturePad(this.canvasEl.nativeElement);
  }

  startDrawing(event: Event) {
    // works in device not in browser
  }

  moved(event: Event) {
    // works in device not in browser
  }

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

  savePad() {
    const base64Data = this.signaturePad.toDataURL();
    this.signatureImg = base64Data;
    this.signatureNeeded = this.signaturePad.isEmpty();
    if (!this.signatureNeeded) {
      this.signatureNeeded = false;
    }
  }
}

<h4>Please Add your signature here</h4>
<canvas
  #canvas
  (touchstart)="startDrawing($event)"
  (touchmove)="moved($event)"
  width="150"
  height="100"
></canvas>
<p class="error-message" *ngIf="signatureNeeded">Signature is required</p>

<div class="buttons flex justify-between">
  <button (click)="clearPad()">Clear</button>
  <button (click)="savePad()">Submit the signature</button>
</div>

<div *ngIf="signatureNeeded === false">
  <p>Signature in Base64Encoded Format</p>
  <img src="{{ signatureImg }}" alt="" srcset="" />
</div>

5. Use the selector where necessary