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

Question

随着 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 保持兼容性的库？

Answer 1

angular10 中有 2 个大的突破性变化：

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

我认为您无法将 8、9 和 10 的库打包到一个包中:-)

Answer 2

基本上，这是在库端和消费者应用程序端使用的 build 引擎的问题。 Ivy 替换了从 Angular v9 开始的 Angular 应用程序中的 ViewEngine，过渡将在 Angular v13 完成，它已经在年底了2021. 说到 Angular v8 支持，我想说的是，您需要在关闭 Ivy 的情况下创建 uild 库，这意味着 ViewEngine 已打开 (tsconfig.json):

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

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

作为 Angular 7-12 库兼容性的示例，我可以参考我自己的库 ngx-ui-scroll v2: https://github.com/dhilt/ngx-ui-scroll/tree/v2.3.1. In v2 it uses custom rollup-based build process with enableIvy: false. In v3 I think I'll switch to Ivy and drop Angular ViewEngine-apps support. More information for libraries in Angular v13 can be taken from the official blog: 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,
    ...
  }

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

Correct way to package an Angular library to support Angular 8, 9 and 10

typescript

angular

angular-library

ng-packagr