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

Question

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

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

你认为 /node_modules 会包含编译后的文件，但它实际上只是使用虚拟 link 到有问题的 /dist 文件夹。

Answer 1

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

我为此创建了一个示例，您可以在以下存储库中找到它： 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/*"
  ]
}

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

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

Why can't I build an Angular app that references an internal Angular library?

npm

node-modules

angular-cli

angular