Включите "активы" в свою угловую библиотеку 6

Уже несколько недель я ищу решение. Я создал (с библиотекой ng generate) библиотеку с пользовательским интерфейсом для новых веб-проектов здесь на работе... на самом деле каждый component в этой " template library " имеет ViewEncapsulation.None set... Я знаю, что это не так, как мы должны используйте Angular, но это позволит нам повторно использовать всю тяжелую работу, которая была выполнена в предыдущие годы.

Я хочу "упаковать" таблицы стилей (.css files) в library таким образом, что, когда кто-то делает " npm install templatelib ", он получит все стили и шрифты, автоматически включенные в их приложение, не нужно вручную скопируйте styles и fonts в их src/app.

Я хочу дать своим пользователям атомную единицу таким образом, что кому-то просто нужно установить template-lib-tag в свой app.component.html и все они установлены... тогда им нужно будет только добавить components content они хотите показать/использовать внутри шаблонов.

Я пробовал почти все, что мог найти, чтобы "упаковать" активы, но я либо получаю ошибки, заявляя, что Data path "" should NOT have additional properties(styles). когда я пытаюсь добавить активы или стили в angular.json... или он не делает то, что я хочу, чтобы он приводил к ошибкам, что он не может найти активы во время обслуживания ng.

Я слишком требовательна к Угловым библиотекам? Или библиотека, заполненная components а их CSS не атомная единица, которую я могу plug к любому другому Угловому приложению?

Что я делаю неправильно/непонимаю, и как мы должны "упаковывать" активы в нашу библиотеку, чтобы они путешествовали при установке пакета.

Спасибо за разъяснение заранее.

ОТВЕТЫ

Ответ 1

Вы уже были на правильном пути с вашим решением с помощью ViewEncapsulation.None. Вы можете создать компонент контейнера в библиотеке, который включает в себя все стили, которые вам нужны во всем мире. Затем используйте компонент в качестве корневого тега в своем приложении, как вы предлагаете в своем сообщении. Затем стили автоматически включаются во всю страницу.

Вот как выглядит образец компонента:

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 {
}

Вы можете импортировать много файлов css в стилях, как вы видите в моем примере. Затем вы просто добавляете это как корневой тег в свой шаблон app.component, а стили применяются глобально на всю страницу. Не нужно ссылаться ни на что в angular.json.

Пример компонента приложения:

<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="#" onclick="location.href='https://angular.io/tutorial'; return false;">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="#" onclick="location.href='https://github.com/angular/angular-cli/wiki'; return false;">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="#" onclick="location.href='https://blog.angular.io/'; return false;">Angular blog</a></h2>
  </li>
</ul>
<i class="fas fa-stroopwafel"></i> <!--This uses a style that comes from the library-->
</lib-assetlib>