Angular中SignaturePad报错：signature_pad_1.default不是构造函数

1. 修正TypeScript测试配置 #

Angular测试环境的TS配置可能未正确处理CommonJS模块的默认导出，打开tsconfig.spec.json，确保开启以下两个编译选项：

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

这两个选项会让TypeScript正确识别第三方模块的默认导出，避免default is not a constructor类的错误。

2. 统一导入与实例化写法 #

使用标准默认导入，不要混用命名空间或其他导入方式：

// 组件文件中的导入语句
import SignaturePad from 'signature_pad';

// ngAfterViewInit中的实例化代码
ngAfterViewInit() {
  const canvasEl = this.canvasRef.nativeElement;
  this.signaturePad = new SignaturePad(canvasEl);
}

3. 针对测试环境的模块兼容处理 #

如果上述配置无效，可能是Karma未正确加载模块，可尝试两种处理方式：

• 在test.ts顶部直接导入UMD版本的库：

  import 'signature_pad/dist/signature_pad.umd.min.js';
  

• 或者在组件测试文件中改用require导入：

  const SignaturePad = require('signature_pad').default;
  

4. 升级signature-pad版本 #

部分旧版本的signature-pad在ES模块导出逻辑上存在缺陷，执行以下命令升级到最新稳定版：

npm install signature-pad@latest --save

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