Creare una libreria Angular

di

Oggi creeremo una nuova libreria riutilizzabile. Se ti trovi a creare lo stesso componente in più di un’app (o vuoi condividere il tuo componente con altri sviluppatori), hai bisogno di una libreria.

Crea il progetto

Utilizzeremo angular cli per generare lo scheletro della libreria. Se non hai installato angular cli, fai riferimento alla guida all’installazione di angular cli.

I seguenti comandi genereranno il progetto angolare my-project e la libreria my-lib

ng new my-projectcd my-projectng generate library my-lib
Entra in modalità schermo intero Esci dalla modalità schermo intero

Questo crea projects/my-lib nella cartella my-project, che contiene
my-lib.component.ts e my-lib.service.ts. Angular cli ha anche creato il file public-api.ts nella cartella my-lib. Questo file contiene le seguenti linee di codice,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Entrare in modalità schermo intero Uscire in modalità schermo intero

Questo file definisce ciò che è disponibile per gli utenti della libreria (A.K.A public API).

Se aprite my-lib.component.ts, vedrete il seguente codice:

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 {}}
Entrare in modalità schermo intero Uscire in modalità schermo intero

Questo semplice output della libreria my-lib works! e useremo il selettore,
<lib-my-lib></lib-my-lib> per consumare il componente.

Installare la libreria come dipendenza npm.

Per utilizzare qualsiasi libreria in angular, è necessario installarla dal gestore di pacchetti come npm. In questo esempio non pubblicheremo la nostra libreria sul gestore di pacchetti npm. Se vuoi imparare come pubblicare la libreria angolare, fai riferimento alla guida angolare.

Ora installeremo my-lib come dipendenza di npm dal file. Aprire package.json e aggiungere "my-lib": "file:projects/my-lib" nel blocco delle dipendenze, vedere lo snippet di codice qui sotto.

 "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" }
Entrare nella modalità a schermo intero Uscire dalla modalità a schermo intero

my-lib è il nome del pacchetto che vedrete nella cartella node_modules e file:projects/my-lib è la libreria attuale. Se avessimo pubblicato la nostra libreria su npm, sostituiremmo file:projects/my-lib con il numero di versione (0.0.1).

Se eseguite npm install, noterete my-lib aggiunto nella cartella node_modules. Ora possiamo importare e usare la libreria nel nostro progetto. vedi lo snippet di codice qui sotto:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
Entra in modalità schermo intero Esci dalla modalità schermo intero

Ora che abbiamo importato il modulo della libreria nel nostro progetto, possiamo usare MyLibComponent. Aprite app.component.html e sostituite tutto il codice con
<lib-my-lib></lib-my-lib>.

Esegui l’applicazione

Esegui npm start o ng serve per avviare l’applicazione. Apri il browser e visita http://localhost:4200, vedrai my-lib works! visualizzato.

Congratulazioni hai creato con successo la libreria angolare!!!

Codice disponibile su github

Lascia un commento