web-dev-qa-db-fra.com

Inclure les actifs lors de la construction de la bibliothèque avec ng-packagr

Quelqu'un pourrait-il indiquer par où commencer pour inclure des images et des fichiers CSS dans la bibliothèque Angular à l'aide de ng-packagr?

angularshared-librariesng-packagr
9
Algis

Il y a un problème officiel pour cette question ici . En fait, c'est assez simple d'inclure des images et similaires dans votre bibliothèque: vous pouvez simplement les copier manuellement dans le dossier dist après que ng-packagr l'ait fait.

Cependant, il est plus difficile d'automatiser l'extraction de ces fichiers dans les projets qui utiliseront votre bibliothèque. Dans le problème cité ci-dessus, BenjaminDobler suggère d'ajouter le mappage suivant au fichier .angular-cli.json de tout projet consommateur:

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

Cependant, j’estime qu’il s’agit plus d’un problème de NGP, et il existe également des solutions de NPM simples, telles que pkg-assets et npm-assets .

9
kremerd

Il peut être automatisé sous Linux avec le script 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"
}
5
V. Kalyuzhnyu

J'ai également eu le même problème lorsque je compresse en utilisant ngPackagr. J'ai donc écrit mon propre script de petit noeud pour les copier manuellement dans le dossier dist.

clé d'installation npm

créer un nouveau fichier js à la racine 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!");

ajouter un script de construction à package.json comme ci-dessous, je l'appelais comme 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"
  }

Après avoir couru

npm run packagr

Exécuter également notre script

npm run manual: assets-copy

Il va les copier dans le dossier dist manuellement.

1
Isanka Thalagala