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

时间:2019-11-22 15:18:59

标签: angular npm angular-cli node-modules

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

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

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

1 个答案:

答案 0 :(得分: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/*"
  ]
}

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