Published on Sat Jun 01 2019 09:20:00 GMT+0000 (Coordinated Universal Time) by Valerio Como

Angular 8

What’s new in Angular 8

Angular 8 porta con se un set di novità per tutti gli sviluppatori che lavorano con questa tecnologia made in Google.

New Features

Ivy

Angular 8 introduce un nuovo view engine. Ivy è stato implementato from scratch e manterrà la stessa API del suo predecessore, promettendo di produrre bundle di dimensioni inferiori. Allo stato attuale degli sviluppi, Ivy è una feature sperimentale del framework e non è abilitato di default in quanto considerato not ready for production. Angular consente di creare un progetto ex-novo utilizzando il nuovo view engine oppure è possibile testarlo su un progetto esistente, abilitando alcuni flag nel file angular.json.

Per informazioni più dettagliate, fare riferimento alla documentazione.

Bazel

Bazel è un orchestratore di processi di build che Angular ha inglobato in questa versione. Come per Ivy, anche Bazel è una feature sperimentale, non completa e not ready for production. Angular ha introdotto questa nuova funzionalità per efficientare i processi di build. Bazel è abilitabile tramite configurazione, in analogia con Ivy.

Per informazioni più dettagliate, fare riferimento alla documentazione ufficiale a questo link.

Differential loading

Angular CLI è stata potenziata con una nuova funzionalità, chiamata Differential Loading. Questa feature genera differenti bundle, ognuno dei quali ottimizzati per differenti browser. Ciò consente di creare bundle più leggeri (nell’ordine del 7%-20%) per i browser che sfruttano le ultime tecnologie del mondo Javascript. Differential loading è abilitata di default e ha un principio di funzionamento molto elementare: Angular riconosce la tipologia di browser e effettua il caricamento del bundle più adatto.

Module Dynamic Import

Angular delega al Router il lazy loading dei moduli di una applicazione, mediante l’attributo loadChildren. Con il rilascio della versione 8 è stata modificata la sintassi relativa a questo parametro di configurazione.

Nelle versioni antecedenti, la sintassi era simile alla seguente:

{path: '/user', loadChildren: './user/user.module#UserModule'}

Dalla versione 8, la sintassi sarà simile alla seguente:

{
  path: `/user`, 
  loadChildren: () => import(`./user/user.module`).then(m => m.UserModule)
}

L’adozione di questa nuova sintassi avvicina Angular allo standard degli import di Javascript. Inoltre, questa nuova sintassi facilita il lavoro di noi developer perché migliora l’integrazione con i vari IDE.

Breaking changes

Http Module

Il package @angular/http, deprecato dalla versione 4, è stato rimosso dal framework. Al suo posto deve essere utilizzato @angular/common/http.

Per maggiori informazioni sulla migrazione al nuovo pacchetto consultare la documentazione ufficiale a questo link.

Static Query Migration

Con il futuro rilascio della versione 9, Angular punterà a risolvere alcuni comportamenti anomali di @ViewChild e @ContentChild. Per far ciò gli sviluppatori di Angular hanno pianificato un processo di migrazione alla nuova API di queste funzionalità.

Il primo passo di questa migrazione coincide l’addizione di un parametro di configurazione obbligatorio, static. Questa prima modifica è statarilasciata con Angular 8*.* Il flag serve al compilatore per scegliere la strategia di risoluzione da adottare (dynamic vs static). L’introduzione anticipata di questa configurazione consente agli sviluppatori di aggiornare librerie e applicazioni. Il rilascio della versione 9 concluderà la migrazione e il parametro static non sarà più obbligatorio. Il compilatore adopererà la strategia di risoluzione dynamic come default.

Per altre informazioni, vi rimando alla documentazione ufficiale.

What else?

Per ulteriori informazioni su funzionalità e breaking changes vi invito a consultare il changelog del repository ufficiale e il post del blog ufficiale di Angular.

Written by Valerio Como