使用ng-packagr构建库时包含资源文件

Question

使用ng-packagr构建库时包含资源文件

angularshared-librariesng-packagr

28

有没有人能够提示一下，在使用ng-packagr将图像和CSS文件包含到Angular库中应该从哪里开始？

- Algis

5个回答

19

这个问题有一个官方问题解决方案这里。将图片等内容包含到你的库中实际上非常简单：在ng-packagr处理完成后，您只需手动将它们复制到dist文件夹即可。

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

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

我认为这更多是一个NPM问题，但也有裸NPM解决方案，如pkg-assets和npm-assets。

- kremerd

9

可以使用 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"
}

- Vlad

3

当我使用ngPackagr打包时，也遇到了同样的问题。因此，我编写了自己的小型node脚本来手动将它们复制到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。请注意保留 HTML 标签。

  "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"
  }

在运行以下命令之后：

npm run packagr

请务必运行我们的脚本：

npm run manual:assets-copy

它会手动将这些文件复制到dist文件夹中。

- Isanka Thalagala

1

尝试使用“postbuild”。对我而言有效。

在package.json上。

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

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

/> npm run build

然后，“postbuild”将自动执行。如果您仅使用“ng build”，则不会执行它。

- Akostha

'cp' is not recognized as an internal or external command, operable program or batch file. - paddotk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mahesh Kumar · Accepted Answer

这是一个旧的帖子，但最新选项在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。我想复制 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文件夹位于库根目录中。这有助于复制整个Assets文件夹和其中的内容并将其添加到库中，以便您可以使用它作为@include "@node_modules/your-library/assets/styles/main.scss"