Créer une bibliothèque Angular

par

Aujourd’hui, nous allons créer une nouvelle bibliothèque réutilisable. Si vous vous retrouvez à créer le même composant dans plus d’une application (ou si vous voulez partager votre composant avec d’autres développeurs), vous avez besoin d’une bibliothèque.

Créer le projet

Nous utiliserons angular cli pour générer le squelette de la bibliothèque. Si vous n’avez pas installé angular cli, référez-vous au guide d’installation d’angular cli.

Les commandes suivantes vont générer le projet angulaire my-project et la bibliothèque my-lib

ng new my-projectcd my-projectng generate library my-lib
Entrer dans le mode plein écran Quitter le mode plein écran

Ceci crée projects/my-lib dans le dossier my-project, qui contient
my-lib.component.ts et my-lib.service.ts. Angular cli a également créé le fichier public-api.ts dans le dossier my-lib. Ce fichier contient les lignes de code suivantes,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Entrer en mode plein écran Sortir en mode plein écran

Ce fichier définit ce qui est disponible pour les utilisateurs de la bibliothèque (A.K.A public API).

Si vous ouvrez my-lib.component.ts, vous verrez le code suivant :

import { Component, OnInit } from '@angular/core';@Component({ selector: 'lib-my-lib', template: `<p>my-lib works!</p>`, styles: })export class MyLibComponent implements OnInit { constructor() { } ngOnInit(): void {}}
Entrer en mode plein écran Sortir en mode plein écran

Cette bibliothèque simple sort my-lib works! et nous utiliserons le sélecteur,
<lib-my-lib></lib-my-lib> pour consommer le composant.

Installer la bibliothèque comme dépendance npm.

Pour utiliser n’importe quelle bibliothèque dans angular, vous devez l’installer à partir d’un gestionnaire de paquets tel que npm. Dans cet exemple, nous ne publierons pas notre bibliothèque au gestionnaire de paquets npm. Si vous voulez apprendre comment publier une bibliothèque angular, référez-vous à angular guide.

Maintenant nous allons installer my-lib comme dépendance de npm à partir du fichier. Ouvrez package.json et ajoutez "my-lib": "file:projects/my-lib" dans le bloc de dépendances, Voir l’extrait de code ci-dessous.

 "dependencies": { ... "@angular/router": "~9.1.4", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2", "my-lib": "file:projects/my-lib" }
Entrer en mode plein écran Quitter le mode plein écran

my-lib est le nom du paquet que vous verrez dans le dossier node_modules et file:projects/my-lib est la bibliothèque réelle. Si nous avions publié notre bibliothèque à npm, nous aurions remplacé file:projects/my-lib par le numéro de version(0.0.1).

Si vous exécutez npm install, vous remarquerez my-lib ajouté dans le dossier node_modules. Maintenant, nous pouvons importer et utiliser la bibliothèque dans notre projet. voir l’extrait de code ci-dessous:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
Entrer dans le mode plein écran Quitter le mode plein écran

Maintenant que nous avons importé le module de la bibliothèque dans notre projet, nous pouvons utiliser MyLibComponent. Ouvrez app.component.html et remplacez tout le code par
<lib-my-lib></lib-my-lib>.

Lancer l’application

Lancer npm start ou ng serve pour démarrer l’application. Ouvrez le navigateur et visitez http://localhost:4200, vous verrez my-lib works! affiché.

Félicitations, vous avez créé avec succès la bibliothèque angulaire !!

Code disponible sur github

.

Laisser un commentaire