Erstellen einer benutzerdefinierten Bibliothek mit Angular

Erstellen einer benutzerdefinierten Bibliothek

Um loszulegen, müssen Sie zunächst ein neues Projekt mit der CLI erstellen.

An dieser Stelle sollte alles gut sein. Von hier aus müssen wir jedoch einen Befehl verwenden, den das CLI in Angular 6 oder höher bereitstellt, nämlich ng generate. Diese ng generate-Bibliothek dient dazu, eine benutzerdefinierte Shared Library zu erstellen. Indem du deiner Bibliothek einen Namen gibst, wird sie zu einem separaten Projekt hinzugefügt, das Workspace genannt wird.

Wenn du ng new ausführst, erhältst du einen Workspace mit einem Projekt darin, nämlich deinem Webprojekt. Dieses ng generate fügt eine zweite Version in den Workspace ein, so dass wir unsere Bibliothek in der Angular-App testen können, ohne sie in npm oder einer anderen Ressource zu veröffentlichen. Dies ändert die tsconfig-Datei und wird aktualisiert, damit das Angular-Projekt, das separate Projekt im Workspace, weiß, wie es an die Bibliothek, die gemeinsam genutzte Bibliothek, die wir bauen werden, herankommt.

Dann können Sie Ihre Bibliothek mit dem Befehl ng build bauen und ihr den Namen Ihres Projekts geben, etwa so:

Sie können dies verwenden und direkt in dem anderen Angular-Projekt in Ihrem Arbeitsbereich testen. So ist es wirklich einfach, dies zu tun, ohne irgendwo in npm veröffentlichen zu müssen. Danach würden wir es in npm veröffentlichen wollen, sobald wir fertig sind, es getestet haben und es gut aussieht, weil wir in der Lage sein wollen, es von npm zu beziehen, egal ob es das npm ist, das einfach da draußen ist und auf das jeder zugreifen kann, oder ob es ein internes npm ist, das Sie vielleicht in Ihrer Firma haben. Wir wollen diese in unsere verschiedenen Anwendungen einbinden, damit wir sie wiederverwenden können. Es gibt einen Link, wenn Sie neu darin sind, zu npm beizutragen, das dort draußen ist.

Wir müssen dies tun, um in den dist-Ordner zu gehen und dort wird eine package.json-Datei enthalten sein. Diese wird dann verwendet, um sie in npm zu veröffentlichen. Wir müssen nur den folgenden Befehl schreiben:

So, sollen wir sehen, wie die Dinge in unserer Lösung anders sind? Los geht’s ☺.

So, als erstes werden Sie feststellen, dass wir einen Projektordner haben. Wir haben jetzt auch eine aktualisierte tsconfig, wie Sie im folgenden Bild sehen können:

Es wurden die Pfade hinzugefügt, in denen wir letztendlich unseren dist-Ordner erstellen werden, sobald wir einen Build durchführen, und das ist der Grund, warum Sie zuerst einen Build durchführen müssen, bevor Sie dies tun können, weil TypeScript tatsächlich darauf schauen wird, damit das alles funktioniert.

Die andere große Sache, die wir gemacht haben, ist, dass unsere angular.json Datei ein neues Projekt enthält:

So, wir haben hier ein sekundäres Projekt, welches unsere braga-lib ist und du wirst den Pfad für die Wurzel des Projekts bemerken. Alles andere, was zum Bauen und Testen benötigt wird, ist enthalten. Das sind also die wichtigsten Dinge, die modifiziert werden. Von hier aus können wir nun Änderungen an unserer Bibliothek vornehmen. Wenn wir also reinkommen, sehen wir hier normale Dateien und einen src-Ordner, und dann wird eine lib hinzugefügt, wie Sie sehen können:

Die lib wird unsere Komponente, unser Modul und sogar einen Dienst enthalten, wenn Sie das wollen. Wenn du die Komponentendatei öffnest, sagt sie im Grunde nur „braga-lib works!“.

Beachte nun den Selektor „lib-braga-lib“. Sie können diesen Selektor ändern, aber im Moment lassen wir ihn so wie er ist und verwenden ihn in unserem Angular-Projekt. Schauen wir uns das mal an? Oh ja ☺