Eines der Dinge, die in Angular 6 eingeführt wurden, war die Möglichkeit, Bibliotheken mit der Angular CLI zu erstellen und zu erstellen.

Als ich diese Funktion zum ersten Mal verwendete, war ich begeistert, wie einfach es war, denn obwohl es technisch möglich war, Bibliotheken mit früheren Versionen von Angular zu erstellen, war es eine insgesamt frustrierende und traurige Erfahrung.

In diesem Artikel werde ich Ihnen die wichtigsten Elemente der Entwicklung von Angular-Bibliotheken vorstellen:

  • Häufige Anwendungsfälle für Angular-Bibliotheken.
  • Erstellen einer Bibliothek mit der Angular CLI.
  • Beschleunigung der Entwicklung von Angular-Bibliotheken mit npm link.
  • Ihre Bibliothek veröffentlichen.

Den vollständigen Demo-Code für die von uns erstellte Bibliothek finden Sie hier.

Anwendungsfälle für Angular-Bibliotheken

Aus meiner Erfahrung gibt es 2 häufige Anwendungsfälle für Angular-Bibliotheken:

  1. Erstellen einer wiederverwendbaren Komponentenbibliothek für die gemeinsame Nutzung zwischen Anwendungen.
  2. Aufbau von Shared Service Layer-Funktionalität – zB. ein Client zum Arbeiten mit einer externen Datenquelle wie einer API.

Obwohl es viele Fälle gibt, in denen eine Angular-Bibliothek gut zu einem Projekt passt, lohnt es sich zu überlegen, ob Ihr Anwendungsfall einer davon ist, da er einen gewissen Wartungsaufwand mit sich bringt. Denken Sie daran, dass Sie die Funktionalität jederzeit als Teil eines gemeinsam genutzten Angular-Moduls in Ihrer Anwendung schreiben und bei Bedarf in eine Bibliothek extrahieren können.

Erstellen eines Angular-Bibliotheksprojekts

Wir werden eine Angular-Bibliothek sowie eine Demo-Anwendung erstellen, um diese Bibliothek zu verwenden. Wir können diese mit den folgenden Befehlen erstellen:

ng new example-component-library --create-application=falsecd example-component-libraryng generate library example-component-libraryng generate application example-component-library-app

Die Verwendung des --create-application=false Flags verhindert, dass Angular eine Anwendung mit dem Namen „example-component-library“ erstellt.

Wenn wir nun in den Arbeitsbereich schauen, den wir gerade erstellt haben, können wir sehen, dass es einen projects Ordner gibt, der jeweils einen Unterordner enthält der Bibliothek (example-component-library) und die Anwendung (example-component-library-app), die wir gerade generiert haben. Es gibt auch einen dritten Ordner mit einem e2e-Testprojekt, das wir ignorieren können.

Lassen Sie uns nun unsere Bibliothek erstellen und sehen, was passiert:

ng build --project=example-component-library

Wenn wir in den dist-Ordner schauen, werden wir sehen, dass unsere Bibliothek erstellt wurde und dass wir innerhalb des Build-Ordners eine Reihe von verschiedenen Ordnern haben, die die Anwendung in verschiedenen Modulformaten enthalten, die für verschiedene Verbraucher geeignet sind, sowie einen Ordner mit TypeScript-Definitionen.

  • Bündel – UMD-Modulformat.
  • esm5 – Modulformat, das hauptsächlich es5 verwendet, aber auch die Import / Export-Syntax von es6.
  • esm2015 – Modulformat, das es2015/es6 verwendet.
  • fesm5 – abgeflachte Version von esm5.
  • fesm2015 – abgeflachte Version vonpeerDependencies esm2015.
  • lib – TypeScript-Definitionen für die Bibliothek.

Dieses Format heißt Angular Package Format und wird als Ausgabe von ng-packagr verwendet, dem Tool, mit dem Angular CLI Bibliotheken transpiliert.

Strukturierung Ihres Angular-Bibliotheksprojekts

Der Inhalt der Bibliothek sieht derzeit folgendermaßen aus:

Ordnerstruktur Initial

Löschen Sie zunächst die vorhandenen example-component-library Modul-, Komponenten- und Servicedateien – diese benötigen wir nicht.

Als nächstes fügen wir eine Komponente, eine Pipe und eine Direktive hinzu. Dies ermöglicht es einer konsumierenden Anwendung, nur die Module der Bibliothek zu importieren, an denen sie interessiert ist, und dann alle anderen Module während des Erstellungsprozesses in den Baum zu importieren. Ich empfehle dies dringend, da es wirklich einen Unterschied in der Größe Ihrer Anwendungspakete macht, wenn die Bibliothek wächst.

ng generate module components/foong generate component components/foong generate module pipes/barng generate pipe pipes/bar/barng generate module directives/bazng generate directive directives/baz/baz

Danach sollte unsere Bibliothek die folgende Ordnerstruktur haben:

Ordnerstruktur Final

Natürlich kann diese Struktur basierend auf Ihnen oder den Vorlieben Ihres Teams angepasst werden, aber die wichtigen Dinge, die Sie beachten sollten, sind:

  • Haben Sie eine Komponente pro Modul, um das Baumschütteln der unbenutzte Module/Komponenten.

    Die Ausnahme sind Komponenten, die immer zusammen verwendet werden, sollten im selben Modul gehalten werden – zB. Wenn Sie Tabs implementieren würden, würden sich TabGroupComponent und TabItemComponent im selben Modul befinden.

  • Versuchen Sie, die Verwendung von Barrel-Importen innerhalb einer Angular-Bibliothek zu vermeiden oder einzuschränken

    In Angular 6 gibt es Probleme mit Barrel-Importen in Bibliotheken und dem Angular AOT-Build. Diese Probleme scheinen in Angular 7 behoben zu sein, aber ich stoße immer noch regelmäßig auf verwirrende Probleme aufgrund von Fassimporten und unterstütze daher diese Empfehlung, nur 1 Ebene von Fassimporten zu verwenden (oder sie einfach ganz zu vermeiden).

Als nächstes müssen wir jede der von uns erstellten Komponenten zur exports ihres Moduls hinzufügen:

import { CommonModule } from '@angular/common';import { FooComponent } from './foo.component';import { NgModule } from '@angular/core';@NgModule({ declarations: , imports: , exports: })export class FooModule { }

Wir aktualisieren jetzt public_api.ts, um alle Dateien in der Bibliothek zu exportieren, die wir einer konsumierenden Anwendung zur Verfügung stellen möchten:

/* * Public API Surface of example-component-library */export * from './lib/components/foo/foo.module';export * from './lib/components/foo/foo.component';export * from './lib/pipes/bar/bar.module';export * from './lib/pipes/bar/bar.pipe';export * from './lib/directives/baz/baz.module';export * from './lib/directives/baz/baz.directive';

Jetzt müssen wir nur noch die Bibliothek neu erstellen, und sie kann die Bibliothek aus einer Anwendung verwenden.

ng build --project=example-component-library

Verbrauchen unserer Angular-Bibliothek

Während der Entwicklung Der beste Weg, unsere Bibliothek zu konsumieren, ist die Verwendung von npm link. Auf diese Weise können wir einen Symlink von einem Verzeichnis im Ordner node modules unserer konsumierenden Anwendung zur kompilierten Anwendung im Ordner dist der Bibliothek erstellen.

cd dist/example-component-librarynpm link

Wir können ein Angular-Projekt von überall auf unserem lokalen Computer mit dieser Bibliothek verknüpfen. Aus dem Projektstammordner:

npm link example-component-library

Wenn wir jetzt die Bibliothek mit dem Watch-Flag ausführen und gleichzeitig ng serve in einem anderen Terminalfenster ausführen.

ng build --project=example-component-libraryng serve

Auf diese Weise können wir eine Anwendung und (eine oder mehrere) verknüpfte Bibliotheken gleichzeitig entwickeln und sehen, wie die App bei jeder Änderung des Quellcodes der Bibliothek neu kompiliert wird.

In der Produktion

Für die Produktion veröffentlichen wir unsere Bibliothek in npm und lassen sie dann mit npm install in der Anwendung installieren.

Zuerst müssen Sie ein npm-Konto erstellen. Melden Sie sich jetzt über die Befehlszeile an:

npm login

Aus dem Projektstammordner:

cd dist/example-component-librarynpm publish

Unser Paket ist jetzt auf npm veröffentlicht (öffentlich), und wir können es installieren, indem wir es zu den package.json Abhängigkeiten unserer Anwendung hinzufügen und npm install:

"dependencies": { ... "example-component-library": "~0.0.1"}

Bibliotheksabhängigkeiten

Wenn Ihre Bibliothek Abhängigkeiten hat, sollten diese entweder als dependencies oder peerDependencies in der package.json Ihrer Bibliothek selbst angegeben werden (und nicht als package.json im Stammverzeichnis des Projekts). Im Fall unserer einfachen Bibliothek haben wir beispielsweise nur die folgenden Abhängigkeiten:

"peerDependencies": { "@angular/common": "^7.1.0", "@angular/core": "^7.1.0"}

Angular wird als peerDependency anstatt als dependency angegeben, um zu vermeiden, dass die konsumierende Anwendung mehrere, widersprüchliche Versionen von Angular installiert. Dieser Artikel enthält einige gute Informationen zu peerDependencies und deren Verwendung.

Fazit

Wir haben gesehen, wie wir eine Angular-Komponentenbibliothek erstellen können, die von mehreren verschiedenen Angular-Anwendungen verwendet werden kann, und wie wir mit Bibliotheken in der Entwicklung arbeiten und sie für die Produktion veröffentlichen können. Im Folgenden habe ich die Ressourcen aufgelistet, die ich nützlich gefunden habe, um selbst etwas über Angular-Bibliotheken zu lernen und diesen Artikel zu schreiben.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.