Angular 8 vediamo cosa c’è di nuovo

Puntuale come sempre il team di Angular rilascia una nuova versione! Ebbene si, siamo arrivati all’ottava. Anche questa volta ci aspettano molte novità interessanti.
Il 28 maggio Angular 8 è arrivato portando molti miglioramenti delle prestazioni. Esaminiamo le novità e le modalità per aggiornare le vostre web-app da Angular 7 a Angular 8.

Differential loading

Grazie al differential loading le vostre web-app saranno automaticamente più performanti, andiamo a vedere come.

Quello che succede dietro le quinte è che vengono creati due bundle durante la build per la produzione, il primo per i browser più moderni che supportano ES2015 e il secondo per quelli meno recenti che supportano solo la versione ES6 di JavaScript.
Il bundle corretto verrà caricato automaticamente dal browser.

Tutto ciò si fa si che i browser più nuovi caricheranno meno codice avendo prestazioni migliori. Per fare ciò non bisogna fare assolutamente nulla, tranne che aggiornare Angular alla versione 8, vi basterà tranquillamente lanciare il comando di  ng build --prod e sarà tutto più veloce, tranne la build che ci metterà il doppio del tempo per creare 2 bundle.

cli

Il cli di Angular è in continuo aggiornamento e ora i comandi ng build, ng test e ng run possono essere estesi da librerie o tools di terze parti.
Come ad esempio già fa AngularFire.

Import dinamici per le lazy routes

Lazy-loaded routes adesso utilizza lo standard sintattico degli import dinamici.
In pratica prima un rotta veniva dichiarata in questo modo:
{ path: '/rotta', loadChildren: './rotta/rotta.module#RottaModule' }
Mentre adesso con l’import dinamico viene dichiarata così:
{ path: `/rotta`, loadChildren: () => import(`./rotta/rotta.module`).then(m => m.RottaModule) }

Per fortuna Google ha deciso di farci lavorare il meno possibile e quindi questo cambiamento sarà effettuato automaticamente dal comando ng upgrade quando passerete alla nuova versione.

ivy?

Vi starete chiedendo il tanto atteso Ivy (il nuovo render engine di Angular) che fine abbia fatto.
Purtroppo dobbiamo aspettare ancora per avere una versione stabile di Ivy, ma per i più temerari è comunque possibile provarlo seguendo la guida ufficiale.

update angular 7 –> 8

Fare l’update da Angular 7 a 8 nella maggior parte dei casi è banalissimo, basta lanciare il comando ng update @angular/cli @angular/core e farà tutto lui automaticamente.
Se si sta usando anche Angular Material allora va aggiornato anche quello semplicemente con un altro comando ng update @angular/material.

Il discorso cambia se in precedenza non è stata fatta la migrazione per passare al nuovo HttpClient e a RxJs 6.

Invece c’è una breaking change che tocca chiunque farà l’update alla nuova versione.
Se usate @ViewChild e @ContentChild nel vostro codice, dove fare attenzione alla migrazione verso le static query.
Durante l’update il CLI di Angular vi notificherà di questo cambiamento in questo modo: “With Angular version 8, developers need to explicitly specify the timing of ViewChild and ContentChild queries”.
Se durante l’update, Angular CLI non riesce a capire automaticamente se utilizzare il flag statico o dinamico nella query, dovrete aggiornare il codice manualmente dove troverete un commento con scritto /* TODO: add static flag */.

Ecco un esempio di come dovrà essere il vostro codice:
Nel codice del componente andremo ad aggiungere il parametro static
@ViewChild('foo', {static: false}) foo: ElementRef;
Nel template bisognerà avere un elemento identificato con “foo”
<div foo></div>
Come facciamo a sapere quale sia il flag corretto da usare? Andando a leggere nella documentazione, ma nella maggior parte dei casi il flag static sarà settato su false.

Per il resto vi lascio a un tool di Angular per l’update super guidato, con tanto di check-list delle cose da fare.

Per altri articoli su Angular e rimanere aggiornati andate nella sezione apposita dove troverete un sacco di articoli che fanno al caso vostro!!

https://italiancoders.it/angular-8-vediamo-cosa-ce-di-nuovo/