打包 Angular 库以支持 Angular 8、9 和 10 的正确方法答案

【问题标题】：Correct way to package an Angular library to support Angular 8, 9 and 10打包 Angular 库以支持 Angular 8、9 和 10 的正确方法
【发布时间】：2020-10-18 14:30:52
【问题描述】：

随着 Angular 10 的发布，我正在将用于构建库 + 演示应用程序的 Angular 版本更新到版本 10。

一般来说，这很顺利，并且该库仍然与以前版本的 Angular 兼容，但在此版本中似乎并非如此（针对 Angular 9 的先前版本构建适用于 Angular 8）。

输出的打字稿定义文件包括：

import * as ɵngcc0 from '@angular/core';

...

static ɵfac: ɵngcc0.ɵɵFactoryDef<QrCodeComponent, never>;
static ɵcmp: ɵngcc0.ɵɵComponentDefWithMeta<QrCodeComponent, "qr-code", never, { "value": "value"; "size": "size"; "errorCorrectionLevel": "errorCorrectionLevel"; }, {}, never, never>;

在 Angular 8 项目中使用时会导致这样的错误：

 ERROR in node_modules/ng-qrcode/lib/qr-code.component.d.ts(7,25): error TS2694: Namespace '"/ngqrcode-ng8-test/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDef'.
    node_modules/ng-qrcode/lib/qr-code.component.d.ts(8,18): error TS2314: Generic type 'ɵɵComponentDefWithMeta' requires 6 type argument(s).
    node_modules/ng-qrcode/lib/qr-code.directive.d.ts(13,25): error TS2694: Namespace '"/ngqrcode-ng8-test/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDef'.

我使用以下方法新创建了测试 angular 8 项目：

npx @angular/cli@^8 new ngqrcode-ng8-test

您可以在此处查看我的 WIP 拉取请求：https://github.com/mnahkies/ng-qrcode/pull/8

注意：我的编译器选项中已经有 enableIvy false：

"angularCompilerOptions": {
    "enableIvy": false
  }

有没有办法使用 Angular v10 构建一个与 Angular v8 保持兼容性的库？

【问题讨论】：

我也在努力跟上 Angular 的重大变化。这种不兼容的发生基本上是由于 Angular 编译的内部工作方式发生了变化。因此，由于这可能是那里的重大更改，因此没有选择保持向后兼容性。使用 NG 9 构建的库更有可能与未来版本一起使用。

标签： angular typescript angular-library ng-packagr

【解决方案1】：

角度 10 有 2 个重大的重大变化：

10 需要 tslib 2.0.0 与
10 使用 typescript 3.9 vs.

我认为您不能将 8、9 和 10 的库打包在一个包中 :-)

【讨论】：

tslib 更改通过将其更改为模块的直接依赖项来覆盖，而不是 peerDependency - 您最终会在捆绑包中同时使用 tslib v1 和 v2，但这是预期的，以及他们进行这种迁移的原因。一般来说，打字稿的变化可能会有问题，但我认为这不是原因。我认为您可能是对的，但这是不可能的

【解决方案2】：

基本上，这是在库端和消费者应用程序端使用的构建引擎的问题。 Ivy 取代了从 Angular v9 开始的 Angular 应用程序中的 ViewEngine，过渡将使用 Angular v13 完成，该版本已经在 2021 年底推出。说到 Angular v8 支持，我想说，你需要在关闭 Ivy 的情况下构建您的库，这意味着 ViewEngine 已打开（tsconfig.json）：

  "angularCompilerOptions": {
    "enableIvy": false,
    ...
  }

这是因为 ViewEngine 是 Angular v8 应用程序的默认选项，而 Ivy 编译的库不适用于 ViewEngine 编译的应用程序。所以问题的第二部分是应用程序是如何编译的。有9-11的引擎兼容性表（可惜没找到8-12的表）：

作为 Angular 7-12 库兼容性的示例，我可以参考我自己的库 ngx-ui-scroll v2：https://github.com/dhilt/ngx-ui-scroll/tree/v2.3.1。在 v2 中，它使用带有 enableIvy: false 的自定义基于汇总的构建过程。在 v3 中，我想我会切换到 Ivy 并放弃对 Angular ViewEngine-apps 的支持。有关 Angular v13 中库的更多信息，请参阅官方博客：Upcoming improvements to Angular library distribution。

支持故事的另一部分是 TypeScript 版本的兼容性。 Angular v8 应用程序可能使用 TS v3.4，Angular v13 可能使用 TS 4.5，相信我，不仅有 v3 -> v4 重大更改（例如查看this 3.6 -> 3.7 break）。应用程序必须将 skipLibCheck 选项设置为 true 才能在编译期间忽略此类问题 (tsconfig.json)：

  "compilerOptions": {
    "skipLibCheck": true,
    ...
  }

【讨论】：