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

【问题标题】：Include assets when building library using ng-packagr使用 ng-packagr 构建库时包含资产
【发布时间】：2018-03-08 15:37:28
【问题描述】：

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

【问题讨论】：

标签： angular shared-libraries ng-packagr

【解决方案1】：

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

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

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

不过，我觉得这更像是一个 NPM 问题，并且也有针对它的裸 NPM 解决方案，例如 pkg-assets 和 npm-assets。

【讨论】：

【解决方案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"
}

【讨论】：

【解决方案3】：

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

npm 安装扳手

在根目录下创建新的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"
  }

运行后

npm 运行包

同时运行我们的脚本

npm 运行手册：资产复制

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

【讨论】：

【解决方案4】：

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

这帮助我删除了邮包 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"

【讨论】：

请举个完整的例子
添加了用于复制 assets 文件夹的 ng-package 示例。不幸的是，我没有完整的库作为示例。
不起作用。我是 Angular v8.3.20，在 projectType: library 我得到：错误：配置与所需的架构不匹配。数据路径“”不应有其他属性（资产）。
@Akostha 你需要在库的 ng-package.json 中定义这个。
@Silvos 我是在 ng-package.json 中完成的，但奇怪的是，使用最后一个版本的 angular，没有复制任何文件......然后捆绑时仍然出错。

【解决方案5】：

尝试使用“postbuild”。它对我有用。

关于package.json

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

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

/> npm 运行构建

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

【讨论】：