Angular 22, lëshuar më3 qershor 2026, është versioni më i fundit i qëndrueshëm i kornizë në kohën e këtij shkrimi. Krahasuar me Angular 21 (nëntor 2025, i cili kishte bërë pa zona të paracaktuar dhe prezantoi Format e Sinjalit si një API eksperimentale), këtë version konsolidon në prodhim të qëndrueshëm gjithçka që ishte ende në pamjen paraprake të zhvilluesit: Format e sinjalit, Resource API dhe Angular Aria bëhen zyrtarisht të përdorshëm në prodhim, parazgjedhjet e disave API-të ndryshojnë drejt modeleve më moderne dhe vjen një shtresë e parë e veglave të AI të integruara në CLI.
Si gjithmonë me një version të fundit, kontrolloni versionin e saktë të instaluar dhe shënimet e lëshimit
zyrtarët përpara se të planifikojnë një përmirësim në prodhim:ng versionDhenpmview
Versionet @këndore/coreata kthejnë statusin real të projektit tuaj dhe regjistrin npm,
më i besueshëm se çdo përmbledhje statike.
Vështrim i shpejtë
- Forma të qëndrueshme të sinjalit: Sistemi i formave të bazuara në sinjal, eksperimental në v21, tani është gati për prodhim.
- API-ja e burimeve të qëndrueshme:
burimet (),rxResource()DhehttpResource()kalojnë nga eksperimentale në stabile. - Ajri i qëndrueshëm këndor: paketa
@këndore/ariapër modelin e aksesueshmërisë kalon nga pamja paraprake e zhvilluesit në disponueshmërinë e përgjithshme. - OnPush si parazgjedhje: përdorimi i komponentëve të rinj
OnPushnë vend tëTë eturpër zbulimin e ndryshimeve. - Merr API si parazgjedhje për HttpClient: Zëvendëson XMLHttpRequest, me
withFetch()i zhvlerësuar sepse tani është i tepërt. - Përgatitja e AI në CLI: Angular Skills dhe mbështetje eksperimentale WebMCP për agjentët kodues.
- Kërkohet TypeScript 6: Kërkesa minimale e ngritur, Nyja 20 nuk mbështetet më (Nyja minimale 22).
Detajet e veçorisë
Format e sinjalit: nga eksperimentale në të qëndrueshme
Format e sinjalit kombinojnë shtypjen e fortë të formave tradicionale reaktive me reagimin e grimcuar
e sinjalit, duke eliminuar shumë nga boilerplate eFormGroup/FormControl.
Vlerësuesit vijnë në këtë versionMinDate()/maxDate(), debounce amtare
mbi ngjarjet e turbullimit dhe një metodëgetError ()për të rikuperuar gabimet e synuara pa
përshkojnë të gjithë pemën e formës.
// Signal Forms — validazione con debounce sul blur, stabile da v22
const form = signalForm({
email: field('', { validators: [required(), email()] }),
});
debounce(form.email, 'blur', 300);
API-ja e burimeve: Marrja e të dhënave reaktive
// httpResource() — fetching dichiarativo, nessun switchMap manuale
userResource = httpResource(() => `/api/users/${this.userId()}`);
// userResource.value(), userResource.isLoading(), userResource.error() sono Signal reattivi
E re në këtë version: një metodëzinxhir ()për të kompozuar burime të varura nga njëri-tjetri
nga ana tjetër pa folezim manualishtefekt (), dhe mbështetje për ruajtjen e memories anësore SSR nëpërmjet
një opsionid, i dobishëm për të shmangur marrjen e dyfishtë midis serverit të paraqitjes dhe klientit të hidratimit.
OnPush sipas parazgjedhjes dhe Fetch API sipas parazgjedhjes
// Da Angular 22, un componente senza changeDetection esplicito è OnPush per default
@Component({ selector: 'app-widget', template: `...` })
export class WidgetComponent {} // equivalente a changeDetection: ChangeDetectionStrategy.OnPush
HttpClientpërdor Fetch API në vend të XMLHttpRequest pa nevojëwithFetch()eksplicite (tani e zhvlerësuar për heqje); kini kujdes nëse juaj
kodi varet ngaraport Progresipër ngarkim, sepse raportimi i progresit në
ngarkimi nuk mbështetet nga zbatimi Fetch dhe duhet të trajtohet me të rejatraportUploadProgres/raportShkarkoProgresi.
@Service Decorator dhe injectAsync()
// @Service — scorciatoia per @Injectable({ providedIn: 'root' }), richiede inject() non constructor DI
@Service()
export class NotificationService {
private readonly http = inject(HttpClient);
}
// injectAsync() — lazy loading di un servizio via dynamic import, con prefetch opzionale
const analytics = await injectAsync(() => import('./analytics.service'), { prefetch: 'onIdle' });
Aria Angular: Aksesueshmëria si Infrastrukturë
@këndore/aria, tani në disponueshmëri të përgjithshme, ofron direktiva që menaxhojnë
automatikisht atributet ARIA, navigimi me tastierë dhe menaxhimi i fokusit për modelet e kompozuara
(kombobox, skedë, pemë) - zhvilluesi fokusohet në dizajnin vizual dhe logjikën e biznesit, jo
për rizbatimin manual të Udhëzuesit të Praktikave të Autorizimit ARIA për secilin komponent.
Thyerja e ndryshimeve dhe zhvlerësimeve
- Kërkohet TypeScript 6: 5.9 dhe versionet e mëparshme nuk mbështeten më — përditësoni TypeScript përpara se të ekzekutoni
përditësimi. - Nyja 20 u hoq: Minimumi i mbështetur është Node 22 (Nyja 26 e mbështetur).
i prekurnë Format e sinjalit ndryshoi: nga modeli tek çifti hyrës/dalës (i prekurhyrje,prek ()output) - ndikim i drejtpërdrejtë në kodin që lexohet/shkruheti prekursi model.markAsTouched()tani shënon pasardhësit si parazgjedhje: SHBA{ skipDescendants: e vërtetë }për të ruajtur sjelljen e mëparshme nëse kodi juaj e supozon atë.- Ruterat:
mund të përputhetkërkon një parametër të tretë të detyrueshëm(Pamja aktuale) — rojet ekzistuese duhet të përditësohen në nënshkrim. paramsStrategjia e trashegimiseTani'gjithmone'sipas parazgjedhjes(epokë'Vetëm bosh'): Kontrolloni nëse drejtimi juaj varej nga sjellja e vjetër e nënkuptuar.- Zinxhiri opsional në shabllone ndryshon semantikën:
projekt?.autortani kthehettë papërcaktuaranë vend tënulnë vlera null, duke u përafruar me TypeScript. withIncrementalHydration()i zhvlerësuarsepse tani është SSR e paracaktuar; SHBAme pa hidratim në rritje ()nëse i shërben shprehimisht sjelljes së vjetër.
Përgatitja dhe ndërtimi
# Migrazione automatica dei test da Karma a Vitest
ng generate migrate-karma-to-vitest
# Build con ottimizzazione dei chunk abilitata di default (disattivabile via env var)
NG_BUILD_OPTIMIZE_CHUNKS=false ng build --configuration production
Përmbledhja mbetet optimizuesi i parazgjedhur, por Rolldown është i disponueshëm si opsionNG_BUILD_CHUNKS_ROLLDOWNpër ata që duan të përjetojnë kohë më të reduktuara të ndërtimit.
Variabli i mjedisitPORTItani ka përparësi ndaj flamurit--portpër dev
server, i dobishëm për konfigurimet CI/CD me kontejnerë.
Performanca dhe Paketat
OnPushsi parazgjedhje redukton numrin e cikleve të panevojshme të zbulimit të ndryshimeve tashmë në
filloni nga projektet e reja me skela, pa pasur nevojë për konfigurim manual. Optimizimi i
pjesa e aktivizuar si parazgjedhje në ndërtimin e prodhimit redukton më tej paketën fillestare të krahasuar
në versionet e mëparshme. Gjithmonë matni para/pas me instrumente standarde:
ng build --configuration production --stats-json
npx webpack-bundle-analyzer dist/*/stats.json
npx lighthouse http://localhost:4200 --view
Menaxhimi dhe Reaktiviteti Shtetëror
Me format e sinjalit dhe API-në e burimeve të qëndrueshme, modeli i rekomanduar për kodin e ri është tani
Sinjali i parë: shteti lokal mesinjal ()/i llogaritur (), marrjen e të dhënave meburimet ()/httpResource(), formon me Format e sinjalit. RxJS mbetet plotësisht
i mbështetur dhe i nevojshëm për transmetime komplekse (WebSockets, ngjarje të shumta të kombinuara), por nuk është më
parazgjedhje e nënkuptuar për çdo komponent të ri. Lajmet eksperimentale në këtë version:debounced(),
një funksion që krijon një version të debounced të një sinjali duke kthyer një objektBurim.
// debounced() — sperimentale, debounce di un Signal senza RxJS
const query = signal('');
const debouncedQuery = debounced(query, { delay: 300 });
Renderimi dhe Edge nga ana e serverit
Hidratimi në rritje është tani sjellja e parazgjedhur e SSR-së (nuk zgjedh më nëpërmjetwithIncrementalHydration(), e cila në fakt është përçmuar pikërisht sepse është e tepërt).provideServerRendering()tani pranon një objekt opsionesh, të përfshirëmaxResponseBodySizepër të kufizuar madhësinë e përgjigjes së dhënë nga ana e serverit —
i dobishëm në platformat e skajshme me kufizime të rrepta të ngarkesës për një funksion të vetëm.
// provideServerRendering con opzioni — utile su piattaforme edge con limiti di response size
provideServerRendering({ maxResponseBodySize: 5_000_000 });
Pajtueshmëria dhe varësitë
| Këndore | TypeScript | Nyja | Shënime |
|---|---|---|---|
| 21 | 5.6+ | 20/22 | Parazgjedhja pa zona, Format eksperimentale të sinjalit |
| 22 | Minimumi 6.0 | 22 / 26 (20 janë hequr) | Format e sinjalit/API-ja e burimeve/Ajri i qëndrueshëm |
Për Angular Material, NgRx dhe bibliotekat e tjera të ekosistemit, kontrolloni gjithmonë përputhshmërinë
deklaruar nëvarësitë nga bashkëmoshatarëttë paketës specifike përpara azhurnimit:Pamja npm @angular/material peerDependencies. Bibliotekat që varen shumë ngaFormControl/FormGrouptradicionale mbeten të pajtueshme — Format e sinjalit
bashkëjeton me API-të reaktive/të drejtuara nga shabllonet e trashëguara, nuk i zëvendëson ato me forcë.
Migrimi dhe Plani Operacional
# Verifica prima di aggiornare
ng version
npm outdated
# Aggiornamento a v22 con dry-run preventivo
ng update @angular/core@22 @angular/cli@22 --dry-run
ng update @angular/core@22 @angular/cli@22
Lista kontrolluese minimale para përmirësimit: TypeScript tashmë në 6.x, Node tashmë në 22+, degë e dedikuar, ndërtim dhe test jeshile si bazë. Pas përditësimit, ekzekutoni të gjithë grupin e testimit dhe një ndërtim të plotë prodhimi përpara se të vazhdohet me ndonjë miratim opsional (Format e sinjalit, Aria) në komponentët ekzistues - Përmirësimet e versioneve dhe miratimi i API-ve të reja janë dy aktivitete të ndryshme, ato nuk duhet të kombinohen në një. i njëjti angazhim. Për rikthim, etiketa Git e azhurnuar paraprake mbetet mekanizmi më i shpejtë dhe më i besueshëm.
Testimi dhe SC
// TestBed.getLastFixture() — nuova utility per recuperare l'ultima fixture creata
it('renderizza correttamente', () => {
TestBed.createComponent(WidgetComponent);
const fixture = TestBed.getLastFixture();
expect(fixture.nativeElement.textContent).toBeTruthy();
});
Vitest tani ka mbështetje amtare për Zone.js nëpërmjetzone.js/plugins/vitest-patch, dhe
migrimi automatikmigroj-karma-në-vitestmbulon shumicën e projekteve të Karma
ekzistues; për ata që tashmë kanë migruar në Jasmine/Vitest, flamuri--fake-asinkronizuarmbi migriminrefactor-jasemini-vitestmbulon modelet e testit asinkron të bazuar në kohëmatës.
Siguria dhe praktikat më të mira
Nuk ka ndryshime të paracaktuara në lidhje me kukit ose CSP në këtë version specifik, por ndryshimi në Fetch
API përHttpClientia vlen të kontrollohet: nëse aplikimi juaj varet nga sjelljet
specifike për XMLHttpRequest (p.sh. titujt e personalizuar në kërkesat me origjinë të kryqëzuar), testoni në mënyrë eksplicite i
autentikimi rrjedh pas azhurnimit. Praktikat më të mira të mbetura (HttpOnly/SameSite në cookies
sesioni, CSP kufizuese) nuk ndryshojnë dhe duhet të mbahen pavarësisht nga versioni Angular.
Rastet e përdorimit
Rasti 1: Paneli i ndërmarrjes me formularë komplekse
Një panel kontrolli i ndërmarrjes me mbi 40 formularë të shpërndarë nëpër module të ndryshme ka miratuar Format e Sinjalit sui forma të reja të veçorive pas azhurnimit në v22, duke mbajtur format e trashëguara në format tradicionale reaktive falë bashkëjetesës së plotë të dy API-ve. Rezultati: pjata e bojlerit reduktohet me rreth 30% në ato të reja formulari, vlefshmëria me debounce origjinale e cila eliminoi kodin e dorëshkrimit të personalizuar të lëshimit RxJS më parë.
Rasti 2: Aplikacioni me kërkesa të rrepta aksesueshmërie
Një aplikacion publik që i nënshtrohet kërkesave të WCAG AA ka zëvendësuar zbatimin me porosi të
combobox dhe skedë (me menaxhim të shkruar manualisht ARIA) me@këndore/ariapas
stabilizimi në v22. Rezultati: Auditimi automatik i aksesueshmërisë kaloi pa ndërhyrje manuale
shtim në modelet e migruara, reduktim i fokusit specifik/kodit të menaxhimit të tastierës për
komponent prej rreth 200 linjash në total.
FAQ
A duhet të migroni menjëherë të gjitha format te Format e Sinjalit?
Jo, Format e Sinjalit bashkëjetojnë me format reaktive/të drejtuara nga shabllonet e vjetra; migrimi mund të jetë gradual dhe oportunist.
A i thyen OnPush komponentët ekzistues si parazgjedhje?
Jo, parazgjedhja zbatohet vetëm për komponentët e rinj paZbulimi i ndryshimiteksplicite; komponentët ekzistues ruajnë strategjinë e deklaruar tashmë.
A duhet të përmirësoj Node përpara se të përmirësoj Angular?
Po, Node 20 nuk mbështetet më në v22 - ju lutemi kontrolloni dhe përmirësoni Node në 22+ përpara se të ekzekutonipërditësimi.
Merr API si parazgjedhje i prish thirrjet ekzistuese HTTP?
Në shumicën e rasteve jo, por kontrolloni raportimin e progresit të ngarkimit, i cili kërkon opsionet e reja të dedikuara në vend të atij të vjetërraport Progresi.
A zëvendëson Angular Aria materialin këndor?
Jo, ato janë plotësuese: Aria ofron modele të aksesueshmërisë së sjelljes, Materiali ofron komponentë vizuale tashmë të stilizuara.
Çfarë ndodh nëse nuk e përmirësoj TypeScript në 6?
përditësiminë v22 do të dështojë ose do të raportojë papajtueshmëri: TypeScript 6 është një kërkesë e detyrueshme, jo opsionale.
A e zëvendëson domosdoshmërisht Vitest Karma?
Jo menjëherë e detyrueshme, por Karma po zhvlerësohet në ekosistemin Angular; Migrimi automatik e bën kalimin në Vitest me rrezik të ulët.
A është i nevojshëm vegla AI/MCP për të përdorur Angular 22?
Jo, ai është opsional dhe i projektuar për ata që përdorin agjentë kodues të ndihmuar nga AI; nuk ndikon në funksionimin standard të aplikacionit.
Si të kontrolloni
- Kontrolloni versionin dhe varësitë:
ng versionDhenpm e vjetëruar. - Ndërtimi i plotë i prodhimit:
ng build --prodhimi i konfigurimit. - Ekzekutoni të gjithë grupin e testimit:
ng test(osevitest vrapnëse tashmë është migruar). - Testi manual i tymit në rrjedhat kritike (auth, format kryesore) pas azhurnimit.
- Testet e plota E2E:
npx vrap selviose ekuivalente. - Kontrolloni madhësinë dhe performancën e paketës: analizues i paketës plus
far npx http://localhost:4200, krahasuar me bazën e para-përmirësimit.
konkluzioni
Angular 22 nuk prezanton një ndryshim paradigme aq shumë sa një konsolidim: API-të e bazuara në sinjal lindin në versionet e mëparshme (Signal Forms, Resource API) më në fund bëhen të qëndrueshme dhe gati prodhimi, parazgjedhjet lëvizin drejt modeleve më performuese (OnPush, Fetch API) dhe vjen e para shtresa veglash e projektuar për zhvillim të asistuar nga AI. Për shumicën e projekteve, Përmirësimi nga v21 është me rrezik të ulët nëse TypeScript dhe Node janë tashmë të përditësuara; miratimi i të rejave Megjithatë, API mbetet opsionale dhe mund të vazhdojë gradualisht pas azhurnimit të versionit.
Ju dëshironi një listë kontrolli të detajuar të migrimit për projektin tuaj ose një vlerësim të përpjekjeve për përmirësim?Kërkoni një auditim teknik: në pak orë analizë është e mundur vlerësoni rreziqet, thyerjen e ndryshimeve të rëndësishme për bazën tuaj të kodeve dhe prioritetet e miratimit për API-të e reja.