25

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

4

5 回答 5

25

这是一个旧线程，但仍在 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"
    }
  }
}

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

于 2020-02-23T17:12:52.667 回答
16

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

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

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

不过，我觉得这更像是一个 NPM 问题，而且还有一些裸露的 NPM 解决方案，比如pkg-assets和npm-assets。

于 2017-10-27T19:58:08.183 回答
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"
}
于 2018-04-15T05:01:40.193 回答
2

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

npm 安装扳手

在根assets-copy.js中创建新的 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如下所示，我将其称为手册：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"
  }

跑完之后

npm 运行打包程序

也运行我们的脚本

npm 运行手册：assets-copy

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

于 2018-10-03T03:57:03.030 回答
0

尝试使用“postbuild”。这个对我有用。

在package.json

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

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

/> npm 运行构建

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

于 2020-04-07T11:56:39.713 回答