Créer une bibliothèque personnalisée avec Angular

Créer une bibliothèque personnalisée

Pour commencer, vous devrez d’abord créer un nouveau projet en utilisant le CLI.

Nous devrions être tous bons à ce stade. À partir d’ici cependant, nous devons utiliser une commande que le CLI fournit dans Angular 6 ou plus, qui est ng generate. Cette bibliothèque ng generate est conçue pour créer une bibliothèque partagée personnalisée. Ensuite, en donnant un nom à votre bibliothèque, elle sera ajoutée à un projet séparé, qui est appelé un espace de travail.

Lorsque vous faites ng new, vous obtenez un espace de travail avec un projet dedans, qui est votre projet web. Ce ng generate va ajouter une deuxième version dans l’espace de travail afin que nous puissions réellement tester notre bibliothèque dans l’application Angular sans publier sur npm ou toute autre ressource. Maintenant, cela modifie le fichier tsconfig et cela va être mis à jour pour que le projet Angular, le projet séparé dans l’espace de travail, comprenne comment accéder à la bibliothèque, la bibliothèque partagée que nous allons construire.

Puis vous pouvez construire votre bibliothèque en utilisant la commande ng build et ensuite lui donner le nom de votre projet, comme ceci :

Vous pouvez utiliser ceci et le tester directement dans l’autre projet Angular qui est dans votre espace de travail. Ainsi, il est très facile de le faire sans avoir à publier dans npm quelque part. Après cela, nous voudrions publier dans npm une fois que nous sommes prêts à partir, que nous l’avons testé et qu’il semble bon, parce que nous voulons être en mesure de tirer de npm, que ce soit le npm qui est juste là où tout le monde peut aller, ou si c’est un npm interne que vous pouvez avoir dans votre entreprise. Nous voulons tirer de ceux-ci dans nos différentes applications afin de pouvoir les réutiliser. Il y a un lien si vous êtes nouveau pour contribuer à npm qui est là.

Nous devons faire ceci pour aller dans le dossier dist et il y aura un fichier package.json inclus. Il sera utilisé pour publier vers npm. Nous avons seulement besoin d’écrire la commande suivante:

Donc, devrions-nous voir comment les choses sont différentes dans notre solution ? Allons-y ☺.

So tout d’abord, vous remarquerez que nous avons un dossier de projets. Nous avons aussi maintenant un tsconfig mis à jour comme vous pouvez le voir dans l’image suivante :

Il a ajouté les chemins où finalement nous allons construire notre dossier dist une fois que nous ferons une construction et c’est pourquoi vous devez construire d’abord, avant de pouvoir faire cela parce que TypeScript va en fait regarder cela pour pouvoir faire fonctionner tout cela.

Maintenant, l’autre grande chose qui a été faite est notre fichier angular.json a un nouveau projet dedans :

Donc, nous avons un projet secondaire juste ici, qui est notre braga-lib et vous remarquerez le chemin là pour la racine du projet. Maintenant, tout le reste nécessaire pour construire et tester est inclus. Donc, ce sont les principales choses qu’il modifie. Maintenant, ce que nous pouvons faire à partir d’ici est de faire des changements à notre bibliothèque. Donc, si nous entrons, vous verrez des fichiers normaux ici et un dossier src et puis ce qu’ils ajoutent est une lib comme vous pouvez le voir:

La lib va avoir notre composant, notre module et même un service si vous le voulez. Si vous ouvrez le fichier du composant, il dit à peu près simplement « braga-lib fonctionne ! ».

Notez maintenant le sélecteur « lib-braga-lib ». Vous pouvez le changer, mais pour l’instant, laissons-le tel quel et utilisons-le sur notre projet Angular. Jetons un coup d’oeil à ça ? Oh oui ☺