web-dev-qa-db-ja.com

ng-packagrを使用してライブラリを構築するときにアセットを含める

Ng-packagrを使用して、画像とCSSファイルをAngularライブラリに含めることを開始する場所のヒントを教えてください。

angularshared-librariesng-packagr
15
Algis

その質問には公式の問題があります こちら 。実際には非常に単純ですto include画像などをライブラリに追加します。ng-packagrが処理を行った後、それらを手動でdistフォルダーにコピーできます。

ただし、ライブラリを使用するプロジェクトでこれらのファイルの抽出を自動化することはより困難です。上記で言及した問題で、BenjaminDoblerは、消費者プロジェクトの.angular-cli.jsonファイルに次のマッピングを追加することを提案しています。

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

ただし、これはNPMの問題であり、 pkg-assets や npm-assets のようなNPMの裸のソリューションもあります。

12
kremerd

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

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 run packagr

スクリプトも実行します

npm run manual：assets-copy

それらを手動でdistフォルダーにコピーします。

1
Isanka Thalagala