Créer une librairie Angular ! Désormais très facile.
Ce tuto vous accompagne de la création à la publication

L‘utilisation des librairies est devenue une pratique quasi incontournable dans le monde du développement. Elles permettent d’éviter la duplication de code, minimiser le temps et le coûts de la maintenance.
Angular 6 vient d’être publié. Beaucoup d’améliorations ont été apportées à Angular CLI. Notamment, l’intégration de ng-packagr. Celui-ci permet de générer et de construire facilement des bibliothèques Angular.
Dans ce chapitre, vous allez découvrir comment créer des composants Angular réutilisables dans plusieurs projets et aussi la procédure de publication et de mise à jour npm.
Nous allons créer une librairie de saisie intuitive permettant de suggérer des noms de pays dès la saisie du premier caractère.
Enfin, nous découvrirons comment publier cette librairie sur le register npm. Le code de ce tutorial est disponible sur github (Code source ici)
Pré-requis
- Des connaissances JavaScript / TypeScript
- Ayant déjà développé en Angular 2/4/5/6
- Environment Angular version 6
Etape 1 : Génération d’un projet Angular
Nous commençons donc par générer un projet Angular.
ng new project-ng6-lib-app
cd project-ng6-lib-app
ng serveRendez-vous sur votre navigateur, l’application par défaut doit tourner en localhost sur le port 4200.
Vous devriez donc voir l’équivalent de la capture d’écran ci-dessous:

Etape 2: Génération d’une librairie
Maintenant, nous allons générer notre première librairie, que nous allons appeler : am-autocomplete-ng6-lib (début de la chaîne présente mes initiales)
Pensez à donner des noms non pris à vos librairies. Sinon votre publication npm sera rejetée.
Assurez-vous bien que vous êtes sur la racine du workspace, au même niveau que package.json. Ensuite, exécutez la commande ci-dessous :
cd project-ng6-lib-app
ng generate library am-autocomplete-ng6-lib --prefix=am
Le paramètre--prefix permet de créer un composants facile à distinguer, en fonction de vos règles de nommage. Si ce paramètre n’est pas renseigné, Angular CLI appliquera le prefix lib par défaut.
La librairie est créée dans project-ng6-lib-app/projects. Elle contient par défaut les éléments d’un composant classique Angular (template, services, module, css, spec …). La seule différence, est la présence du fichier public_api.ts qui lui considéré comme point d’entrée de votre librairie. Son rôle est d’exposer les composants, modules, services de la librairie, afin de les rendre visible.
La figure ci-dessous illustre la structure du projet :

Etape 3: Réaliser quelques développements pour enrichir notre librairie
Dans cette partie, nous allons développer un champ d’auto-complétion, qui permettra de suggérer les noms de pays à la saisie du premier caractère.
Nous allons faire appel à un service REST publique proposé par : https://restcountries.eu.
la requête que nous allons exécuter est : https://restcountries.eu/rest/v2/name/${term}
- Nous commençons par la création du service (am-autocomplete-ng6-lib.service.ts):
- Ensuite, nous passons au composant(am-autocomplete-ng6-lib.component.ts):
N’oubliez pas les imports/exports du module am-autocomplete-ng6-lib.module.ts. Surtout le CommonModule.
import { NgModule } from '@angular/core';
import { AmAutocompleteNg6LibComponent } from './am-autocomplete-ng6-lib.component';
import { CommonModule } from '@angular/common';@NgModule({
imports: [CommonModule],
declarations: [AmAutocompleteNg6LibComponent],
exports: [AmAutocompleteNg6LibComponent]
})
export class AmAutocompleteNg6LibModule { }
Etape 4: Génération de la librairie
Dans cette étape, nous allons builder notre librairie. La commande CLI qui permet de le faire est la suivante:
cd project-ng6-lib-app
ng build --prod am-autocomplete-ng6-libA la fin de l’exécution, votre package sera créé dans le répertoire: project-ng6-lib-app/dist/am-autocomplete-ng6-lib.

Etape 5: Test en local
Maintenant que nous avons généré notre librairie, nous devons voir le rendu sur une interface test.
Dans notre application: project-ng6-lib-app/src/app, nous allons suivre les instructions suivantes :
- Importer le module dans app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AmAutocompleteNg6LibModule } from 'am-autocomplete-ng6-lib';@NgModule({
declarations: [AppComponent],
imports: [ BrowserModule, AmAutocompleteNg6LibModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- Ajouter le tag de notre lib dans le template (app.component.html)
<am-am-autocomplete-ng6-lib
placeholder="put your country here ...
(selectedAddress)="onSlectedCountry($event)">
</am-am-autocomplete-ng6-lib>
<br>
<p>You selected : {{selectedItem}} </p>
<hr>
<p>Use the component with défaut value </p>
<am-am-autocomplete-ng6-lib> </am-am-autocomplete-ng6-lib>- Ajouter la variable selectedItem et la fonction onSlectedCountry()
export class AppComponent {
selectedItem = '';
onSlectedCountry(slectedItem) {
this.selectedItem = slectedItem;
}
}Et voici la démo on live :
Etape 6: Publication sur npm
Dans cette partie, nous allons voir comment publier et mettre à jour notre librairie sur le register publique npm. Ces étapes sont très explicites sur la documentation publique de npm.
- Rendez vous sur votre dossier dist :
cd dist/am-autocomplete-ng6-lib- Avoir un compte npm est obligatoir, si ce n’est pas le cas, voici le lien pour le faire. sinon, vous pouvez le faire directement en ligne de commande :
npm adduser
username: youremail@youremail.com
password: ######
email (this is public): emailpublic@emailpublic.com //You can check creation using:
npm config ls
- Nom et la version du package:
Dans la publication npm, le nom et la version sont très importantes. Vous ne pouvez pas renseigner un nom de package déjà utilisé et vous ne pouvez pas re-déployer le même package avec la même version, il faut donc penser à l’incrémentation de version à chaque publication.
{
"name": "am-autocomplete-ng6-lib",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0"
},
.......- Enfin, lancer la publication.
Mettez vous au même niveau que package.js de votre librairie: dist/votre-lib et exécutez la commande ci-dessous :
npm publish
Votre librairie désormais disponible sur le npm. vous n’avez qu’à lancer la commande npm install votreLib dans votre nouveau projet et bénéficier des fonctionnalités développées dans le composant.
- Mise à jour du packet
Publier une mise à jour nécessite une incrémentation de version et une publication à l’aide la commande npm publish.
Résumé
Je vous récapitule ce cours en quelques lignes de commandes, qui vous seront peut-être utiles dans vos projets:
Etape 1 : Génération d’un projet Angularng new project-ng6-lib-app
cd project-ng6-lib-app
ng serve
==> testez sur localhost:4200
----------------
Etape 2: Génération d’une librairiecd project-ng6-lib-app
ng generate library am-autocomplete-ng6-lib --prefix=am
----------------
Etape 3: Développement du composant (lib)N’oubilez pas la configuration des imports/exports du module de votre lib.
----------------
Etape 4: Builder la librairiecd project-ng6-lib-app
ng build --prod am-autocomplete-ng6-lib
----------------
Etape 5: Test en local (YourProject/src/app)intégrez votre lib dans le composant principal de l’appli
----------------
Etape 6: Publication sur npmcd dist/am-autocomplete-ng6-lib
npm adduser
username: youremail@youremail.com
password: #####
email (this is public): emailpublic@emailpublic.com//You can check creation using:
npm config ls
npm publish
C’est la fin de ce chapitre, j’espère qu’il vous a plu et à très bientôt.
