Angular 8应用引入ES5目标编译的自定义类库时出现Class构造函数调用错误的问题求助

这个错误确实有点反直觉——明明已经把类库和应用都配置成ES5编译了，怎么还会出现ES6类相关的报错？其实问题大概率出在Angular CLI的模块解析优先级上，而非你的ES5编译配置本身。

核心原因 #

当你用Angular官方工具编译类库时，默认会生成多份不同目标版本的代码，并在类库的package.json里通过不同字段声明：

• main：通常指向ES5编译后的UMD格式文件
• module：指向ES2015（ES6）格式的ES模块文件
• es2015：指向更高级的ES2015代码

Angular CLI（包括Angular 8）在解析依赖时，会优先读取module字段指向的ES2015代码，而非main字段的ES5代码。这就导致哪怕你的应用配置了ES5编译，实际加载的类库代码还是ES6类语法，而ES5环境下无法正确处理原生ES6类的继承逻辑（ES5是用原型链模拟类，和原生ES6类的构造机制不兼容）。

另外，你类库配置里的strictMetadataEmit: true只是确保元数据的严格生成，不会改变多版本代码输出的行为，所以这个配置不是问题根源。

解决步骤 #

1. 调整类库的package.json入口字段 #

打开你发布到npm的类库的package.json，修改入口字段让ES5代码被优先加载：

• 可以直接删除module和es2015字段，只保留main指向ES5的编译文件（比如./bundles/your-library.umd.js）
• 或者修改module字段，让它指向ES5版本的ES模块文件（通常在./esm5/目录下，比如./esm5/your-library.js）

2. 强制应用加载类库的ES5版本 #

如果不想修改类库的package.json，可以在应用的tsconfig.es5.json中添加paths配置，强制指定加载类库的ES5版本：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "ES5",
    "paths": {
      "your-library-name": ["./node_modules/your-library-name/esm5/your-library-name.js"]
    }
  }
}

替换your-library-name为你的类库实际名称，确保路径指向正确的ES5模块文件。

3. 验证类库的ES5编译输出 #

确认你的类库编译后确实生成了纯ES5代码：

• 进入类库的dist目录，查看esm5或bundles下的文件，检查是否用原型链语法代替了class关键字（比如function PackageClass() {}而非class PackageClass {}）

额外提示 #

Angular 8本身对ES5的支持是完善的，还可以注意两点：

• 确保应用的angular.json中，es5配置不仅指定了tsConfig，还要确认build和serve的配置都正确关联了这个ES5配置
• 如果你的类库依赖了其他第三方库，也要确保那些库也提供了ES5兼容的版本

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