Angular 10 - Ce trebuie să știți despre el

Angular a lansat recent o nouă versiune pe 24 iunie 2020. A fost lansată numai după 4 luni de la lansarea versiunii 9.0 a Angular. Cel mai recent Angular 10 este o versiune beta – ceea ce înseamnă că echipa Angular se apropie de lansarea finală a celei mai recente versiuni a acestui cadru dezvoltat de Google, orientat spre dactilografiere.

Dacă ești un dezvoltator web sau cineva care dorește să dezvolte o aplicație web pentru afacerea ta, trebuie să știi ce are de oferit această nouă versiune. Deoarece versiunea beta este lansată în termen de 4 luni de la lansarea ultimei versiuni, s-ar putea să vă întrebați dacă este un succes sau o pierdere! Suntem aici pentru a vă ajuta să găsiți răspunsul. Să aruncăm o privire mai atentă la caracteristicile cheie ale Angular 10.

Caracteristicile lui Angular 10

Deși echipa Angular a susținut că cea mai recentă versiune se va concentra în principal pe instrumentele de calitate și pe ecosistem, în loc să introducă o multitudine de caracteristici noi, am efectuat un studiu amplu și am adus o listă cuprinzătoare a ofertelor de valoare la care vă puteți aștepta de la versiune. . Să verificăm atunci.

• Selector nou de intervale de date

Biblioteca de componente Angular Material UI este acum echipată cu un nou selector de interval de date. Nu sunteți sigur ce este? Un selector de intervale de date poate fi atașat paginilor web. Afișează calendare pentru a selecta ore, date sau orice perioadă de timp predefinită, cum ar fi „ultimele 20 de zile”.

Dacă doriți ca utilizatorii dvs. să selecteze un interval de date în loc de o singură dată, puteți utiliza componentele mat-date-range-picker și mat-date-range-input.

• Opțional Setări stricte

Angular 10 are o configurație de proiect mai strictă în timp ce creează un nou spațiu de lucru cu ng new. Odată ce activați acest indicator, va introduce câteva setări noi în proiectul dvs., cum ar fi îmbunătățirea mentenanței, permițând CLI-ului să efectueze o optimizare avansată în aplicația dvs., ajutând la detectarea erorilor din timp și așa mai departe.

Iată un domeniu de lucru de bază al steagului strict:

- Transformarea verificării tipului de șablon la Strict
-Activarea strict mai mult în TypeScript
-Configurarea regulilor de listing pentru a preveni utilizarea „orice” ca declarație de tip
-Reducerea bugetelor implicite ale pachetului

• Avertismente despre importurile CommonJS

Utilizarea unei dependențe împachetate cu CommonJS face pachetele mari și, prin urmare, încetinește aplicația. Angular 10 avertizează dezvoltatorii odată ce o construcție atrage unul dintre astfel de pachete. În acest fel, își pot anunța dependențele că ar prefera un pachet de module ECMAScript (ESM).

• Actualizări

Au fost aduse câteva actualizări majore la dependențele lui Angular, astfel încât să se sincronizeze cu ecosistemul JavaScript. Acestea sunt după cum urmează:

-TypeScript este actualizat la TypeScript 3.9. Ajută echipa să lucreze la îmbunătățirea performanței și stabilității.
-TSLint este actualizat la v6
-TSLib este actualizat la v2.0

Aspectul proiectului a fost, de asemenea, actualizat. Prin urmare, puteți vedea un nou fișier tsconfig.base.json în Angular 10. Acest fișier acceptă mai bine IDE-urile, tipul de rezolvare a instrumentului de compilare și configurațiile pachetului.

În afară de acestea, cea mai recentă versiune Angular împuternicește lucruri precum accelerarea compilatorului, experiențe de editare, remedieri prompte și completări.

• Performanță ngcc îmbunătățită

Această caracteristică Angular 10 promovează implementarea unui instrument de căutare a punctelor de intrare bazat pe program. Acesta poate procesa punctele de intrare unde pot ajunge doar programele definite de fișierul tsconfig.json. În plus, dependențele sunt ascunse în interiorul expoziției punctului de intrare și pot fi citite fără a fi calculate de fiecare dată.

Calea de bază a fiecărui pachet împreună cu punctele de intrare nu trebuie să fie stocate în fișier. Prin urmare, aplicațiile nu trebuie să stocheze matrice goale inutile. Această caracteristică ajută la manifestarea și reducerea dimensiunii fișierului la punctul de intrare, chiar și pentru modulele de noduri mari. Acest lucru crește semnificativ performanța.

• Îmbinarea mai multor fișiere

Cea mai recentă versiune Angular acceptă îmbinarea mai multor documente de traducere fără probleme. În versiunile anterioare, acestea puteau încărca un singur fișier. Acum utilizatorii pot specifica mai multe documente pentru fiecare localizare, iar tranzacțiile din toate fișierele pot fi îmbinate printr-un ID de mesagerie. Documentul cel mai esențial va fi pus pe primul loc cu traduceri alternative mai târziu.

• Timp de expirare a blocării asincrone

Un alt lucru interesant despre Angular 10 este că timpul de expirare a blocării asincrone este configurat în această versiune. Acesta acceptă fișierul ngcc.config.js pentru a ajusta întârzierile de reîncercare și încercările de reîncercare în AsyncLocker. Un test de integrare le permite dezvoltatorilor să monitorizeze timpul de expirare, să folosească fișierul ngcc.config.js pentru a reduce intervalul de timp de expirare și pentru a preveni ca testul să dureze mult. Nu e de mirare că profesioniștii companiei de dezvoltare de aplicații web primesc cea mai recentă versiune Angular cu o mare ușurare!

• Router

Gardianul CanLoad poate reveni la UrlTree în cea mai recentă versiune Angular. Gardianul CanLoad care returnează UrlTree anulează orice navigare de ultimă oră și, la rândul său, ajută la redirecționare. Acest lucru se potrivește cu comportamentul actual cu dispozitivele de protecție CanActivate disponibile – acestea sunt, de asemenea, adăugate aici. Cu toate acestea, acest lucru nu produce niciun impact asupra preîncărcării.

• Compila

Ahead-of-Time (AOT) compilează o aplicație și bibliotecile sale în momentul construirii. Aceasta este o practică obișnuită începând cu Angular 9. Poate converti codurile în timpul construirii chiar înainte ca browserul să descarce și ulterior să ruleze acel cod. Desigur, acest lucru asigură o redare mai rapidă în browser. Compilatorul elimină solicitările AJAX separate pentru fișierele sursă prin introducerea de șabloane HTML externe și foi de stil CSS în aplicația JavaScript.

Există câteva modificări evidente făcute în AOT în Angular 10:

1. Compilarea sa incrementală ajută la atingerea unor timpi de construcție mai buni
2. Cu un cod generat foarte compatibil cu scuturarea copacilor, poate atinge dimensiuni mai bune de construcție
3. Versiunea vă permite să explorați mai multe funcții noi, cum ar fi încărcarea leneșă a componentei în loc de module, metaprogramarea sau componentele de ordin superior, cel mai recent sistem de detectare a modificărilor care nu se bazează pe Zone.js etc.

• Eroare remediată

În această versiune, au fost efectuate o serie de remedieri de erori. Acestea includ eliminarea oricărei instanțe neadresate a intervalului din compilator, rezolvarea erorilor legate de migrare în timp ce se importă un simbol inexistent, identificarea modulelor afectate de suprascrieri în TestBed și altele. Mai mult, există și o soluție de soluție în nucleu pentru remedierea erorii Terser Inlining.

• O mai bună implicare a comunității

Angular are deja o mare comunitate globală de dezvoltatori care oferă în mod constant oferte de valoare pentru proiectele Angular pe întregul spectru. Recent, organizația în sine plănuiește să adopte strategii și să facă o investiție pentru a stimula comunitatea și a face platforma și mai bună.

• Deprecieri și eliminări

Formatul de pachet Angular nu mai include pachetele FESM5 sau ESM5. Acest lucru vă permite să economisiți 119 MB de timp de descărcare și instalare în timp ce rulați instalarea yarn sau npm în bibliotecile și pachetele Angular. Aceste formate pot fi eliminate, deoarece orice reducere de nivel pentru a ajuta ES5 este efectuată la sfârșitul procesului de dezvoltare.

În plus, organizația Angular a renunțat la orice suport pentru browsere mai vechi precum IE9, 10 și Internet Explorer Mobile.

• Alte Schimbări

Angular 10 aduce câteva schimbări inovatoare. De exemplu, Logic este actualizat în corespondență cu formatarea perioadelor de zi care se extind dincolo de miezul nopții. Dacă aplicația dvs. folosește formatDate sau DatePipe sau chiar codurile de format b și B, aceasta va fi afectată de această modificare.

O altă modificare este că orice rezolutor care returnează EMPTY va anula navigarea. Dezvoltatorii trebuie să actualizeze soluțiile cu o anumită valoare, cum ar fi implicit! Gol.

Angular NPM nu conține câteva comentarii jsdoc pentru a sprijini optimizările avansate ale Closure Compiler. Cei care folosesc Closure Compiler ar trebui să consume mai bine pachetele Angular construite direct din surse, decât să consume versiunile publicate pe NPM. Pentru o perioadă temporară, utilizatorii își pot folosi canalul de construcție actual.

În această versiune, anteturile Varie sunt trecute cu vederea în timpul preluării surselor din cache-urile ServiceWorker. Acest lucru are ca rezultat preluarea surselor chiar dacă anteturile lor nu sunt similare. Dacă o aplicație trebuie să își diferențieze răspunsurile pe baza antetelor cererii, asigurați-vă că Angular ServiceWorker este configurat pentru a evita stocarea în cache a oricărei resurse afectate.

Avertismentele despre orice elemente necunoscute sunt acum notate ca erori. Acest lucru nu va distruge aplicația, dar poate activa instrumente care se așteaptă să fie conectate prin console.error.

Cum se actualizează la Angular 10

Pentru a face upgrade la cea mai recentă versiune de Angular, puteți utiliza următoarea comandă:

actualizare @angular/cli @angular/core

Iată un ghid definitiv pentru actualizarea la versiunea Angular 10. Cu toate acestea, fără expertiză tehnologică, comanda poate să nu fie de niciun folos. Angajați servicii profesionale de dezvoltare Angular pentru a actualiza cu succes la Angular 10.

Concluzie
Toată comoditatea oferită de Angular 10 v-a convins poate să vă actualizați versiunea cadrului aplicației. Aveți încredere în noi, merită efortul.