Angular 14类库中使用JSZip报TypeError构造器错误求助

我之前在开发Angular 14类库时遇到过**完全相同的TypeError: ... is not a constructor**问题，当时也是把原本在Angular应用中正常运行的JSZip代码迁移到类库后就报错了，折腾了好一阵才找到几个可行的解决办法，分享给你：

1. 调整导入方式并配置TypeScript选项 #

首先尝试把你的导入语句从命名空间导入改成默认导入：

import JSZip from 'jszip';

然后保持创建实例的代码不变：

const zip = new JSZip();

同时需要确保你的类库tsconfig.lib.json中开启了以下两个选项（如果没开的话）：

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

这是因为JSZip本质是CommonJS模块，在ES模块环境下直接用命名空间导入容易出现解析异常，默认导入配合这两个TypeScript选项可以让模块解析更顺畅。

2. 配置ng-packagr的UMD模块映射 #

如果调整导入方式后还是不行，那大概率是Angular类库的打包工具ng-packagr在处理第三方依赖时的问题。你需要在类库根目录的ng-package.json中添加umdModuleIds配置，明确指定JSZip的UMD模块ID：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/your-library-name",
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "jszip": "jszip"
    }
  }
}

这个配置会告诉ng-packagr在打包成UMD格式时，正确映射JSZip模块，避免运行时出现找不到构造函数的情况。

3. 确认JSZip版本与Angular版本兼容 #

虽然你说构建正常，但还是建议检查一下你使用的JSZip版本是否和Angular 14兼容。我当时用的是jszip@3.10.1，和Angular 14配合没问题，如果你的版本太旧或太新，也可能出现模块解析异常，不妨尝试锁定到这个稳定版本试试。

为什么会出现这个错误？ #

本质原因是Angular类库的打包机制和常规Angular应用不同：ng-packagr会把类库打包成多种格式（ES2020、UMD等），而JSZip作为CommonJS模块，在类库的模块解析流程中容易出现命名空间丢失的情况，导致运行时无法识别构造函数——这也是为什么构建时没问题，但运行时才报错的原因。

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