Angular-Bibliothek erstellen

von

Heute werden wir eine neue wiederverwendbare Bibliothek erstellen. Wenn Sie dieselbe Komponente in mehr als einer App erstellen (oder Ihre Komponente mit anderen Entwicklern teilen möchten), benötigen Sie eine Bibliothek.

Erstellen Sie das Projekt

Wir werden Angular Cli verwenden, um ein Bibliotheksskelett zu erstellen. Wenn Sie angular cli nicht installiert haben, lesen Sie die angular cli Installationsanleitung.

Die folgenden Befehle generieren das angular Projekt my-project und die Bibliothek my-lib

ng new my-projectcd my-projectng generate library my-lib
Vollbildmodus betreten Vollbildmodus verlassen

Dies erstellt projects/my-lib im Ordner my-project, der
my-lib.component.ts und my-lib.service.ts enthält. Angular cli erstellt auch die Datei public-api.ts im Ordner my-lib. Diese Datei enthält die folgenden Codezeilen,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Vollbildmodus betreten Vollbildmodus verlassen

Diese Datei definiert, was den Benutzern der Bibliothek zur Verfügung steht (A.K.A public API).

Wenn Sie my-lib.component.ts öffnen, sehen Sie den folgenden Code:

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 {}}
Vollbildmodus betreten Vollbildmodus verlassen

Diese einfache Bibliothek gibt my-lib works! aus und wir verwenden den Selektor
<lib-my-lib></lib-my-lib>, um die Komponente zu nutzen.

Installieren Sie die Bibliothek als npm-Abhängigkeit.

Um eine Bibliothek in Angular zu verwenden, müssen Sie sie über einen Paketmanager wie npm installieren. In diesem Beispiel werden wir unsere Bibliothek nicht im npm-Paketmanager veröffentlichen. Wenn Sie erfahren möchten, wie Sie Angular-Bibliotheken veröffentlichen, lesen Sie den Angular-Guide.

Nun installieren wir my-lib als npm-Abhängigkeit aus der Datei. Öffnen Sie package.json und fügen Sie "my-lib": "file:projects/my-lib" in den Abhängigkeiten-Block ein, siehe das Code-Snippet unten.

 "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" }
Vollbildmodus betreten Vollbildmodus verlassen

my-lib ist der Paketname, den Sie im Ordner node_modules sehen werden und file:projects/my-lib ist die eigentliche Bibliothek. Wenn wir unsere Bibliothek bei npm veröffentlicht hätten, würden wir file:projects/my-lib durch die Versionsnummer (0.0.1) ersetzen.

Wenn Sie npm install ausführen, werden Sie feststellen, dass my-lib in den Ordner node_modules hinzugefügt wurde. Jetzt können wir die Bibliothek in unser Projekt importieren und verwenden. Siehe folgenden Codeschnipsel:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
Vollbildmodus eingeben Vollbildmodus beenden

Nun, da wir das Bibliotheksmodul in unser Projekt importiert haben, können wir MyLibComponent verwenden. Öffnen Sie app.component.html und ersetzen Sie den gesamten Code durch
<lib-my-lib></lib-my-lib>.

Starte die App

Starte npm start oder ng serve, um die App zu starten. Wenn du den Browser öffnest und http://localhost:4200 aufrufst, siehst du my-lib works! angezeigt.

Herzlichen Glückwunsch, du hast erfolgreich eine Angular-Bibliothek erstellt!!!

Der Code ist auf github verfügbar

Schreibe einen Kommentar