Angular 10 – Cosa devi sapere a riguardo

Angular ha recentemente rilasciato una nuova versione il 24 giugno 2020. È stata lanciata solo dopo 4 mesi dal rilascio della versione 9.0 di Angular. L'ultimo Angular 10 è una versione beta, il che significa che il team di Angular si sta avvicinando al rilascio finale dell'ultima versione di questo framework orientato ai dattiloscritti sviluppato da Google.

Se sei uno sviluppatore web o qualcuno che cerca di sviluppare un'app web per la tua azienda, devi sapere cosa ha da offrire questa nuova versione. Poiché la versione beta viene rilasciata entro 4 mesi dal rilascio dell'ultima versione, potresti chiederti se è un successo o meno! Siamo qui per aiutarti a trovare la risposta. Diamo un'occhiata più da vicino alle caratteristiche principali di Angular 10.

Caratteristiche di Angular 10

Sebbene il team di Angular abbia affermato che l'ultima versione si concentrerà principalmente sugli strumenti di qualità e sull'ecosistema invece di introdurre una pletora di nuove funzionalità, abbiamo condotto uno studio approfondito e fornito un elenco completo delle offerte di valore che puoi aspettarti dalla versione . Diamo un'occhiata allora.

• Nuovo selettore intervallo di date

La libreria dei componenti dell'interfaccia utente dei materiali angolari è ora dotata di un nuovo selettore di intervalli di date. Non sei sicuro di cosa sia? Un selettore di intervallo di date può essere allegato alle pagine web. Apre i calendari per selezionare orari, date o qualsiasi periodo di tempo predefinito come "ultimi 20 giorni".

Se desideri che i tuoi utenti selezionino un intervallo di date anziché una singola data, puoi utilizzare i componenti mat-date-range-picker e mat-date-range-input.

• Impostazioni più rigorose opzionali

Angular 10 ha una configurazione del progetto più rigorosa durante la creazione di un nuovo spazio di lavoro con ng new. Una volta abilitato, questo flag introdurrà alcune nuove impostazioni nel tuo progetto come il miglioramento della manutenibilità, consentendo alla CLI di eseguire un'ottimizzazione avanzata nella tua applicazione, aiutando a rilevare i bug in anticipo e così via.

Ecco un ambito di lavoro di base del flag strict:

-Trasformare il controllo del tipo di modello su Strict
-Abilitazione più rigorosa in TypeScript
-Configurazione di regole di linting per impedire l'uso di "any" come dichiarazione di tipo
-Ridurre i budget dei bundle predefiniti

• Avvisi sulle importazioni CommonJS

L'uso di una dipendenza piena di CommonJS rende i bundle di grandi dimensioni e quindi rallenta l'applicazione. Angular 10 avverte gli sviluppatori quando una build viene inserita in uno di questi bundle. In questo modo, possono far sapere alle loro dipendenze che preferirebbero un bundle del modulo ECMAScript (ESM).

• Aggiornamenti

Sono stati apportati alcuni importanti aggiornamenti alle dipendenze di Angular in modo da sincronizzarsi con l'ecosistema JavaScript. Questi sono i seguenti:

-TypeScript viene aggiornato a TypeScript 3.9. Aiuta il team a lavorare per migliorare le prestazioni e la stabilità.
-TSLint è aggiornato alla v6
-TSLib è aggiornato alla v2.0

Aggiornato anche il layout del progetto. Pertanto, puoi vedere un nuovo file tsconfig.base.json in Angular 10. Questo file supporta meglio gli IDE, il tipo di risoluzione dello strumento di compilazione e le configurazioni dei pacchetti.

Oltre a questi, l'ultima versione di Angular consente cose come l'accelerazione del compilatore, le esperienze di modifica, le correzioni rapide e i completamenti.

• Prestazioni ngcc migliorate

Questa funzione di Angular 10 promuove l'implementazione di un cercatore di punti di ingresso basato sul programma. Questo può elaborare i punti di ingresso in cui solo un programma definito dal file tsconfig.json può raggiungere. Inoltre, le dipendenze sono nascoste all'interno della mostra del punto di ingresso e possono essere lette senza essere calcolate ogni volta.

Il percorso di base di ogni pacchetto insieme ai punti di ingresso non deve essere archiviato nel file. Pertanto le applicazioni non devono memorizzare array vuoti non necessari. Questa funzionalità aiuta a manifestare e ridurre le dimensioni del file nel punto di ingresso, anche per i moduli dei nodi di grandi dimensioni. Questo aumenta notevolmente le prestazioni.

• Unire più file

L'ultima versione di Angular supporta l'unione di più documenti di traduzione senza problemi. Nelle versioni precedenti, questi potevano caricare un solo file. Ora gli utenti possono specificare più documenti per locale e le transazioni di tutti i file possono essere unite da un ID di messaggistica. Il documento più essenziale verrà inserito per primo con le traduzioni di riserva in seguito.

• Timeout blocco asincrono

Un'altra cosa interessante di Angular 10 è che il timeout di blocco Async è configurato in questa versione. Ciò supporta il file ngcc.config.js per regolare i ritardi e i tentativi di ripetizione in AsyncLocker. Un test di integrazione consente agli sviluppatori di monitorare il timeout, utilizzare il file ngcc.config.js per ridurre l'intervallo di timeout e impedire che il test richieda molto tempo. Non c'è da stupirsi se i professionisti delle società di sviluppo di applicazioni web stanno accogliendo l'ultima versione di Angular con un enorme sollievo!

• Router

La guardia CanLoad può tornare a UrlTree nell'ultima versione di Angular. La protezione di CanLoad che restituisce UrlTree annulla qualsiasi navigazione all'avanguardia e, a sua volta, aiuta a reindirizzare. Questo corrisponde al comportamento attuale con le protezioni CanActivate disponibili – anche queste sono state aggiunte qui. Tuttavia, questo non produce alcun impatto sul precaricamento.

• Compilare

Ahead-of-Time (AOT) compila un'app e le relative librerie in fase di compilazione. Questa è una pratica comune da Angular 9. Può convertire i codici durante il tempo di compilazione anche prima che il browser scarichi e successivamente esegua quel codice. Naturalmente, questo garantisce un rendering più veloce nel browser. Il compilatore elimina le richieste AJAX separate per i file di origine incorporando modelli HTML esterni e fogli di stile CSS all'interno dell'applicazione JavaScript.

Ci sono alcune modifiche evidenti apportate all'AOT in Angular 10:

1. La sua compilazione incrementale aiuta a raggiungere tempi di costruzione migliori
2. Con un codice generato altamente compatibile con lo scuotimento degli alberi, può raggiungere dimensioni di costruzione migliori
3. La versione consente di esplorare diverse nuove funzionalità come il caricamento lento del componente anziché dei moduli, la metaprogrammazione o componenti di ordine superiore, l'ultimo sistema di rilevamento delle modifiche non basato su Zone.js, ecc.

• Bug corretto

In questa versione sono state apportate numerose correzioni di bug. Questi includono la rimozione di qualsiasi istanza non indirizzata dell'intervallo nel compilatore, la risoluzione degli errori relativi alla migrazione durante l'importazione di un simbolo inesistente, l'identificazione dei moduli interessati dalle sostituzioni in TestBed e altri. Inoltre, c'è anche una soluzione alternativa nel core per correggere il bug di Terser Inlining.

• Migliore coinvolgimento della comunità

Angular ha già una vasta comunità di sviluppatori globale che fornisce costantemente offerte di valore per i progetti Angular attraverso l'intero spettro. Recentemente l'organizzazione stessa sta pianificando di adottare strategie e fare un investimento per potenziare la comunità e rendere la piattaforma ancora migliore.

• Deprecazioni e rimozioni

Il formato pacchetto angolare non include più i bundle FESM5 o ESM5. Ciò ti consente di risparmiare 119 MB di tempo di download e installazione durante l'esecuzione di yarn o npm install in librerie e pacchetti Angular. Questi formati possono essere scartati poiché qualsiasi riduzione del livello per assistere ES5 viene eseguita alla fine del processo di sviluppo.

Inoltre, l'organizzazione Angular ha deprecato qualsiasi supporto per i browser meno recenti come IE9, 10 e Internet Explorer Mobile.

• Altre modifiche

Angular 10 apporta alcune modifiche rivoluzionarie. Ad esempio, Logic viene aggiornato in corrispondenza di periodi di formattazione giornalieri che si estendono oltre la mezzanotte. Se l'applicazione utilizza formatDate o DatePipe o anche i codici di formato b e B, sarà interessata da questa modifica.

Un'altra modifica è che qualsiasi resolver che restituisce EMPTY annullerà la navigazione. Gli sviluppatori devono aggiornare i resolver con un valore specifico come default!Empty.

Angular NPM non contiene alcuni commenti jsdoc per supportare le ottimizzazioni avanzate di Closure Compiler. Coloro che utilizzano Closure Compiler dovrebbero consumare meglio i pacchetti Angular creati direttamente dai sorgenti piuttosto che consumare le versioni pubblicate su NPM. Per un periodo temporaneo, gli utenti possono utilizzare la pipeline di build corrente.

In questa versione, le intestazioni Vary vengono trascurate durante il recupero delle origini dalle cache di ServiceWorker. Ciò comporta il recupero delle fonti anche se le loro intestazioni non sono simili. Se un'applicazione deve differenziare le sue risposte in base alle intestazioni della richiesta, assicurati che Angular ServiceWorker sia configurato per evitare la memorizzazione nella cache di qualsiasi risorsa interessata.

Gli avvisi su eventuali elementi sconosciuti vengono ora annotati come errori. Questo non interromperà la tua app, ma può attivare strumenti che si aspettano di essere registrati tramite console.error.

Come aggiornare ad Angular 10

Per eseguire l'aggiornamento all'ultima versione di Angular, puoi utilizzare il seguente comando:

ng update @angular/cli @angular/core

Ecco una linea guida definitiva sull'aggiornamento alla versione 10 di Angular. Tuttavia, senza competenze tecniche, il comando potrebbe non essere di alcuna utilità. Coinvolgi i servizi di sviluppo professionale di Angular per aggiornare con successo ad Angular 10.

Conclusione
Tutta la comodità offerta da Angular 10 forse ti ha convinto ad aggiornare la versione del framework della tua app. Fidati di noi, ne vale la pena.