Le novità di Angular 15

E’ arrivato Angular 15! La nuova versione è la sintesi di numerosi miglioramenti all’esperienza di sviluppo ed alle performance applicative. Come sempre l’aggiornamento rende più funzionale e ricco il framework.

Per aggiornare alla versione 15 puoi visitare il sito update.angular.io che ti mette a disposizione un form da compilare indicando da quale versione migrare e ti indica cosa devi fare.

Standalone API

Introdotte con Angular 14, le API abilitano la realizzazione di applicazioni senza l’utilizzo di NgModules. Da questa nuova versione le Standalone API fanno parte stabile del complessivo delle API e lavorano in maniera completa con HttpClient, Angular Element, il router e le altre componenti.

Nel caso del router puoi utilizzare l’API per costruire applicazioni multi-route e per rimuovere caratteristiche non utilizzate così ottenendo una riduzione, che potrebbe arrivare anche all’11%, della dimensione del codice del router nel bundle.

Directive Composition API

Ispirata dalle richieste della community sulla popolare “feature request” su GitHub, la Directive Composition API abilita gli sviluppatori a migliorare gli host element con direttive e permettendo di equipaggiarli con strategia di riutilizzo del codice. In pratica aggiungendo direttive agli elementi puoi rendere scalabile quell’elemento per un uso successivo. Inoltre per evitare conflitti di nomi nei vari riutilizzi del codice Angular ha un meccanismo di risoluzione di tali conflitti.

Image Directive

Anche questa funzionalità introdotta con Angular 14, è stata migliorata e resa stabile ed ha permesso un miglioramento osservato del 75% nel Largest Contentful Paint (LCP).

In questa versione sono state anche introdotte due nuove funzionalità di Image Directive:

• la generazione automatica del srcset: la direttiva si assicura che venga richiesta un’immagine delle dimensioni corrette attraverso la generazione automatica dell’attributo srcset.
• Fill mode: con questa modalità l’immagine riempie il contenitore padre senza dover dichiarare le dimensioni. Utile se non si conosce a priori le dimensioni dei vari elementi.

Material Design Components for Web(MDC)

Grazie al Material Design Components for Web(MDC), Angular si allinea sempre più alle specifiche del Material Design ed abilita l’utilizzo di Material 3. Sono state aggiornate numerosissime componenti( al seguente link la lista).

Tale cambiamento strutturale potrebbe comportarti che tu abbia necessità di modificare alcuni aspetti della tua applicazione soprattutto dal punto di vista del CSS. Angular ti ha messo a disposizione una guida al seguente link.

Altri aggiornamenti

Nella nuova versione hanno inoltre trovato spazio:

• Router guard: ora è possibile inizializzare completamente il router guard anche solamente con la relativa dichiarazione. Alcuni esempi sono disponibili al seguente link.
• Router import: il router automaticamente cercherà gli export delle componenti in ambito lazy loading e li utilizzerà quando necessario.
• Stack trace: grazie alla collaborazione con il team di Chrome DevTools è stato migliorato il sistema di debugging e con Jia Li integrato Zone.js al fine di fornire stack trace con i link. Per un approfondimento puoi visitare il seguente link.
• Component Dev Kit (CDK) listbox: è stata aggiunta la nuova primitiva listbox a CDK al fine di personalizzare le liste in base alla tua esigenza.
• Esbuild: ancora in fase sperimentale, esbuild ora supporta la compilazione di Sass, template SVG, file replace e la funzionaltià watchsupport.
• possibilità di configurare le opzioni di default per DataPipe;
• possibilità di aggiungere priorità nel pre-caricamento delle immagini.

Deprecations

In questa versione sono deprecati :

• l’opzione providedIn: ‘any’;
• l’opzione providedIn: NgModule;
• gli aggiornamenti per @angular/flex-layout al fine di continuità al “Modern CSS” in Angular.

Glue Labs e Angular

Utilizziamo Angular dalla sua nascita, ti forniamo lo sviluppo di applicazioni, la formazione avanzata e l’assistenza specialistica in modalità Time & Material, training on job e con piani di supporto tecnico per i tuoi progetti. Abbiamo integrato Angular in diversi applicativi e con numerosi Clienti. Ti garantiamo ogni nostro progetto di sviluppo 12 mesi da qualsiasi bug. Contattaci subito e senza impegno per un preventivo gratuito.