Angular 9下库构建失败

Question

我正在尝试将这个库 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 - error NG6002: Appears in the NgModule.imports of SimpleNotificationsModule, but could not be resolved to an NgModule class

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

编辑：

按照评论中的想法（和我的感觉），我尝试不使用gulp构建：

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

但我仍然遇到了完全相同的错误...

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

- Guerric P

---

你可能想要完全停止使用gulp并将其迁移到ng-cli...这将减少你的头痛。gulp文件只是编译库，而ng-cli也可以完成同样的工作。 - The Fabio

@TheFabio，你是否发现了一些可能解释为什么选择Gulp而不是ng-cli的原因？ - Guerric P

建议使用Angular CLI，Echo @TheFabio的观点。现在甚至无法从Angular CLI中退出。 - C.OG

这与您尝试导入Angular公共模块有关吗？ - C.OG

我在问题中添加了一个链接到我的尝试。 - Guerric P

Answer 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

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

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

---

我通过对您的尝试的代码库进行一些修改来实现了这个目标。下面是截图:

所做的更改如下:

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

enableIvy:false 意味着您的库不会使用 Ivy 渲染引擎进行构建（目前建议库不要使用它），但不会防止您的库在启用 Ivy 的应用程序中使用。

请注意，IVY 仍处于试验模式

annotateClosureCompiler: false 与此问题有关：https://github.com/angular/angular/pull/26738

- C.OG

---

谢谢您。您能详细说明一下这些选项是什么，它们的作用以及为什么它们可以解决我的问题吗？另外，"enableIvy": false会阻止我将该库导入到Ivy应用程序中吗？ - Guerric P

@Guerric P 不行。enableIvy:false 表示它是使用旧的视图引擎构建的，并且可以与 IVY 一起使用。 - maxisam

Answer 2

我找出了问题所在，我有一个包含库项目的Angular 8项目，我将其升级为Angular 9（也包括库：ng generate library core）。我首先创建了一个新的Angular 9项目来比较与使用ng 8创建的项目之间的差异。我发现有一些东西缺失了，以下是我遵循的步骤： - 删除 node_modules - 删除 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：在这种情况下，库被称为 "core"

- Youness Houdass