包装角库以支持角8、9和10的正确方法

Question

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

通常情况下，这是顺利的，库仍然与以前版本的角兼容，但这个版本似乎不是这样的(针对角9的早期版本构建可以很好地处理角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>;

当在一个角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'.

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

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

您可以在这里看到我对此更改的WIP拉出请求：https://github.com/mnahkies/ng-qrcode/pull/8

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

"angularCompilerOptions": {
    "enableIvy": false
  }

是否有一种方法可以使用保持与角v8?兼容的角v10来构建库？

Answer 1

角10有两个大的破断变化：

1. 10要求tslib 2.0.0 vs. . <10要求tslib <2.0，
2. 10使用打字本3.9 vs. .< 10要求打字本< 3.9

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

Answer 2

基本上，这是在库端和使用者应用程序端使用的构建引擎的问题。常春藤取代了从角v9开始的角应用程序中的ViewEngine，转换将用角v13完成，它已经在2021年年底出现了。说到角度v8支持，我想说，您需要在关闭常春藤的情况下构建库，这意味着ViewEngine是on的(tsconfig.json)：

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

这是因为ViewEngine是v8应用程序的默认选项，而常春藤编译的库不适用于ViewEngine编译的应用程序。所以问题的第二部分是如何编译这个应用程序。9-11有一个引擎兼容性表(不幸的是，我没有找到8-12表)：

​

​

作为一个角度7-12库兼容性的例子，我可以参考我自己的库，ngx滚动v2：https://github.com/dhilt/ngx-ui-scroll/tree/v2.3.1。在v2中，它使用自定义的基于汇总的构建过程和enableIvy:假。在v3中，我想我会切换到常春藤和角视图引擎支持。关于v13中库的更多信息，可以从官方博客：对角库分发即将进行的改进上获取。

支持故事的另一部分是TypeScript版本的兼容性。v8应用程序可以使用TS v3.4，角v13可以使用TS 4.5，而且，相信我，不仅有v3 -> v4中断的变化(例如，查看this 3.6 -> 3.7 break)。应用程序必须将skipLibCheck选项设置为true，以便在编译过程中忽略这些问题(tsconfig.json)：

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