Unable to use styles/scripts inside Angular Libraries

[rpasechnikov]

I would like to be able to use styles/scripts and hopefully other NPM modules inside of Angular 6.0 Libraries. I am able to do so in standard Angular projects but not inside of libraries as they do not contain a relevant angular.json file and the ng-package.json file provided does not contain the desired:

"styles": [ "src/styles.css" ], "scripts": []

I am not sure if this is a missing feature, currently in development or whether there are no plans to support this. It seems like this is an extremely basic feature to have for a module application design.

Hopefully I'm just missing something obvious! 😸

Bug Report or Feature Request (mark with an x)

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

Area

- [x ] devkit
- [ ] schematics

Versions

Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.0.7
NPM: 6.0.0

Repro steps

The log given by the failure

N/A

Desired functionality

I should be able to use NPM packages, styles and scripts inside of angular library projects.

Mention any other details that might be useful

N/A

[alan-agius4]

Considering that you are building a library, I don't see how something like scripts and styles would and should work. In a library you have dependencies and peerDependencies to depend on external scripts and styles that are in a separate node library.

styles and scripts are used for global scripts which they should fall under application responsibility IMHO. However, maybe I am missing a use case or something.

[rpasechnikov]

Thanks for the reply! I am an Angular newbie so I could very well be missing something obvious or looking at this from the wrong perspective.

The use case that I am thinking about is something along the lines of:

• Creating a common UI components library with controls used by multiple applications
• This component library will have all of its own styles, bootstrap, etc dependencies, which will ensure consistent styling across different applications
• The UI library may use other NPM packages like text editor, calendar, charts, etc and will style all these and expose to consumers

The end goal of this approach is to have a number of micro-front end Angular applications, build on micro-service back-end, which all have a consistent UI look and feel.

I come from a .Net background, so I am thinking of it from the perspective of creating something like a WPF control library project, which is hosted on a private Nuget server and fetched by other applications, which consume it to construct their UIs. Any changes to the control library, will propagate throughout the other applications.

[alan-agius4]

Hi, I still don't see the reason why you'd need style and script configuration. What exactly would you see these 2 options do inside a library? Copy of the css/js files to the dist folder and your application will eventually referencing these files together with the library itself?

[rpasechnikov]

That's pretty much it. As far as I understand, setting up style and script references will fall to the consuming application, which I would prefer to avoid. I would rather the shared library explicitly define its own dependencies so the only thing that the parent has to do is to consume it.

[filipesilva]

I'm sorry to say this but I'm going to have to ask you to open this issue in https://github.com/dherges/ng-packagr instead.

Building apps and libraries is done through a different build pipeline, and so they support different things. Libraries are built using ng-packagr, and when requesting general features for libraries that is the repository to use.

[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.}