Eine Bibliothek mit ng generate erstellen

Wenn mehrere Apps dieselben Komponenten, Services oder Hilfsfunktionen benötigen, bündeln Sie diese als Angular-Library. Eine Library ist wiederverwendbar, versioniert und veröffentlichbar, anstatt Code zwischen Projekten zu kopieren.

Libraries befinden sich in einem Angular-Workspace: einem Ordner, der durch eine einzige angular.json verwaltet wird und mehrere Apps und Libraries enthalten kann. Sie können eine Library zu einem bestehenden Workspace hinzufügen oder einen eigenen Workspace dafür erstellen.

Das Schematic ng generate library (Alias ng g lib) erstellt die Grundstruktur eines neuen Library-Projekts unter projects/.

Die Library enthält einen eigenen Ordner src/lib, ein public-api.ts-Barrel, eine ng-package.json (für den Build) und einen Eintrag in angular.json. Sie ist ein eigenständiges, baubares Projekt.

Generieren Sie Code in der Library, indem Sie sie mit --project als Ziel angeben. Die CLI legt die Dateien im richtigen Ordner ab.

Moderne Libraries setzen bevorzugt auf Standalone-Komponenten, die von den Nutzern direkt und ohne NgModule importiert werden. Kennzeichnen Sie die Komponente mit standalone: true, damit Apps sie einfach importieren können.

Jede Library besitzt eine eigene package.json, in der Name, Version und Peer-Abhängigkeiten wie @angular/core definiert sind. Peer-Abhängigkeiten bedeuten, dass die verwendende App Angular bereitstellt und dadurch doppelte Kopien vermieden werden.

Behalten Sie eine Demo-App im selben Workspace, um die Library während ihrer Entwicklung zu testen. Ein Import über den Namen der Library wird dank TypeScript-Pfadzuordnungen in tsconfig zum lokalen Quellcode aufgelöst.

Eine Anwendung ist für die Bereitstellung gedacht, eine Library für die Verwendung durch andere Projekte. Libraries können nicht direkt bereitgestellt werden. Sie werden zu einem verteilbaren Paket gebaut und entweder veröffentlicht oder von Apps im Workspace importiert.

Eine gute Library hat einen klaren Zweck, etwa ein UI-Kit oder eine Data-Access-Schicht. Vermeiden Sie es, nicht zusammengehörigen Code zu bündeln. Kohärente Libraries lassen sich leichter versionieren, dokumentieren und wiederverwenden.

Nachdem die Grundstruktur der Library erstellt wurde, müssen Sie noch ihre öffentliche API definieren, sie in das Angular Package Format bauen und veröffentlichen. Die nächsten Lektionen behandeln diese Schritte einzeln.

Wie erstellen Sie eine Library?

Libraries bündeln wiederverwendbaren Code für mehrere Apps. Erstellen Sie eine Library innerhalb eines Workspaces mit ng generate library. Dabei werden src/lib, public-api.ts, ng-package.json und eine package.json mit Peer-Abhängigkeiten angelegt. Fügen Sie Code mit --project hinzu, bevorzugen Sie Standalone-Komponenten und halten Sie jede Library fokussiert.