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

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

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

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

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

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

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

Спасибо за уточнение заранее.

15
angular angular-library angular6

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 в styleUrls, как вы видите в моем примере. Тогда ты просто добавьте это в качестве корневого тега в своем приложении.шаблон компонента и стили применяются ко всей странице. Ничего не надо ссылаться на угловой.формат 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="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>
3