为什么我不能构建引用内部 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';) 一样包含已编译的@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/*"
  ]
}

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