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

Question

谁能提示从哪里开始使用 ng-packagr 将图像和 css 文件包含到 Angular 库中？

Answer 1

这个问题有一个官方问题here。将图像和类似内容添加到您的库中实际上非常简单：您可以在ng-packagr 完成后手动将它们复制到 dist 文件夹。

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

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

不过，我觉得这更像是一个 NPM 问题，而且也有像 pkg-assets and npm-assets 这样的裸 NPM 解决方案。

Answer 2

它可以在 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"
}

Answer 3

我在用ngPackagr打包的时候也遇到了同样的问题。所以我写了自己的小节点脚本手动将它们复制到dist文件夹。

npm install wrench

在根目录下新建js文件assets-copy.js

var wrench = require("wrench"),
  util = require("util");

var source = "./src/assets";
var target = "./dist/src/assets";

wrench.copyDirSyncRecursive(source, target, {
  forceDelete: true
});

console.log("Asset files successfully copied!");

将构建脚本添加到 package.json 如下所示，我将其命名为 manual:assets-copy

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "packagr": "ng-packagr -p ng-package.json",
    "assets-copy": "node assets-copy.js"
  }

在你之后[=47=]

npm run packagr

还有运行我们的脚本

npm run manual:assets-copy

它会手动将它们复制到 dist 文件夹。

Answer 4

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

使用 ng-packagr ^9.0.1 版本，您可以使用内置 "copy assets"

{
  "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 为了他人的利益。我想将 assets 文件夹及其所有内容复制到库中并一起发布。

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

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

Answer 5

尝试使用"postbuild"。它对我有用。

于 package.json

...
"scripts": {
    ...
    "build": "ng build",
    "postbuild": "cp -R projects/mylib/src/assets dist/mylib/assets",
...

重要...何时执行构建使用：

/> npm run build

然后"postbuild"会自动执行。如果仅使用 "ng build".

则不会执行

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

Include assets when building library using ng-packagr

shared-libraries

angular

ng-packagr