angular - 为什么我不能构建引用内部 Angular 库的 Angular 应用程序？

Question

tl;dr; ng build 删除了包含我编译的自定义库的/dist 文件夹。这会使我项目代码中对该库的所有引用无效，从而导致 ng build 最终失败。我做错了什么？

我关注了documentation和 guides在现有项目中使用 Angular CLI 生成一个库。我运行了 ng build @mylib，然后运行了 npm install dist/@mylib。我的应用程序中的一两个模块从 @mylib 导入组件，就像它们从任何 npm 安装的模块导入组件一样 (import { MyLibComponent } from '@mylib';) 然而，这些引用在我构建时立即中断应用程序，因为 ng build 删除了/dist 文件夹，其中包含已编译的 @mylib。

您认为/node_modules 会包含编译后的文件，但实际上它只是使用虚拟链接指向有问题的/dist 文件夹。

Answer 1

库的输出路径应该位于 dist 文件夹中与应用程序输出不同的文件夹中。

我为此创建了一个示例，您可以在以下 repo 中找到它: https://github.com/tenkmilan/angular-workspace-example

在上面的例子中，在 angular.json 中，应用程序输出是 "outputPath": "dist/my-app" 而在 ng- 中的库输出package.json 是 "dest": "../../dist/my-lib"。要将库输出源包含在应用程序中，需要在工作区的根 tsconfig.json 中进行配置:

"paths": {
  "my-lib": [
    "dist/my-lib"
  ],
  "my-lib/*": [
    "dist/my-lib/*"
  ]
}

这样库输出不会被删除，它会直接包含在您的应用程序中。