使用ng-packagr构建库时包含资产

Question

任何人都可以提示在哪里开始使用ng-packagr将图像和css文件包含到Angular库中？

Answer 1

这是一个旧线程，但仍在 2020 年 2 月更新最新选项

使用 ng-packagr ^9.0.1 版本，您可以使用内置的“复制资产”来执行此操作

{
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

这帮助我删除了 postpackage cp 脚本

添加我的实际 ng-package.json 以造福他人。我想将资产文件夹及其所有内容复制到库中，并与它一起发布。

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

资产文件夹位于库根目录中。这有助于复制整个资产文件夹及其中的内容并将其添加到库中，以便您可以将其用作@include "@node_modules/your-library/assets/styles/main.scss"

Answer 2

有对这个问题的正式发布在这里.将图像等包含在您的库中实际上非常简单:您可以在ng-packagr完成它之后手动将它们复制到dist文件夹.

但是,在使用您的库的项目中自动提取这些文件会更加困难.在上面引用的问题中,BenjaminDobler建议将以下映射添加到.angular-cli.json任何消费者项目的文件中:

{ "glob": "**/*", "input": "../node_modules/my-lib/assets", "output": "./assets/my-lib/" }

我觉得这更像是一个NPM问题,并且还有像NPM 资产和npm资产这样的裸NPM解决方案.

Answer 3

它可以在Linux上使用post*脚本自动完成

"scripts": {
    "package": "ng-packagr -p ng-package.json",
    "postpackage": "cp -R YOUR_ASSETS_FOLDER dist/YOUR_ASSETS_FOLDER && tar -cvzf dist.tgz -C dist .",
    "release": "npm publish dist"
}