使用您的 angular 图书馆运送资产

Question

我 building an angular components library，使用 NX 工作区。 ATM 我正在实施一个文件上传器。此上传器将包含一张图片 (svg)，该图片应包含在 library/package.

中

我在 Internet 上找到的所有解决方案都要求库的使用者更新他们的 angular.json 应用程序部分。对我来说，这是绝对不行的。这是我找到的一些解释此问题的资源：

我已经通过添加 assets 字段修改了我的 ng-package.json：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/example-ng-bootstrap",
  "assets": ["./assets"],
  "lib": {
    "entryFile": "src/index.ts"
  }
}

尝试添加

"targets:build:options:assets": [
  "libs/example-ng-bootstrap/src/assets"
]

到 lib angular.json 部分（project.json - NX angular.json V2 样式），根本无法构建。

尝试遵循 ng-package.json 配置：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/example-ng-bootstrap",
  "assets": ["/dist/libs/example-ng-bootstrap/lib/assets"],
  "lib": {
    "entryFile": "src/index.ts"
  }
}

从包含的 links 开始，它确实解释了如何构建一个 NX 原理图来为您执行此操作，但是任何构建应用程序（angular 工作区样式）的人都会使用它库可能无法使用此原理图。

其他人（在 github link 中）也提到某些解决方案仅适用于同一 NX 工作区内的应用程序，当然这对任何人都没有帮助。

我很困惑为什么图书馆提供的资产不能开箱即用，或者不修改消费应用程序。您也可以通过 U 盘传送它们……不过，我可以提供 angular 原理图。

另外，我宁愿通过css来设计图标，也不愿消费者自己更新文件，但我还是想知道是否有好的解决方案。

有没有人有专业的处理方法？

编辑

似乎很难找到有关如何使用 NX 构建和发布 angular 原理图的信息，但是 this seems to be a useful link

Answer 1

这是我的决赛ng-package.json:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/mycompany-ng-bootstrap",
  "lib": {
    "entryFile": "src/index.ts"
  },
  "assets": [
    "./src/assets/**",
    "./src/styles/**",
    "./_bootstrap.scss"
  ]
}

发布 dist 文件后，例如发布到 NPM，我可以引用 angular.json

中的资产

"styles": [
  "node_modules/@mintplayer/ng-bootstrap/_bootstrap.scss",
  "src/styles.scss"
],

使用您的 angular 图书馆运送资产

Ship assets with your angular library

angular

assets

angular-library

nx-workspace

编辑