Appuyez sur Entrée pour voir vos résultats ou Echap pour annuler.

DIY 1 – Créer de A à Z un module Angular

C’est avec plaisir que je débute aujourd’hui une nouvelle série d’articles 😁. Dans notre live du lundi 24 septembre sur Twitch sur les petits trucs qu’on a pour être un bon programmeur, nous avons apporté l’idée de réinventer la roue. L’objectif n’est pas publier un nouveau framework ou librairie, mais bien d’explorer la mechanique derrière ceux-ci pour bien comprendre leur fonctionnement. DIY (Do It Yourself) présentera des prototypes de composants uniquement pour le plaisir de le faire. Aujourd’hui, on commence par le commencement. On parle d’un module Angular.

Objectif

Créer de A à Z un module Angular réutilisable par d’autres équipes en le publiant sur npm. Vous verrez comment le faire sur le registre public et sur une instance Verdaccio locale.

Plan

  1. Créer une application test
  2. Créer un projet « librairie » à l’intérieur de cette application
  3. Tester la librairie
  4. Publier sur npm
  5. Publier sur Verdaccio local
  6. Installation standard via npm

Prérequis

  • Une base en Angular
  • Angular CLI
  • NodeJS
  • Un environnement de développement

Étape 1 – Créer une application test

Créons une nouvelle application Angular. Cette dernière servira à essayer la librairie en cours de développement. Depuis un répertoire vide, ouvrez une invite de commande et tapez :

Étape 2 – Créer un projet « librairie » à l’intérieur de cette application

Supposons que nous voulons créer un module de tâches à faire.

Créer la librairie via Angular CLI :

Ceci crée un répertoire « projects » à la racine de l’application. Ce répertoire contient la librairie créée, qui elle-même contient un service, un composant et un module. Puis, un fichier  public_api.ts  devrait se trouver sous projects/todo/src. Ce fichier exporte les éléments de la librairie qui seront utilisables après avoir été installés via npm.

Remarquez aussi dans TodoComponent le préfix du sélecteur selector: 'lib-todo'. Par défaut, il est définit à lib, mais peut être modifié à la génération :

Ceci créerait le composant ezo-todo.  Codons maintenant cette librairie :

todo.ts

Notre modèle de données. Les tâches sont créées à « non-faites ».

todo.module.ts

Nous devons importer FormsModule pour faire le 2-way binding via ngModel et CommonModule pour utiliser ngFor.

todo.component.ts

Étape 3 – Tester la librairie

Pour compiler la librairie, utilisez Angular CLI depuis une invite de commande à la racine de l’application, comme ceci :

Ceci compilera la librairie dans le répertoire dist à la racine de l’application. Pour l’utiliser, importer le module comme s’il venait de npm dans le app.module.ts de l’application de test :

Puis utilisez le composant comme normalement :

app.component.html

Étape 4 – Publier sur npm

Créer premièrement un compte sur npmjs.com. Puis, ouvrez une invite de commande dans le répertoire dist/todo. Il est important de mentionner ici que le nom de la librairie ( package.json) devrait être unique sur npm. Assurez-vous de nommer correctement votre librairie à la génération.

Puis, toujours dans dist/todo, exécutez :

Répondez aux questions… puis :

That’s it 😀

Étape 5 – Publier sur Verdaccio local

Verdaccio est une instance de npm qui roule en local. Ceci sert à émuler comment vous pourriez utiliser cet outil pour monter un registre privé afin d’y déposer vos librairies. Pour l’installation :

Une fois installé, roulez-le!

Sur mon poste, l’instance a été démarrée à l’adresse http://localhost:4873. Premièrement, il faut configurer npm pour qu’il se connecte sur cette instance au lieu du registre public de npm. Pour ce faire, exécutez :

Ceci configurera votre fichier .npmrc qui se trouve dans votre répertoire utilisateur afin qu’il pointe vers le registre local. Puis, vous pouvez vous créer un compte utilisateur et vous authentifier via :

Puis vous authentifier sur le registre via npm login. Finalement, publier avec npm publish!

Bonus : Accédez à l’URL http://localhost:4873 depuis un navigateur lorsque l’instance Verdaccio roule pour voir les packages disponibles 🙂

Étape 6 – Installation standard via npm

Depuis n’importe quel projet, exécutez  npm install pour ajouter votre librairie, comme vous le faites déjà pour les autres!

Étape 7 – Publier un mise-à-jour

Puisque la librairie évolue dans le temps, vous aurez sûrement à effectuer des mises-à-jour. Pour y parvenir, vous devez simplement vous assurer que la propriété version du package.json est bien incrémentée, puis réexécutez simplement npm publish.

Conclusion

Aujourd’hui, vous avez appris à créer une librairie Angular de A (répertoire vide) à Z (publiée sur npm) dans le câdre du premier article de la série DIY. Si vous avez des commentaires, des suggestions de futurs articles dans cette série, n’hésitez surtout pas à communiquer directement avec sur les réseaux sociaux, ou utilisez simplement la zone de commentaires ci-dessous.

Si vous avez apprécié, vous pouvez nous supporter en nous offrant à boire! Sinon, je vous invite à lire ou relire cet article sur les principes SOLID et ces 10 secrets sur JS.

De plus, pour ne rien manquer, abonnez-vous à Twitch et à ce blogue! Tout le contenu est gratuit et sans publicité, donc n’ayez pas peur de recevoir des pourriels de notre part. Nous faisons ça pour vous 🙂

Suivez-nous par courriel!

Saisissez votre adresse courriel pour vous abonner au blog d'Ezo et recevoir une notification de chaque nouvel article par email.

Rejoignez 11 autres abonnés