Angular-cli: Unable to package assets in library

Created on 19 May 2018 · 7Comments · Source: angular/angular-cli

A library project cannot specify assets to be packaged in the npm package.
Adding an assets entry in the angular.json produces an error:

"build": {
  "builder": "@angular-devkit/build-ng-packagr:build",
  "options": {
    "tsConfig": "projects/my-lib/tsconfig.lib.json",
    "project": "projects/my-lib/ng-package.json",
    "assets": [
      "projects/my-lib/src/assets"
    ]
  },

Schema validation failed with the following errors:
  Data path "" should NOT have additional properties(assets).



md5-5f3d15936acea50b9b41743520900c1b



Angular CLI: 6.0.3
Node: 10.1.0
OS: linux x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.6.3
@angular-devkit/build-angular      0.6.3
@angular-devkit/build-ng-packagr   0.6.3
@angular-devkit/build-optimizer    0.6.3
@angular-devkit/core               0.6.3
@angular-devkit/schematics         0.6.3
@angular/cli                       6.0.3
@angular/pwa                       0.6.3
@ngtools/json-schema               1.1.0
@ngtools/webpack                   6.0.3
@schematics/angular                0.6.3
@schematics/update                 0.6.3
ng-packagr                         3.0.0-rc.5
rxjs                               6.1.0
typescript                         2.7.2
webpack                            4.8.3

Repro steps

Create a new angular-cli workspace: ng new
Generate a new library project: ng g library
Create and put some assets in your library src/assets folder
Edit angular.json to include the assets, like in the above example.
Build your library with ng build.

Observed behavior

The above-mentioned error is thrown.

Desired behavior

The assets should be copied in the dist folder, like the applications, and. packaged in the npm module.

Mention any other details that might be useful (optional)

angular applications are able to import assets from npm modules. angular-cli libraries should be able to pack them in the npm module just like the applications.
Shared components may rely on assets to function properly.

feature

Source

cghislai

👍32

Most helpful comment

Including styles will be nice option too

lautarobock on 23 May 2018

👍15

All 7 comments

To be clear, there is no recommended way of packaging assets for libraries. ng-packagr itself, which is what runs with the library builder, offers no such functionality.

filipesilva on 21 May 2018

If the assets were copied to the dist folder just like for the applications (with the possibility to fine-tune the mapping in angular.json), then npm publish would include them in the archive if im not mistaken. It would be up to the developer to specify how they should be arranged by editing the angular.json file.

cghislai on 21 May 2018

👍6

Including styles will be nice option too

lautarobock on 23 May 2018

👍15

There is a workaround posted here: https://github.com/angular/angular-cli/issues/10869

jhuenges on 14 Jun 2018

I'll throw this out there as a (non-ideal) workaround that doesn't require gulp. The idea is to use the "root" library component created by the Angular CLI to hold the global styles for the Library. It would have an empty template but with encapsulation: ViewEncapsulation.None which would cause its styles to be added to global styles. Then include the (empty) template tag somewhere in the app or in all your library components that need the styles. It seems to work OK.

Also, it doesn't have to be the root library component, it can be any component in the library. And this only applies to styles. Images would still have to be inlined.