Angular Library复制资源不工作ng-packagr

Question

我正在创建一个angular库，它将允许我们重用大量当前使用的过滤器组件(客户搜索、员工搜索等)。在我的库中，我将scss文件导入到我的组件的scss文件中(在本例中是telerik)。我遇到的问题是视图封装。

那么如何在库中导出我的应用程序可以使用的全局样式表呢？我需要它在本地测试，显然也需要生产。

我尝试了ng-packagr "assets"，但似乎什么都没有发生。我需要在我的应用程序的styles.scss中更新我的angular.json或以某种方式导入库资源scss吗？

这是我的ng-package.json文件。

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/filters",
  "assets": [
    "assets"
  ],
  "lib": {
    "entryFile": "src/public-api.ts"
  }
}

Answer 1

我找到了这个answer

我使用的是Angular v10。我有一个用下面的命令生成的Angular库：

ng generate library @my-scope/my-library

我的ng-packager.json (在我的angular库的根目录下)看起来像这样：

{
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../../dist/my-scope/my-library",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
  "assets": [ 
    "./assets/**/*"
  ]
}

我的assets文件夹在Angular库的顶层文件夹(src的兄弟文件夹)中。

命令ng build @my-scope/my-library将我的assets文件夹(及其所有内容)复制到dist/my-scope/my-library文件夹。

另一种技术是使用ViewEncapsulation.None在你的库中创建一个组件-该组件的CSS将被添加到全局样式...相当酷，但如果管理不当，也会非常混乱和恼人……