Angular-cli: Library support for assets, styles or scripts.

[mattezell]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [X] feature request

Area

- [X] devkit
- [ ] schematics

Versions

Node: 8.11.3
NPM: 5.6.0
OS: Windows 10 Pro
Angular CLI 6.0.7
Ng-packagr: 3.0.1
Devkit Core: 0.6.7

Repro steps

Attempt to provide assets, styles or scripts to a library project and you will encounter a schema validation error due to the these properties not being supported currently for library projectTypes.

The log given by the failure

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

Desired functionality

I would like to be able to provide assets, styles and scripts in the same way that they can be provided to an application projectType.

Mention any other details that might be useful

I believe that ultimately this relates to ng-packagr's schema for library packages. In searching for previously reported requests on this, I did find a 'nice to have' request that had been opened in the devkit repo, which now points to this repo (https://github.com/angular/devkit/issues/680).

[bniedermeyer]

This would be great to see. If you need this to work now though, there is an existing workaround. Essentially you need to add a post-build script to your project or in something like Gulp to manually copy your assets to dist/.

See https://github.com/dherges/ng-packagr/issues/839#issuecomment-386791207 for an example of someone doing something similar to bundle their scss files.

[mattezell]

Thanks, @bniedermeyer - this is exactly what we're currently doing in the meantime ;)

[victornoel]

@bniedermeyer @mattezell sorry if I'm thick, but where should this "post build" script go exactly? I'm trying to simply copy a scss file (not even bundling it) to the dist directory without having to run many commands.
Should I add something to the angular.json file? to the package.json file of the whole workspace? to the package.json file of the lib (in projects/.../)?

Thanks :)

[bniedermeyer]

@victornoel In my project I have a "post-build" script in the root package.json that I call in my CI pipeline after the build completes. If you are publishing to npm from your local environment you could include it in theprepublishOnly npm hook so it's called automatically as part of the publishing process. See here for more info on that.

No matter what you would want any npm script added to the package.json at the root of your project though since that's the source of truth.

At first we just scripted it in the CI pipeline itself but found using npm scripts to be a bit more flexible.

[victornoel]

@bniedermeyer thx, I see, that sucks a bit but that's better than nothing ;)
I hope this will be supported by angular-cli soon :)

[vytautas-pranskunas-]

@bniedermeyer but if you copy it manually how can you refference it from your code?
for example you have path in your code: ../../../../asssets/test.js or even simpler: ./assets/test.js
and you copy test.j to dist folder? so? you code is not in the same place
and this is with any type of asset.

[bniedermeyer]

@vytautas-pranskunas- you will want to copy the files (either manually or by scripting it as part of your build process) before you package and publish your library. Then the files will be available in node_modules/your-library when you install the library.

An example of this pattern (although I don't think they use the same tools involved here) is found with Angular Material. They include assets in their library before it's published and then you import those assets as needed from node_modules (see here).

I have not included anything in assets that is required in my code - normally I just include things like css files. You could probably import the files like you would import anything else if you needed to reference it in code.

e.g.

import {myAsset} from 'your-library/assets/myAsset'

You will probably want to check the ng-packagr docs and make sure you don't need to do something like add a separate entry point though.

Note also that this is in regard to assets for your library. Normal assets for your application can stay where they are.

[vytautas-pranskunas-]

@bniedermeyer exactly but this i. Mport is not valid from my library. This is valid if you want to use asdets from outside but if i want to use 3thd party library in my source this will not going to work

[hughanderson4]

I dislike these solutions involving a post build step.
None of this can be applied when using ng build --watch=true
Developer workflow with HMR goodness is lost.
We need a built-in way to copy scss to dist without the post build hack.

[johncrim]

Looks like this is also covered in https://github.com/angular/angular-cli/issues/11071.

I'd love to see this too, but the workaround is only irritating; it isn't horrible.

[alan-agius4]

Duplicate of https://github.com/angular/angular-cli/issues/11071

[angular-automatic-lock-bot[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._}