Tworzenie biblioteki Angulara

przez

Dzisiaj stworzymy nową bibliotekę wielokrotnego użytku. Jeśli zauważysz, że tworzysz ten sam komponent w więcej niż jednej aplikacji (lub chcesz podzielić się swoim komponentem z innymi programistami), będziesz potrzebował biblioteki.

Utwórz projekt

Użyjemy angular cli do wygenerowania szkieletu biblioteki. Jeśli nie masz zainstalowanego angular cli, zapoznaj się z przewodnikiem instalacji angular cli.

Następujące polecenia wygenerują projekt angular my-project i bibliotekę my-lib

ng new my-projectcd my-projectng generate library my-lib
Enter fullscreen mode Exit fullscreen mode

Tworzy to projects/my-lib w folderze my-project, który zawiera
my-lib.component.ts i my-lib.service.ts. Angular cli utworzył również plik public-api.ts w folderze my-lib. Ten plik zawiera następujące linie kodu,

export * from './lib/my-lib.service';export * from './lib/my-lib.component';export * from './lib/my-lib.module';
Enter fullscreen mode Exit fullscreen mode

Ten plik definiuje to, co jest dostępne dla użytkowników biblioteki (A.K.A public API).

Jeśli otworzysz my-lib.component.ts, zobaczysz następujący kod:

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 {}}
Enter fullscreen mode Exit fullscreen mode

Ta prosta biblioteka wyprowadza my-lib works! i użyjemy selektora,
<lib-my-lib></lib-my-lib> aby skonsumować komponent.

Zainstaluj bibliotekę jako npm dependency.

Aby użyć jakiejkolwiek biblioteki w angular, musisz zainstalować ją z menedżera pakietów takiego jak npm. W tym przykładzie nie będziemy publikować naszej biblioteki do menedżera pakietów npm. Jeśli chcesz dowiedzieć się jak opublikować bibliotekę kątową, zapoznaj się z przewodnikiem kątowym.

Teraz zainstalujemy my-lib jako zależność npm z pliku. Otwórz package.json i dodaj "my-lib": "file:projects/my-lib" w bloku zależności, Zobacz poniższy fragment kodu.

 "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" }
Wejdź w tryb pełnoekranowy Wyjdź z trybu pełnoekranowego

my-lib jest nazwą pakietu, który zobaczysz w folderze node_modules, a file:projects/my-lib jest rzeczywistą biblioteką. Gdybyśmy opublikowali naszą bibliotekę w npm, zastąpilibyśmy file:projects/my-lib numerem wersji (0.0.1).

Jeśli uruchomisz npm install, zauważysz, że my-lib został dodany do folderu node_modules. Teraz możemy zaimportować i użyć biblioteki w naszym projekcie. zobacz fragment kodu poniżej:

import {MyLibModule} from 'my-lib';@NgModule({ declarations: , imports: , providers: , bootstrap: ,})export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

Teraz, gdy zaimportowaliśmy moduł biblioteki do naszego projektu, możemy użyć MyLibComponent. Otwórz app.component.html i zamień cały kod na
<lib-my-lib></lib-my-lib>.

Uruchom aplikację

Uruchom npm start lub ng serve, aby uruchomić aplikację. Otwórz przeglądarkę i odwiedź http://localhost:4200, zobaczysz my-lib works! wyświetlone.

Gratulacje pomyślnie utworzyłeś bibliotekę kątową!!!

Kod dostępny na github

Dodaj komentarz