28

Could anyone give a hint where to start to include images and css files into Angular library using ng-packagr?

Algis
  • 612
  • 1
  • 8
  • 23

5 Answers5

32

It's an old thread but still updating with a latest options in Feb-2020

With the ng-packagr ^9.0.1 version, You can do this using inbuilt "copy assets"

{
  "ngPackage": {
    "assets": [
      "CHANGELOG.md",
      "./styles/**/*.theme.scss"
    ],
    "lib": {
      ...
    }
  }
}

https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md

This has helped me remove the postpackage cp scripts

Adding my actual ng-package.json for benefit of others. I wanted to copy the assets folder and all its contents to the library and publish it along with it.

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/common",
  "assets": [
    "assets"
  ],
  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "common": "common"
    }
  }
}

The assets folder is in the library root directory. this helps to copy the entire assets folder and the contents inside it and add it to the library, so that you can use it as @include "@node_modules/your-library/assets/styles/main.scss"

Mahesh Kumar
  • 333
  • 3
  • 5
  • Please, a complete example – Sebastián Rojas Mar 12 '20 at 18:52
  • Added the sample of ng-package for copying the assets folder. unfortunately I dont have a complete library as an example. – Mahesh Kumar Mar 14 '20 at 14:07
  • Doesn't work. I'm Angular v8.3.20 and on a projectType: library I got: ERROR: Configuration doesn't match the required schema. Data path "" should NOT have additional properties (assets). – Akostha Apr 07 '20 at 11:40
  • @Akostha You need to define this in the ng-package.json of the library. – Silvos May 28 '21 at 05:51
  • 1
    @Silvos I did it in the ng-package.json, but weirdly with the last version of angular, no files are copied... And still have then error at bundling. – glihm Sep 29 '21 at 04:06
  • @Silvos ok then.. I am trying to copy a wasm-glue.js file.. but assets are copied AFTER the bundling.. So I'm completely stuck because I don't find "hook" that allows me to copy wasm-glue.js before FESM2015 bundling happens. – glihm Sep 29 '21 at 04:26
20

There's an official issue for that question here. It's actually quite simple to include images and the like to your library: You can just copy them to the dist folder manually after ng-packagr has done its thing.

However, it's more difficult to automate the extraction of those files in projects that'll use your library. In the issue referenced above BenjaminDobler suggests to add the following mapping to the .angular-cli.json file of any consumer project:

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

I feel this is more of an NPM issue, though, and there also are bare NPM solutions for it like pkg-assets and npm-assets.

kremerd
  • 1,496
  • 15
  • 24
9

It can be automated on Linux with post* script

"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
  • 7,997
  • 3
  • 56
  • 43
3

I also got same problem when I packaging using ngPackagr. So I wrote my own small node script to copy them to the dist folder manually.

npm install wrench

create new js file in the root 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!");

add build script to package.json like below,I called it as 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"
  }

After you run

npm run packagr

Also run our script

npm run manual:assets-copy

It'll copy them to the dist folder manually.

Isanka Thalagala
  • 1,625
  • 3
  • 16
  • 32
1

Try to use "postbuild". It works for me.

on package.json

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

IMPORTANT... when to execute the build uses:

/> npm run build

Then the "postbuild" will execute automatically. It will not execute if you uses only "ng build".

Akostha
  • 679
  • 7
  • 8