Angular6安装@ng-plus/signature-pad后提示模块找不到如何解决

现有报错排查步骤 #

• 首先检查依赖安装完整性：打开项目根目录的node_modules/@ng-plus文件夹，确认是否存在signature-pad子目录。如果不存在，先删除根目录的package-lock.json文件和node_modules文件夹，再重新执行npm install @ng-plus/signature-pad --save命令完成安装。
• 检查tsconfig.json配置：查看compilerOptions.paths字段，确认没有设置@ng-plus相关的路径别名，避免模块解析路径被覆盖导致找不到依赖。
• 确认版本兼容性：@ng-plus/signature-pad最新版本仅适配Angular 12及以上版本，和Angular 6本身不兼容，这是该报错的核心诱因，强制安装高版本会引发更多运行时异常，建议直接更换适配低版本Angular的签名组件。

Angular 6适配签名板组件使用方案 #

推荐使用angular2-signaturepad，2.8.0版本完美适配Angular 6，使用步骤如下：

1. 安装指定版本依赖

npm install angular2-signaturepad@2.8.0 --save

2. 在根模块中导入组件模块
   编辑app.module.ts文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SignaturePadModule } from 'angular2-signaturepad';
import { AppComponent } from './app.component';

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

3. 业务组件中调用示例
   模板文件示例：

<div style="border: 1px solid #ccc; width: 400px; height: 200px;">
  <signature-pad [options]="signOptions" (onEndEvent)="handleSignComplete()"></signature-pad>
</div>
<button (click)="clearSign()">清空签名</button>

组件逻辑文件示例：

import { Component, ViewChild } from '@angular/core';
import { SignaturePad } from 'angular2-signaturepad';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @ViewChild(SignaturePad) private signPad: SignaturePad;
  // 签名板配置项
  signOptions = {
    minWidth: 1.5,
    penColor: '#000000',
    backgroundColor: '#ffffff'
  };

  handleSignComplete() {
    // 签名完成后获取base64格式签名图
    const signBase64 = this.signPad.toDataURL('image/png');
    console.log('签名结果：', signBase64);
  }

  clearSign() {
    this.signPad.clear();
  }
}

内容的提问来源于stack exchange，提问作者imjayabal