Angular 9 的库构建失败答案

【问题标题】：Library build fails with Angular 9Angular 9 的库构建失败
【发布时间】：2020-02-16 18:53:22
【问题描述】：

我正在尝试将此库 https://github.com/flauc/angular2-notifications 从 Angular 2+ 迁移到 Angular 9。

最初的错误是关于 ModuleWithProviders 已成为泛型类型，所以我修复了它。我还在这里描述了一个错误https://github.com/angular/angular/issues/32352，我用require('@angular/compiler-cli'); 修复了它，现在我面临另一个错误：

../node_modules/@angular/common/common.d.ts:115:22 - 错误 NG6002：出现在 SimpleNotificationsModule 的 NgModule.imports 中，但是无法解析为 NgModule 类

我很难理解发生了什么，因为我以前从未构建过库，而且使用 gulp 构建似乎有点 hacky，因为这一行 ngc = require('@angular/compiler-cli/src/main').main 指的是不属于公共 API。

编辑：

按照 cmets 中的想法（以及我自己的感觉），我尝试在没有 gulp 的情况下构建：

创建了一个angular.json 文件
将index.ts 分隔为public_api.ts 和simple-notifications.module.ts
对文件和文件夹结构进行了一些更改

但我仍然有同样的错误......

我的尝试：https://github.com/youkouleley/angular2-notifications 我尝试使用ng build 构建它，package.json 中的脚本尚未更新

【问题讨论】：

您可能想停止使用 gulp 并将其移至 ng-cli... 它会减少您的麻烦。 gulp 文件只是在编译库。 ng-cli 也可以这样做
@TheFabio 你有没有看到任何可以解释 gulp 选择而不是 ng-cli 的东西？
我建议年龄...当 angular 开始具有 cli（angular 2）时，gulp 处于其使用的顶峰。可能是由具有足够 gulp 知识的人完成的开发
会呼应@TheFabio。请改用角度 CLI。现在甚至无法从 Angular CLI 中弹出
@C_Ogoo 明白了，我试过了，但没有解决我的问题

标签： angular gulp angular-library angular-ivy angular9

【解决方案1】：

编辑 2

现在 Angular 9 发布了：

https://angular.io/guide/creating-libraries#publishing-your-library

不建议将 Ivy 库发布到 NPM 存储库。在将库发布到 NPM 之前，使用 --prod 标志构建它，该标志将使用称为 View Engine 的旧编译器和运行时而不是 Ivy。

编辑

https://next.angular.io/guide/ivy

如果您是库作者，则应从版本 9 开始继续使用 View Engine 编译器。通过让所有库继续使用 View Engine，您将保持与使用 Ivy 的默认 v9 应用程序以及应用程序的兼容性已选择继续使用 View Engine。

有关如何编译或捆绑 Angular 库的更多信息，请参阅 Creating Libraries 指南。当您使用集成到 Angular CLI 或 ng-packagr 中的工具时，您的库将始终以正确的方式自动构建。

我设法通过对您发布的关于您的尝试的 repo 进行一些更改来完成这项工作。截图如下：

所做的更改如下：

package.json 中的更改无关紧要。

enableIvy:false 表示您的库将不会使用 Ivy 渲染引擎构建（目前推荐用于库），但不会阻止您的库在启用了 Ivy 的应用程序中使用。

值得注意的是，IVY 仍处于某种实验模式

annotateClosureCompiler: false：和这个问题有关https://github.com/angular/angular/pull/26738

【讨论】：

谢谢。您能否详细说明这些选项是什么，它们的作用以及它们为什么能解决我的问题？另外，"enableIvy": false 会阻止我将 lib 导入 Ivy 应用程序吗？
@Guerric P no. enableIvy:false 表示它是用旧的视图引擎构建的，它可以与 IVY 一起使用

【解决方案2】：

我发现出了什么问题，我有一个 Angular 8 项目（包含一个库项目），我已经升级到 Angular 9（还有一个库：ng generate library core，我首先创建了一个新的 Angular 9 项目比较使用 ng 8 与我的项目的差异，我发现缺少一些东西，这是我遵循的步骤： - 删除节点模块 - 删除 dist 文件夹 - 在 Angular 9 项目库中有一个名为：tsconfig.lib.prod.json 的新文件

{
  "extends": "./tsconfig.lib.json",
  "angularCompilerOptions": {
    "enableIvy": false
  }
}

在您的 angular.json 中添加以下内容：

{
  ...
  "projects": {
     ...
     "configurations": {
            "production": {
              "tsConfig": "projects/core/tsconfig.lib.prod.json"
             }
      }
  ...
  }
}

运行 ng build --prod，一切正常：D

PS：在这种情况下，库被称为“核心”

【讨论】：