Un tempo il sito di Angular proponeva l’installazione base, ora si consiglia l’installazione di Angular Cli. Chi ha lavorato con Angular2 base e con Angular Cli conosce bene alcuni vantaggi del secondo:
- Prima di tutto la cartella dist, facendo ng build, angular cli (o meglio webpack configurato da Angular Cli), crea una versione più snella che lega insieme e minimizza i file javascript. Bastava provare a vedere le richieste HTTP di un applicazione Angular Base e confrontarla con la build realizzata con Angular Cli per vedere subito la differenza nel numero delle chiamate.
- Altro vantaggio è la creazione automatica di componenti, servizi e altro, che fa si di evitare le ripetizioni nella scrittura del codice e gli import nel model che a volte possono essere dimenticati
- Rapidità di installazione, il processo era più complesso, bisognava copiare codice all’interno di alcuni file, come il package.json e far caricare poi tutti i componenti con npm install.
Installazione con Angular Cli
Prima di partire è indispensabile avere installati sul proprio pc npm e node js. Possiamo verificare semplicemente se li abbiamo installati con il comando di richiesta della versione:
npm -v node -v
In caso uno dei due non sia presente è indispensabile installarlo.
Iniziamo invece a vedere l’installazione di angular cli, e questa è veramente semplicissima. Con questo comando andremo a installare angular cli sulla nostra macchina:
npm install -g @angular/cli
Poi si crea il progetto
ng new [nomeapp]
quindi, ad esempio, se volessimo chiamare la nostra app test il comando sarebbe il seguente:
ng new test
Verrà creata una cartella di nome test con tutti i file base di Angular, ora entriamo nella cartella e digitiamo:
ng serve --open
Praticamente aggiungendo dopo ng serve, –open automaticamente verrà aperta l’applicazione sul nostro browser.
Refreshare modifiche alla build
È di sicuro molto comodo far partire l’applicazione tramite ng serve ma il problema è che in casi più rari sarebbe comodo che compilasse direttamente la build automaticamente ad ogni nostra modifica.
Infatti mi sono trovato nella situazione di effettuare delle chiamate rest e di trovarmi davanti a problemi di CORS, problemi che in produzione non ci sarebbero visto che backend e frontend alloggiano sullo stesso server, ma in locale, in fase di testing, è fastidioso dover attivare plugin che consentano le chiamate su indirizzi differenti.
E quindi mi sono informato per trovare la soluzione. Digitare ng build ad ogni modifica non è affatto comodo e richiede molto tempo, c’è però un comando che fa proprio al caso nostro.
ng build --watch
Questo comando ci consente di aggiornare la nostra build dopo ogni modifica, ed esattamente come il serve aggiorna solo ciò che abbiamo modificato quindi risulta molto veloce. A differenza di ng serve questo comando chiaramente non refresherà direttamente la pagina, perchè non farà partire un server node js.