Include "assets" in your angular 6 library

Question

It has been weeks now, that I search for a solution. I created (with ng generate library) a library with the UI in for new webprojects here at work... in fact every component in that "template library" has the ViewEncapsulation.None set... I know it's not the way we should use Angular, but it would allow us to reuse all the hard work that has been done in previous years.

I want to "pack" the stylesheets (.css files) into the library in a way that when somebody does an "npm install templatelib" he/she'll get all the styles and fonts automatically included in their application, no need to manually copy the styles and fonts in their src/app.

I want to give my users an atomic unit in a way somebody just needs to set a template-lib-tag in their app.component.html and they're all set... then they would only need to add the content components they want to show/use inside the templates design.

I've tried pretty much everything I could find to "pack" the assets, but I either get errors stating that the Data path "" should NOT have additional properties(styles). when I try to add assets or styles to the angular.json... or it doesn't do what I want it to do resulting in errors that it can't find the assets during ng serve.

Am I too much demanding of Angular Libraries ? Or is a library filled with components and their CSS not an atomic unit that I can plug into any other Angular app ?

What am I doing wrong/misunderstanding, and how should we "pack" assets into our library so they travel along when installing the package.

Thanks for clarifying in advance.

Answer 1

You were already on the right track with your solution with ViewEncapsulation.None. You can make a container component in the library that includes all the styles you need globally. Then use the component as the root tag in your application as you suggest in your post. The styles are then automatically included to the whole page.

Here is how a sample component looks like:

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'lib-assetlib',
  template: '<ng-content></ng-content>',
  styleUrls: ['assetlib.component.css', 'libstyles.css'],
  encapsulation: ViewEncapsulation.None
})
export class AssetlibComponent {
}

You can import many css files in the styleUrls as you see in my sample. Then you just add this as the root tag in your app.component template and the styles are applied globally to the whole page. No need to reference anything in the angular.json.

Example app component:

<lib-assetlib>
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
<i class="fas fa-stroopwafel"></i> <!--This uses a style that comes from the library-->
</lib-assetlib>