Crearea unei biblioteci personalizate cu Angular

Crearea unei biblioteci personalizate

Pentru a începe, va trebui mai întâi să creați un nou proiect folosind CLI.

Ar trebui să fie totul în regulă în acest punct. De aici însă, trebuie să folosim o comandă pe care CLI-ul o oferă în Angular 6 sau mai mare, care este ng generate. Această bibliotecă ng generate este concepută pentru a crea o bibliotecă partajată personalizată. Apoi, dându-i bibliotecii dvs. un nume, aceasta va fi adăugată la un proiect separat, care se numește spațiu de lucru.

Când faceți ng new veți obține un spațiu de lucru cu un singur proiect în el, care este proiectul dvs. web. Acest ng generate va adăuga o a doua versiune în spațiul de lucru, astfel încât să putem testa efectiv biblioteca noastră în aplicația Angular fără a o publica în npm sau în orice altă resursă. Acum, acest lucru modifică fișierul tsconfig și acesta va fi actualizat astfel încât proiectul Angular, cel separat din spațiul de lucru, să înțeleagă cum să ajungă la bibliotecă, biblioteca partajată pe care o vom construi.

Apoi puteți construi biblioteca folosind comanda ng build și apoi îi puteți da numele proiectului dumneavoastră, astfel:

Puteți folosi acest lucru și îl puteți testa direct în celălalt proiect Angular care se află în spațiul de lucru. Deci, face foarte ușor să faceți acest lucru fără a fi nevoie să publicați în npm undeva. După aceea, am dori să publicăm în npm după ce suntem gata, am testat-o și arată bine, pentru că vrem să putem trage din npm, fie că este vorba de npm care este pur și simplu acolo, la care oricine poate ajunge, fie că este un npm intern pe care îl aveți în compania dvs. Vrem să tragem din acestea în diferitele noastre aplicații pentru a putea fi reutilizate. Există un link dacă sunteți nou pentru a contribui la npm care este acolo.

Trebuie să facem acest lucru pentru a intra în folderul dist și va fi inclus un fișier package.json. Acesta va fi folosit pentru a fi apoi publicat până la npm. Trebuie doar să scriem următoarea comandă:

Așa că, ar trebui să vedem cum diferă lucrurile în soluția noastră? Să mergem ☺.

În primul rând, veți observa că avem un folder projects. De asemenea, avem acum un tsconfig actualizat, după cum puteți vedea în următoarea imagine:

A adăugat căile de acces către locul în care, în cele din urmă, vom construi dosarul nostru dist odată ce facem un build și de aceea trebuie să construiți mai întâi, înainte de a putea face acest lucru, deoarece TypeScript se va uita de fapt la acest lucru pentru a putea face ca totul să funcționeze.

Acum, celălalt lucru important care a fost făcut este că fișierul nostru angular.json are un nou proiect în el:

Deci, avem un proiect secundar chiar aici, care este braga-lib-ul nostru și veți observa calea de acolo pentru rădăcina proiectului. Acum, tot ceea ce este necesar pentru a construi și testa este inclus. Deci, acestea sunt principalele lucruri pe care le modifică. Acum, ceea ce putem face de aici este să aducem modificări bibliotecii noastre. Deci, dacă intrăm înăuntru, veți vedea fișiere normale aici și un dosar src și apoi ceea ce adaugă este o lib, după cum puteți vedea:

Lib va avea componenta noastră, modulul nostru și chiar un serviciu dacă doriți. Dacă deschideți fișierul componentei, în mare parte spune doar „braga-lib funcționează!”.

Acum observați selectorul „lib-braga-lib”. Puteți schimba acest lucru, dar deocamdată haideți să îl lăsăm așa cum este și să îl folosim în proiectul nostru Angular. Să ne uităm la asta? Oh, da ☺

.