Unable to package assets in library

[cghislai]

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).

Additionally, the json data path is not correctly reported in the error message.

Versions

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.

[filipesilva]

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.

[cghislai]

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.

[lautarobock]

Including styles will be nice option too

[jhuenges]

There is a workaround posted here: #10869

[jimbarrett33]

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.

[alan-agius4]

Closing as duplicate of #11071

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}