Créer une librairie Angular ! Désormais très facile.

Adel MANI
Adel MANI
Sep 1, 2018 · 6 min read

Ce tuto vous accompagne de la création à la publication

Angular Librairie & npm

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
serve

Rendez-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-lib

A 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 :

Démo de la librairie

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 librairie
cd 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 librairie
cd 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 npm
cd 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.

Adel MANI

Written by

Adel MANI

Adel MANI, Computer Engineer.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade