Angular 应用程序不使用 es5 转译库答案

【问题标题】：Angular app not using es5 transpiled libraryAngular 应用程序不使用 es5 转译库
【发布时间】：2021-01-30 13:14:31
【问题描述】：

我正在按照https://angular.io/guide/creating-libraries 的指南创建一个库。我使用此配置构建它：

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/lib",
    "target": "es5",
    "declaration": true,
    "inlineSources": true,
    "types": [],
    "lib": [
      "dom",
      "es2018"
    ]
  },
  "angularCompilerOptions": {
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "enableResourceInlining": true
  },
  "exclude": [
    "src/test.ts",
    "**/*.spec.ts"
  ]
}

与开箱即用的内容相比，我唯一改变的是，我将目标从 es2015 更改为 es5。将其发布到 npm 并将其安装到我的应用程序后，我尝试使用 ng serve --configuration es5 运行我的应用程序（Angular 8）。

es5 配置说：

 "configurations": {
    "es5": {
      "tsConfig": "./tsconfig.es5.json"
    }
}

tsconfig.es5.json：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "ES5",
  }
}

tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "ESNext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "ES2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "ES2018",
      "DOM"
    ],
    "paths": {
      "@config/*": ["app/config/*"],
      "@core/*": ["app/core/*"],
      "@environments/*": ["environments/*"],
      "@modules/*": ["app/modules/*"],
      "@requests/*": ["app/core/request-interfaces/*"],
      "@responses/*": ["app/core/response-interfaces/*"],
      "@shared/*": ["app/shared/*"]
    }
  },
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

按所述运行我的应用程序时，我从导入的库中收到此错误： Uncaught TypeError: Class constructor MyClass cannot be invoked without 'new'

它是由我从包中扩展一个类触发的：导出类 MyClass 扩展 PackageClass {}

我知道这个错误是由不支持 class 关键字的 es2015 触发的，但是不应该用 es5 目标构建库来阻止我的应用程序像这样使用它吗？我在库文档中找不到任何关于支持 es5 浏览器的内容。

【问题讨论】：

标签： angular ecmascript-5 angular-library

【解决方案1】：

原来这是因为 Angular 库不向后兼容，只能向前兼容：https://github.com/angular/angular-cli/issues/19909

【讨论】：