Creazione di una libreria personalizzata con Angular

Quando si fa ng new si ottiene un workspace con un progetto in esso, che è il vostro progetto web. Questo ng generate aggiungerà una seconda versione nello spazio di lavoro in modo che possiamo effettivamente testare la nostra libreria nell’app Angular senza pubblicare su npm o qualsiasi altra risorsa. Ora, questo modifica il file tsconfig e sarà aggiornato in modo che il progetto Angular, quello separato nello spazio di lavoro, capisca come raggiungere la libreria, la libreria condivisa che stiamo per costruire.

Poi puoi costruire la tua libreria usando il comando ng build e poi darle il nome del tuo progetto, come questo:

Puoi usare questo e testarlo direttamente nell’altro progetto Angular che si trova nel tuo workspace. Quindi, rende molto facile fare questo senza dover pubblicare in npm da qualche parte. Dopo di che, vorremmo pubblicare su npm una volta che siamo pronti a partire, abbiamo testato e sembra buono, perché vogliamo essere in grado di estrarre da npm, sia che sia il npm che è là fuori che chiunque può raggiungere, o se è un npm interno che si può avere nella vostra azienda. Vogliamo attingere da questi nelle nostre diverse applicazioni in modo da poterli riutilizzare. C’è un link se sei nuovo nel contribuire a npm che è là fuori.

Dobbiamo fare questo per andare nella cartella dist e ci sarà un file package.json incluso. Questo verrà usato per poi pubblicarlo su npm. Dobbiamo solo scrivere il seguente comando:

Allora, vediamo come le cose sono diverse nella nostra soluzione? Andiamo ☺.

Prima di tutto, noterete che abbiamo una cartella projects. Ora abbiamo anche un tsconfig aggiornato come puoi vedere nell’immagine seguente:

Ha aggiunto i percorsi dove alla fine costruiremo la nostra cartella dist una volta che avremo fatto una build ed è per questo che devi costruire prima, prima di poterlo fare perché TypeScript guarderà effettivamente a questo per poter far funzionare tutto questo.

Ora, l’altra grande cosa che è stata fatta è il nostro file angular.json ha un nuovo progetto in esso:

Quindi, abbiamo un progetto secondario proprio qui, che è il nostro braga-lib e noterete il percorso lì per la radice del progetto. Ora, tutto il resto necessario per costruire e testare è incluso. Quindi, queste sono le cose principali che modifica. Ora, quello che possiamo fare da qui è apportare modifiche alla nostra libreria. Quindi, se entriamo, vedrete i normali file qui e una cartella src e poi quello che aggiungono è una lib come potete vedere:

La lib avrà il nostro componente, il nostro modulo e anche un servizio se lo volete. Se aprite il file del componente, praticamente dice solo “braga-lib funziona!”.

Notare ora il selettore “lib-braga-lib”. Potete cambiarlo, ma per ora lasciamolo così com’è e usiamolo nel nostro progetto Angular. Diamo un’occhiata? Oh sì ☺