Angular Bibliotheken

Angular Bibliotheken werden als Lösung für allgemeine Probleme wie die Darstellung einer einheitlichen Benutzeroberfläche, die Präsentation von Daten und die Möglichkeit der Dateneingabe erstellt. Entwickler können allgemeine Lösungen für bestimmte Domänen erstellen, die für die Wiederverwendung in verschiedenen Anwendungen angepasst werden können. Diese Lösungen können als Angular-Bibliotheken erstellt werden, und diese Bibliotheken können als npm-Pakete veröffentlicht und gemeinsam genutzt werden.

Eine Angular-Bibliothek ist ein Angular-Projekt, unterscheidet sich aber insofern von der Angular-App, als dass sie nicht eigenständig ausgeführt werden kann. Sie wird importiert und in der App verwendet.

Verwendung von Angular-Bibliotheken

• Angular-Bibliotheken erweitern die Basisfunktionalitäten von Angular. Wenn Sie zum Beispiel reaktive Formulare zu einer App hinzufügen möchten, fügen Sie das Bibliothekspaket mit ng add @angular/forms hinzu und importieren dann das ReactiveFormsModule aus der @angular/forms-Bibliothek in Ihren Anwendungscode.
• Angular Material ist ein Beispiel für eine große, universell einsetzbare Bibliothek, die ausgefeilte, wiederverwendbare und anpassbare UI-Komponenten bereitstellt.

Installieren von Bibliotheken

Bibliotheken werden als npm-Pakete veröffentlicht und in Angular CLI integriert. Um wiederverwendbaren Bibliothekscode in eine Anwendung zu integrieren, müssen wir das Paket installieren und die bereitgestellte Funktionalität dort importieren, wo wir sie verwenden wollen.

Syntax

Der Befehl ng add verwendet den npm-Paketmanager, um das Bibliothekspaket zu installieren, und ruft Schemata auf, die im Paket enthalten sind, um andere Gerüste innerhalb des Projektcodes, wie das Hinzufügen von Import-Anweisungen, Schriftarten, Themes und so weiter.

Bibliothekstypisierung

Bibliothekspakete enthalten Typisierungen in .d.ts-Dateien. Wenn das Paket Ihrer Bibliothek keine Typisierungen enthält und die IDE einen Fehler anzeigt, müssen Sie das zugehörige @types/-Paket der Bibliothek installieren.

Angenommen, Sie haben eine Bibliothek namens d1:

Typen, die in einem @types/-Paket für eine im Arbeitsbereich installierte Bibliothek definiert sind, werden automatisch zur TypeScript-Konfiguration für das Projekt hinzugefügt, das diese Bibliothek verwendet. TypeScript sucht standardmäßig nach Typen im Ordner node_modules/@types, so dass Sie nicht jedes Typenpaket einzeln hinzufügen müssen.

Wenn eine Bibliothek keine Typisierungen in @types/ enthält, können Sie sie trotzdem verwenden, indem Sie manuell Typisierungen für sie hinzufügen. Sie können dies wie folgt tun:

Erstellen Sie eine typings.d.ts Datei in Ihrem src/ Ordner. Diese Datei wird automatisch als globale Typdefinition eingebunden.

Fügen Sie den folgenden Code in src/typings.d.ts ein.

Fügen Sie den folgenden Code in die Komponente oder Datei ein, die die Bibliothek verwendet:

Aktualisierung von Bibliotheken

Sie können die Bibliotheken mit dem Befehl ng update aktualisieren. Er aktualisiert einzelne Bibliotheksversionen. Das Angular CLI prüft die letzte veröffentlichte Version der Bibliothek, und wenn es feststellt, dass die neueste Version neuer ist als die installierte Version, lädt es diese herunter und aktualisiert die package.json, um die neueste Version zu übernehmen.

Syntax

Hinweis: Wenn Sie Angular auf eine neue Version aktualisieren, müssen Sie sicherstellen, dass alle Bibliotheken, die Sie verwenden, aktuell sind. Wenn Bibliotheken Abhängigkeiten haben, müssen diese ebenfalls aktualisiert werden.

Hinzufügen einer Bibliothek zum globalen Laufzeitbereich

Legacy-JavaScript-Bibliotheken, die nicht in eine App importiert werden, können zum globalen Laufzeitbereich hinzugefügt und geladen werden, als ob sie in einem Skript-Tag wären. Sie müssen die CLI so konfigurieren, dass dies zur Build-Zeit mit den Optionen „scripts“ und „styles“ des Build-Ziels in der CLI-Konfigurationsdatei angular.json geschieht.

Um zum Beispiel die Bootstrap-4-Bibliothek zu verwenden, müssen Sie die Bibliothek und ihre Abhängigkeiten zunächst mit dem npm-Paketmanager installieren:

Fügen Sie die Bootstrap-CSS-Datei zum Array „styles“ hinzu:

Erstellen neuer Bibliotheken

Sie können Ihre eigenen neuen Bibliotheken erstellen und veröffentlichen, um die Funktionen von Angular zu erweitern. Dies wird in der Regel verwendet, wenn Sie das gleiche Problem in mehr als einer App lösen müssen (oder Ihre Lösung mit anderen Entwicklern teilen möchten), Sie haben einen Kandidaten für eine Bibliothek.

Zum Beispiel: Sie können einen Button erstellen, der Benutzer auf die Website Ihres Unternehmens weiterleitet und der in allen Apps enthalten ist, die Ihr Unternehmen erstellt.

Öffnen Sie Angular CLI und verwenden Sie die folgende Syntax, um eine neue Bibliothek zu erstellen.

Syntax

Damit wird ein Ordner projects/my-lib in Ihrem Workspace erstellt, der eine Komponente und einen Service in einem NgModule enthält. Die Workspace-Konfigurationsdatei angular.json wird mit einem Projekt des Typs ‚library‘ aktualisiert.

Jetzt können Sie Ihr Projekt mit den folgenden Befehlen bauen, testen und lint: