Включите "активы" в вашу угловую библиотеку - PullRequest
Новая
       8

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

0 голосов
/ 27 июня 2018

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

Я хочу "упаковать" таблицы стилей (.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). когда я пытаюсь добавить assets или styles в angular.json ... или он не выполняет то, что я хочу, что приводит к ошибкам, которые он не может найти активы во время нг подачи .

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

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

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

1 Ответ

0 голосов
/ 14 июля 2018

Вы уже были на правильном пути с вашим решением с 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, как вы видите в моем примере. Затем вы просто добавляете это как корневой тег в свой шаблон 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="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>
...