web-dev-qa-db-fra.com

Incluez des "actifs" dans votre bibliothèque angular 6

Cela fait des semaines maintenant que je recherche une solution. J'ai créé (avec ng generate library) une bibliothèque avec l'interface utilisateur pour de nouveaux projets Web ici au travail ... en fait, chaque component dans laquelle "template library" A le ViewEncapsulation.None set ... Je sais que ce n'est pas la façon dont nous devrions utiliser Angular, mais cela nous permettrait de réutiliser tous les disques le travail qui a été fait au cours des années précédentes.

Je veux "empaqueter" les feuilles de style (.css files) Dans le library de manière à ce que quand quelqu'un fait un "npm install templatelib" Il/elle obtiendra automatiquement tous les styles et polices inclus dans leur application, pas besoin de copier manuellement les styles et fonts dans leur src/app.

Je veux donner à mes utilisateurs une unité atomique d'une manière dont quelqu'un a juste besoin de définir un template-lib-tag dans leur app.component.html et ils sont tous ensemble ... alors ils n'auraient qu'à ajouter le contentcomponents qu'ils veulent afficher/utiliser dans la conception des modèles.

J'ai essayé à peu près tout ce que je pouvais trouver pour "emballer" les actifs, mais je reçois soit des erreurs indiquant que le Data path "" should NOT have additional properties(styles). quand j'essaie d'ajouter actifs ou styles au angular.json ... ou il ne fait pas ce que je veux qu'il en résulte dans les erreurs qu'il ne peut pas trouver les actifs pendant ng serve.

Suis-je trop exigeant des bibliothèques Angular? Ou une bibliothèque remplie de components et de leur CSS n'est pas une unité atomique que je peux plug dans n'importe quelle autre application Angular?

Qu'est-ce que je fais mal/malentendu et comment devrions-nous "empaqueter" les actifs dans notre bibliothèque afin qu'ils voyagent lors de l'installation du paquet.

Merci d'avoir clarifié à l'avance.

angularangular6angular-library
22
Michael Bruyninckx

Vous étiez déjà sur la bonne voie avec votre solution avec ViewEncapsulation.None. Vous pouvez créer un composant conteneur dans la bibliothèque qui inclut tous les styles dont vous avez besoin globalement. Utilisez ensuite le composant comme balise racine dans votre application, comme vous le suggérez dans votre message. Les styles sont ensuite automatiquement inclus dans la page entière.

Voici à quoi ressemble un exemple de composant:

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

Vous pouvez importer de nombreux fichiers CSS dans le styleUrls comme vous le voyez dans mon exemple. Ensuite, vous ajoutez simplement cela en tant que balise racine dans votre modèle app.component et les styles sont appliqués globalement à la page entière. Pas besoin de référencer quoi que ce soit dans le fichier angular.json.

Exemple de composant d'application:

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