library - Incluye "activos" en tu biblioteca angular 6

ng generate library

Question

Han pasado semanas, que busco una solución. Creé (con ng generar biblioteca) una biblioteca con la interfaz de usuario para nuevos proyectos web aquí en el trabajo ... de hecho, cada component de esa " template library " tiene el ViewEncapsulation.None . No hay ViewEncapsulation.None ... Sé que no es como deberíamos Use Angular , pero nos permitiría reutilizar todo el trabajo duro que se ha hecho en años anteriores.

Quiero "empaquetar" las hojas de estilo (.css files) en la library de manera que cuando alguien haga un " npm install templatelib " obtendrá todos los estilos y fuentes incluidos automáticamente en su aplicación, sin necesidad de hacerlo manualmente. Copia los styles y fonts en su src/app .

Quiero darles a mis usuarios una unidad atómica de una manera en que alguien solo necesita establecer una template-lib-tag en su app.component.html y todos están configurados ... entonces solo tendrían que agregar los components content que Quiero mostrar / usar dentro del diseño de plantillas.

He intentado casi todo lo que pude encontrar para "empaquetar" los activos, pero o bien obtengo errores que indican que la Data path "" should NOT have additional properties(styles) . cuando intento agregar activos o estilos a angular.json ... o no hace lo que quiero que haga, lo que resulta en errores que no pueden encontrar los activos durante el servicio ng .

¿Soy demasiado exigente de las bibliotecas angulares? ¿O es una biblioteca llena de components y su CSS no una unidad atómica que puedo plug a cualquier otra aplicación Angular?

¿Qué estoy haciendo mal / malentendido, y cómo debemos "empaquetar" los activos en nuestra biblioteca para que viajen a lo largo de la instalación del paquete?

Gracias por aclarar con antelación.

Answer 1

Ya estaba en el camino correcto con su solución con ViewEncapsulation.None . Puede crear un componente contenedor en la biblioteca que incluya todos los estilos que necesita globalmente. Luego use el componente como etiqueta raíz en su aplicación como sugiere en su publicación. Los estilos se incluyen automáticamente en toda la página.

Aquí es cómo se ve un componente de muestra:

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

Puede importar muchos archivos css en los StyleUrls como ve en mi muestra. Luego simplemente agregue esto como la etiqueta raíz en su plantilla app.component y los estilos se aplicarán globalmente a toda la página. No hay necesidad de referenciar nada en el angular.json.

Ejemplo de componente de aplicación:

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