L’une des choses qui a été introduite dans Angular 6 était la possibilité de créer et de construire des bibliothèques avec l’interface de ligne de commande angulaire.

Lorsque j’ai utilisé cette fonctionnalité pour la première fois, j’ai été ravi de la simplicité, car s’il était techniquement possible de créer des bibliothèques en utilisant des versions antérieures d’Angular, c’était une expérience tout à fait frustrante et attristante.

Dans cet article, je vais vous expliquer les éléments clés du développement des bibliothèques Angulaires :

  • Cas d’utilisation courants des bibliothèques angulaires.
  • Création d’une bibliothèque à l’aide de l’interface de ligne de commande angulaire.
  • Accélération du développement des bibliothèques angulaires avec npm link.
  • Publication de votre bibliothèque.

Le code de démonstration complet de la bibliothèque que nous créons peut être trouvé ici.

Cas d’utilisation pour les bibliothèques angulaires

D’après mon expérience, il existe 2 cas d’utilisation courants pour les bibliothèques angulaires:

  1. Construire une bibliothèque de composants réutilisables pour le partage entre applications.
  2. Création de fonctionnalités de couche de service partagée – par exemple. un client pour travailler avec une source de données externe telle qu’une API.

Bien qu’il existe de nombreux cas où une bibliothèque angulaire convient bien à un projet, il convient de se demander si votre cas d’utilisation en est un, car il introduit des frais de maintenance. N’oubliez pas que vous pouvez toujours écrire des fonctionnalités dans le cadre d’un module angulaire partagé au sein de votre application et les extraire dans une bibliothèque si nécessaire.

Création d’un projet de bibliothèque Angulaire

Nous allons créer une bibliothèque Angulaire, ainsi qu’une application de démonstration pour consommer cette bibliothèque. Nous pouvons les créer avec les commandes suivantes:

ng new example-component-library --create-application=falsecd example-component-libraryng generate library example-component-libraryng generate application example-component-library-app

L’utilisation de l’indicateur --create-application=false empêche Angular de créer une application avec le nom ‘example-component-library’, qui est le nom que nous voulons donner à la bibliothèque elle-même et non à l’application de test, comme expliqué ici.

Si nous regardons maintenant à l’intérieur de l’espace de travail que nous venons de créer, nous pouvons voir qu’il existe un dossier projects contenant un sous-dossier pour chacune de la bibliothèque (example-component-library) et de l’application (example-component-library-app) que nous venons de générer. Il existe également un troisième dossier contenant un projet de test e2e, que nous pouvons ignorer.

Construisons maintenant notre bibliothèque et voyons ce qui se passe:

ng build --project=example-component-library

Si nous regardons dans le dossier dist, nous verrons que notre bibliothèque a été construite et qu’à l’intérieur du dossier de construction, nous avons un certain nombre de dossiers différents contenant l’application dans différents formats de modules adaptés aux différents consommateurs, ainsi qu’un dossier contenant des définitions TypeScript.

  • paquets – format de module UMD.
  • esm5 – format de module qui utilise principalement es5, mais aussi la syntaxe d’importation/ exportation d’es6.
  • esm2015 – format de module qui utilise es2015/es6.
  • fesm5 – version aplatie d’esm5.
  • fesm2015 – version aplatie de peerDependenciesesm2015.
  • lib – Définitions dactylographiées pour la bibliothèque.

Ce format s’appelle Angular Package Format, et c’est le format utilisé comme sortie de ng-packagr, l’outil utilisé par Angular CLI pour transpiler les bibliothèques.

Structuration de votre projet de bibliothèque angulaire

Le contenu de la bibliothèque ressemble actuellement à ceci:

Structure de dossier Initiale

Tout d’abord, supprimez les fichiers de module, de composant et de service existants example-component-library – nous n’en avons pas besoin.

Ensuite, nous ajouterons un composant, un tuyau et une directive. Nous suivrons un modèle d’ajout d’un composant par module – cela permettra à une application consommatrice d’importer uniquement les modules de la bibliothèque qui l’intéressent, puis de secouer l’arborescence de tous les autres modules pendant le processus de construction. Je recommande fortement de le faire, car cela fera vraiment une différence dans la taille de vos bundles d’applications à mesure que la bibliothèque grandira.

ng generate module components/foong generate component components/foong generate module pipes/barng generate pipe pipes/bar/barng generate module directives/bazng generate directive directives/baz/baz

Après cela, notre bibliothèque devrait avoir la structure de dossiers suivante:

Structure de dossiers Finale

Bien sûr, cette structure peut être ajustée en fonction de vos préférences ou de celles de votre équipe, mais les choses importantes à garder à l’esprit sont:

  • Avoir un composant par module pour permettre tree shaking des modules / composants inutilisés.

    L’exception à cela est que les composants qui sont toujours utilisés ensemble doivent être conservés dans le même module – par exemple. Si vous implémentiez des onglets, un TabGroupComponent et TabItemComponent vivraient dans le même module.

  • Essayez d’éviter ou de limiter l’utilisation des importations de barils dans une bibliothèque angulaire

    Dans Angular 6, il y a des problèmes avec les importations de barils dans les bibliothèques et la construction AOT angulaire. Ces problèmes semblent être résolus dans Angular 7, mais je rencontre encore régulièrement des problèmes de confusion dus aux importations de barils et je soutiens donc cette recommandation d’utiliser uniquement le niveau 1 des importations de barils (ou simplement de les éviter entièrement).

Ensuite, nous devons ajouter chacun des composants que nous avons créés au exports de son module:

import { CommonModule } from '@angular/common';import { FooComponent } from './foo.component';import { NgModule } from '@angular/core';@NgModule({ declarations: , imports: , exports: })export class FooModule { }

Nous mettons maintenant à jour public_api.ts pour exporter tous les fichiers de la bibliothèque que nous souhaitons exposer à une application consommatrice:

/* * Public API Surface of example-component-library */export * from './lib/components/foo/foo.module';export * from './lib/components/foo/foo.component';export * from './lib/pipes/bar/bar.module';export * from './lib/pipes/bar/bar.pipe';export * from './lib/directives/baz/baz.module';export * from './lib/directives/baz/baz.directive';

Maintenant, tout ce que nous avons à faire est de reconstruire la bibliothèque, et elle sera prête à consommer la bibliothèque à partir d’une application.

ng build --project=example-component-library

Consommer notre bibliothèque angulaire

Pendant le développement, la meilleure façon de consommer notre bibliothèque est d’utiliser npm link. Cela nous permettra de créer un lien symbolique à partir d’un répertoire du dossier node modules de notre application consommatrice vers l’application compilée dans le dossier dist de la bibliothèque.

cd dist/example-component-librarynpm link

Nous pouvons lier un projet Angulaire à cette bibliothèque de n’importe où sur notre machine locale. À partir du dossier racine du projet:

npm link example-component-library

Si nous exécutons maintenant la bibliothèque avec l’indicateur watch, et en même temps exécutez ng serve dans une autre fenêtre de terminal.

ng build --project=example-component-libraryng serve

Cela nous permettra de développer une application et (une ou plusieurs) bibliothèques liées simultanément, et de voir l’application recompiler à chaque modification du code source de la bibliothèque.

En production

Pour la production, nous publierons notre bibliothèque dans npm, puis la ferons installer dans l’application en utilisant npm install.

Tout d’abord, vous devrez créer un compte npm. Connectez-vous maintenant à partir de la ligne de commande:

npm login

À partir du dossier racine du projet:

cd dist/example-component-librarynpm publish

Notre package est maintenant publié sur npm (publiquement), et nous pouvons l’installer en l’ajoutant aux dépendances package.json et en exécutant npm install:

"dependencies": { ... "example-component-library": "~0.0.1"}

Dépendances de la bibliothèque

Si votre bibliothèque a des dépendances, celles-ci doivent être spécifiées comme dependencies ou peerDependencies dans le package.json de votre bibliothèque elle-même (et non le package.json à la racine du projet). Par exemple, dans le cas de notre bibliothèque simple, nous avons juste les dépendances suivantes:

"peerDependencies": { "@angular/common": "^7.1.0", "@angular/core": "^7.1.0"}

Angular est spécifié comme un peerDependency plutôt qu’un dependency afin d’éviter que l’application consommatrice installe plusieurs versions contradictoires d’Angular. Cet article contient de bonnes informations sur peerDependencies et quand les utiliser.

Conclusion

Nous avons vu comment nous pouvons créer une bibliothèque de composants Angulaires pouvant être consommée par plusieurs applications Angulaires différentes, ainsi que comment nous pouvons travailler avec des bibliothèques en développement et les publier pour la production. Ci-dessous, j’ai énuméré les ressources que j’ai trouvées utiles pour apprendre moi-même les bibliothèques Angulaires et pour écrire cet article.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.