Tworzenie niestandardowej biblioteki z Angular

Tworzenie niestandardowej biblioteki

Aby zacząć, musisz najpierw stworzyć nowy projekt używając CLI.

W tym momencie wszystko powinno być w porządku. Stąd jednak musimy użyć polecenia, które CLI udostępnia w Angular 6 lub nowszym, czyli ng generate. Ta biblioteka ng generate jest przeznaczona do tworzenia niestandardowej biblioteki współdzielonej. Następnie, nadając swojej bibliotece nazwę, zostanie ona dodana do osobnego projektu, który nazywany jest obszarem roboczym.

Gdy wykonasz ng new otrzymasz obszar roboczy z jednym projektem w nim, który jest twoim projektem webowym. To ng generate doda drugą wersję do obszaru roboczego, abyśmy mogli przetestować naszą bibliotekę w aplikacji Angular bez publikowania do npm lub innych zasobów. Teraz, to modyfikuje plik tsconfig i zostanie on zaktualizowany tak, aby projekt Angular, ten oddzielny w przestrzeni roboczej, rozumiał jak dostać się do biblioteki, biblioteki współdzielonej, którą będziemy budować.

Wtedy możesz zbudować swoją bibliotekę za pomocą polecenia ng build, a następnie nadać jej nazwę swojego projektu, tak jak to:

Możesz użyć tego i przetestować go bezpośrednio w innym projekcie Angular, który znajduje się w twoim obszarze roboczym. Więc to sprawia, że jest to naprawdę łatwe do zrobienia bez konieczności publikowania gdzieś w npm. Następnie chcielibyśmy opublikować npm, gdy będziemy gotowi do pracy, przetestowaliśmy go i wygląda dobrze, ponieważ chcemy być w stanie wyciągnąć z npm, czy to npm, który jest po prostu tam, że każdy może się dostać, lub jeśli jest to wewnętrzny npm, który możesz mieć w swojej firmie. Chcemy z nich czerpać do naszych różnych aplikacji, abyśmy mogli je ponownie wykorzystać. Jest tam link, jeśli jesteś nowy w przyczynianiu się do npm, który jest tam.

Musimy to zrobić, aby przejść do folderu dist i będzie tam plik package.json. To będzie używane do publikowania do npm. Musimy tylko napisać następujące polecenie:

Więc, czy powinniśmy zobaczyć, jak różnią się rzeczy w naszym rozwiązaniu? Chodźmy ☺.

Więc po pierwsze, zauważysz, że mamy folder projects. Mamy również zaktualizowany tsconfig, jak widać na poniższym obrazku:

Dodał on ścieżki do miejsca, w którym ostatecznie będziemy budować nasz folder dist, gdy zbudujemy i dlatego musisz najpierw zbudować, zanim będziesz mógł to zrobić, ponieważ TypeScript będzie patrzył na to, aby to wszystko działało.

Teraz, inną dużą rzeczą, która została zrobiona jest to, że nasz plik angular.json ma nowy projekt:

Więc, mamy tutaj dodatkowy projekt, który jest naszym braga-lib i zauważysz ścieżkę do korzenia projektu. Teraz, wszystko inne potrzebne do budowania i testowania jest dołączone. Więc to są główne rzeczy, które modyfikuje. Teraz, to co możemy zrobić z tego miejsca, to dokonać zmian w naszej bibliotece. Tak więc, jeśli wejdziemy, zobaczysz normalne pliki tutaj i folder src, a następnie to co dodają to lib, jak widać:

The lib będzie miał nasz komponent, nasz moduł, a nawet usługę, jeśli chcesz. Jeśli otworzysz plik komponentu, to będzie on po prostu mówił „braga-lib działa!”.

Zauważ teraz selektor „lib-braga-lib”. Możesz to zmienić, ale na razie zostawmy to tak jak jest i użyjmy tego w naszym projekcie Angular. Rzućmy na to okiem? Oh yeah ☺

.