In questo articolo andremo a vedere come creare un workspace in Angular in modo da avere un unico progetto che funge da raccoglitore di applicazioni

1. Cosa è un progetto monorepo?

Un progetto detto “monorepo” è un progetto di tipo workspace nel quale possiamo creare una serie di frontend tutti indipendenti tra loro ma dipendenti dagli stessi pacchetti node_modules, di fatti questi ultimi sono condivisi tra tutti i progetti

2. Vantaggi e svantaggi

Il principale e forse unico vantaggio consiste nell’avere una unica cartella node_modules anziché avere una cartella per ogni progetto.

Di default il progetto workspace di angular mette sotto il livello “condiviso” solo i node_modules.

Per poter condividere anche gli assets per tutti i progetti (es icone, file traduzioni ecc…) bisogna intervenire per modificare i vari file json del singolo progetto app (angular.json)

cercando in rete ho trovato un interessante articolo di Medium.

https://medium.com/@nit3watch/angular-shared-assets-with-multiple-apps-nrwl-nx-b4801c05c771

Svantaggi non sembrano esserci se non nel fatto che per ogni app bisogna modificare l’angular json per condvidere gli assets.

3 Come creare un progetto workspace

Come suggerisce il sito ufficiale di Angular possiamo creare un progetto di tipo workspace con il seguente comando

ng new my-workspace --create-application false

Verrà creato un normale progetto angular con una unica differenza nella struttura di files e cartelle

è presente anche la cartella projects nella quale andranno tutte le app che andremo a creare successivamente.

Passiamo a creare un paio di app di prova lanciando i seguenti comandi:

cd my-workspace
ng generate application prima-app
ng generate application seconda-app

La creazione di nuove app risulta essere velocissima in quanto il download dei node_modules non viene effettuato. Lanciato questi due comandi possiamo vedere cosa è stato creato nella cartella projects.

4. Runtime e compilazione

Quando vogliamo lanciare con il server di sviluppo una app dobbiamo eseguire il seguente comando:

ng serve prima-app

Oppure entrare con il terminale nella cartella della singola app ed eseguire:

ng serve

Stesso discorso va applicato alla compilazione per la produzione, dovremo difatti lanciare il seguente comando:

ng build prima-app
Categorie: Tutorial

0 commenti

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *