Angular, det mest efterfrågade front-end-ramverket med öppen källkod, släpper äntligen ännu en versionsuppdatering – Angular 15. Tidigare introducerade Angular 14 många nya spännande experimentfunktioner och bästa praxis för arrayerad kod, men det verkar som denna nya roll- ut Angular version 15, handlar om att få stabilitet.
Äntligen en ny stabil uppdatering, som vi alla teknikentusiaster och Angular-communityt väntade på. Den här nya uppdateringen har medfört enorma spännande förändringar. Så låt oss dyka in i den nya världen av Angular 15.
Vilka nya funktioner har Angular 15 introducerat?
Med hänvisning till andra tidigare uppdateringar och borttagningen av Angulars äldre kompilator, ger Angular 15-uppdateringen många nya förbättringar – stabilitet och utökad stödbarhet, som definitivt lovar att låsa upp förbättrad utvecklarupplevelse och prestanda.
1. Stabilt fristående komponent-API
De fristående komponenters API introducerades i Angular 14 för att bygga Angular-applikationer utan att definiera NgModules
. I Angular 15 uppnår de fristående komponenternas API äntligen sin grad av stabilitet efter noggrann prestandaobservation och ändringar.
Angular-utvecklargemenskapen har sett till att med denna nyligen uppnådda stabilitet kan fristående komponenter fungera synkroniserat med HttpClient
Angular Elements och många andra.
Använd detta fristående API för att starta upp ett program i en enda komponent. Så här görs det:
import {bootstrapApplication} from '@angular/platform-browser';
import {ImageGridComponent} from'./image-grid';
@Component({
standalone: true,
selector: 'photo-gallery',
imports: [ImageGridComponent],
template: `
… <image-grid [images]="imageList"></image-grid>
`,
})
export class PhotoGalleryComponent {
// component logic
}
bootstrapApplication(PhotoGalleryComponent);
Använda imports
funktion kan du till och med referera till fristående direktiv och rör.
Du kan nu markera komponenter, direktiv och rör som ”standalone: true
” – nu behöver du inte deklarera dem i NgModule, annars kommer Angular-kompilatorn att ge ett fel. Dessutom kan du nu importera NgModule direkt inuti den fristående komponenten genom att skriva import: [module_name]
.
2. Möjlighet att utveckla flervägsapplikation
Angular 15 kommer med ett fristående router-API för att bygga flervägsapplikationen. Så här kan du deklarera rotvägen:
export const appRoutes: Routes = [{
path: 'lazy',
loadChildren: () => import('./lazy/lazy.routes')
.then(routes => routes.lazyRoutes)
}];
Här deklareras lazyRoutes på följande sätt:
import {Routes} from '@angular/router';
import {LazyComponent} from './lazy.component';
export const lazyRoutes: Routes = [{path: '', component: LazyComponent}];
Du kan registrera appRoutes
i bootstrapApplication
metoden och kalla den med hjälp av ProvideRouter
API, som är trädskakbar!
bootstrapApplication(AppComponent, {
providers: [
provideRouter(appRoutes)
]
});
Dessutom kan Angular Bundlers nu ta bort de oanvända funktionerna vid byggtiden, vilket kan resultera i en 11 % minskning av kodfilens storlek.
3. Introduktion till Direktivets sammansättning API
Alla utvecklare älskar när deras favoritramverk erbjuder förstklassig återanvändbarhet av direktiv. I GitHub-communityt frågade många Angular-utvecklare efter detta API och till slut fick teamet höra det och gjorde det möjligt.
Så, Angular v15 är äntligen infunderad med den inspirationen från funktionsbegäran gjord på GitHub. Det har introducerat Direktiv Composition API, som höjer kodens användbarhet och tar den till en annan nivå. Det tillåter utvecklare att förstärka värdelement med direktiv och få ut det mesta av Angular med hjälp av den ultimata kodåteranvändningsstrategin. Dessutom kan allt detta göras möjligt med hjälp av en Angular-kompilator.
NOTERA: Du kan bara använda Direktiv Composition API med fristående direktiv.
@Component({
selector: 'mat-menu',
hostDirectives: [HasColor, {
directive: CdkMenu,
inputs: ['cdkMenuDisabled: disabled'],
outputs: ['cdkMenuClosed: closed']
}]
})
class MatMenu {}
Som du kan se ovan är MatMenu
görs effektiv med hjälp av två hostDirectives: HasColor
och CdkMenu
.
På grund av denna förbättring, MatMenu
kan återanvända alla fastigheter från dessa två direktiv. MatMenu kan ärvas med ingångar, utgångar och logik som är associerade med HasColor-direktivet och endast logik och ingång från CdkMenu
.
Det kan ge dig en känsla som Deja Vu för konceptet med flera arv. Skillnaden Angular har från andra programmeringsspråk är lösningen av namnkonflikter, och den gäller bara för användargränssnittsprimitiver.
4. Stabilt ”NgOptimizedImage” bilddirektiv
De NgOptimizedImage
direktivet introducerades i den tidigare versionen för att enkelt anta bästa praxis för att ladda bildprestanda. Slutligen, efter en lång observation av utvecklarna, har detta direktiv uppnått en stabil form.
Det senaste experimentet gjort av Land’s End med den här funktionen för en applikation har observerats en 75% förbättring i LCP (Largest Contentful Paint) bildladdning.
Tidigare detta NgOptimizedImage
erbjöd också många funktioner och funktioner, men Angular v15-uppdateringar lägger till fler nya spännande funktioner i bilddirektivet, som är följande:
- Automatisk
srcset
Generation: Den genererar automatiskt srcset, som säkerställer att en bild av lämplig storlek laddas upp när den efterfrågas – vilket resulterar i en minskning av nedladdningstiden för bilder.
- Fyllningsläge [experimental]: Det eliminerar behovet av att deklarera bildmått och fyller en bild till dess överordnade behållare. Det här läget är ganska effektivt när bilddimensionerna är okända för dig eller om du behöver migrera CSS-bakgrundsbilden för att använda bilddirektivet.
Men frågan är, ”hur man använder detta fristående NgOptimizedImage-direktiv?”
Den kan användas direkt i din Angular-komponent eller NgModule
.
import { NgOptimizedImage } from '@angular/common';
// Include it into the necessary NgModule
@NgModule({
imports: [NgOptimizedImage],
})
class AppModule {}
// ... or a standalone Component
@Component({
standalone: true
imports: [NgOptimizedImage],
})
class MyStandaloneComponent {}
När du använder detta vinkelbildsdirektiv inom en komponent behöver du bara byta ut bilden src
attribut med ngSrc
samtidigt som man säkerställer att specificera prioritetsattributet för att optimera hastigheten för LCP-bilderna.
5. Nu kan du minska boilerplate i Guards
Låt oss förstå detta koncept på ett bättre sätt med ett exempel på att definiera vakter, verifiera detaljer – oavsett om användaren har loggat in eller inte:
@Injectable({ providedIn: 'root' })
export class MyGuardWithDependency implements CanActivate {
constructor(private loginService: LoginService) {}
canActivate() {
return this.loginService.isLoggedIn();
}
}
const route = {
path: 'somePath',
canActivate: [MyGuardWithDependency]
};
Här, i detta program, LoginService
innehåller huvudlogiken, där skyddet – endast en utlösare anropas, vilket är isLoggedIn ()
. Även om det har en så tydlig struktur, har detta kodsegment många boilerplates, som måste reduceras.
Tack vare Functional Router Guards kan denna kod återföras till koden nedan med de nödvändiga pannplåtarna.
const route = {
path: 'admin',
canActivate: [() => inject(LoginService).isLoggedIn()]
};
Det bästa med Functional Guards är att de är komposterbara. Med dess hjälp kan du bygga faktorliknande funktioner, acceptera en given konfiguration och returnera en vakt eller funktion som löser ett ärende.
6. Renare, bättre stackspår
Med Angular v15-uppdateringen har felsökning av Angular-applikationer förenklats och gjorts renare och enklare med stackspår. Angular-utvecklarnas team såg till att uppnå en standard för att spåra mer av en utvecklingskod än att visa bibliotek den anropar. Denna prestation har gjort det möjligt för felmeddelandena att använda vissa förbättringar.
Innan man arbetade med de tidigare Angular-versionerna, när de upptäckte en kod, brukade utvecklare få felmeddelanden i ett rad, vilket ledde dem till en lång process för att lösa den buggen.
Nedan är utdraget för tidigare felindikationer:
ERROR Error: Uncaught (in promise): Error
Error
at app.component.ts:18:11
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:25:1)
at _ZoneDelegate.invoke (zone.js:372:26)
at Object.onInvoke (core.mjs:26378:33)
at _ZoneDelegate.invoke (zone.js:371:52)
at Zone.run (zone.js:134:43)
at zone.js:1275:36
at _ZoneDelegate.invokeTask (zone.js:406:31)
at resolvePromise (zone.js:1211:31)
at zone.js:1118:17
at zone.js:1134:33
Svårigheten att förstå dessa ERROR-snuttar var:
- Felmeddelandeinmatningarna kom från tredjepartsberoenden (Angular framework, zone.js och RxJS)
- Ingen information om vilken användarinteraktion som stötte på detta fel.
Efter ett långt samarbete med Angular och Chrome DevTool-teamet kunde communityn integrera dessa tredjepartsberoenden (med hjälp av node_modules, zone.js, etc.); och därmed kunde uppnå länkade stackspår.
Förbättringen i stacktraces nämns nedan:
ERROR Error: Uncaught (in promise): Error
Error
at app.component.ts:18:11
at fetch (async)
at (anonymous) (app.component.ts:4)
at request (app.component.ts:4)
at (anonymous) (app.component.ts:17)
at submit (app.component.ts:15)
at AppComponent_click_3_listener (app.component.html:4)
Nu ger dessa felmeddelanden information varifrån felet har påträffats, så utvecklare kan direkt gå till den koddelen och åtgärda det omedelbart.
7. Stabila MDC-baserade komponenter
Eftersom stabiliteten är oroad för Angular-materialen, arbetade Angular-utvecklarteamet hårt för att omstrukturera sin komponent baserat på Angular Material Design Components för webbapplikationerna. Dessutom är dessa komponenter förbättrade för att erbjuda bättre tillgänglighet och överensstämmelse med Angular Material Design Specifications.
Här har det mesta av refaktoriseringsarbetet gjorts i DOM- och CSS-delarna. Efter den nya uppdateringen om lyhördhet kommer det att finnas några stilar i de gamla Angular-applikationerna som behöver justeringar, särskilt i fallet med CSS som åsidosätter interna element i de migrerade komponenterna.
I den senaste Angular v15 har många komponenters gamla implementeringar föråldrats. Så för att återställa dem har utvecklare fortfarande möjlighet att välja ”arv” importera.
Till exempel kan du hämta den gamla mat-button
implementering genom att importera dess äldre knappmodul.
import {MatLegacyButtonModule} from '@angular/material/legacy-button';
8. CDK Listbox
CDK står för Component Dev Kit som erbjuder olika beteendeprimitiver, som hjälper till att bygga UI-komponenter. I Angular v15 får den en ny primitiv som heter CDK Listbox, som gör det möjligt för utvecklare att anpassa Listbox-interaktioner utarbetade av WAI-ARIA Listbox-mönstret baserat på krav.
Här inkluderar beteendeinteraktionerna tangentbordsinteraktioner, stöd för bidi-layout och fokushantering. Oavsett vilken av dem du använder kommer varje direktiv med tillhörande ARIA-roller med respektive värdelement.
9. Utökat stöd för esbuild
I Angular 14-uppdateringen fanns det aktivering av en experimentell support-esbuild – en snabbare Javascript-buntlare, som möjliggör snabb konstruktion med förenkling av pipeline.
Angular 15 kommer med nytt experimentellt stöd för ng build --watch
support, Sass, SVG-mall och filersättning. Kommandot för att uppgradera angular.json
byggare är:
"builder": "@angular-devkit/build-angular:browser-esbuild"
10. Andra förbättringar i Angular 15-funktioner
Nedan är listan över nya förbättringar och möjligheter som gjorts i Angular 15, som kan se små ut men har en stor inverkan.
- Routern förvränger nu automatiskt standardexporter för lat laddning: Det förenklar routerns funktioner genom att lägga till mer aktivering för att minska ännu fler pannplåtar. Här, för lat laddning, kommer routern att leta efter standardexporten, och om den lyckas importerar den sin lazy-fil direkt till koden.
- Supporttjänst för automatisk import på språk – Snabbfix: Skriv nu din Angular-kod mer självsäkert genom att få ut det mesta av språktjänsten. Du kan använda den här funktionen för att automatiskt importera komponenter och deras korrigeringar i mallen, vilka komponenter inte används i en fristående komponent eller i en NgModule.
- Förbättrade vinkelkomponenter: Angular-komponenternas v15 täcker en rad tillgänglighetsförbättringar, inklusive effektiva kontrastförhållanden, utökade touchmålstorlekar och förfinad ARIA-semantik. Dessutom kan Angular-komponenter ha sina API:er för att anpassa sin densitet för en bättre temaanpassningsupplevelse.
Allt handlar om de nya ändringarna och prestationerna som är aktiverade i Angular v15, men frågan är, ”Hur kommer du att låsa upp dessa Angular 15-funktioner?”
Hur uppgraderar jag till Angular 15?
Innan du uppgraderar till Angular v15 måste du känna till supportförlängningen, annulleringen och avskrivningarna – brytande ändringar, för att granska och omfaktorisera ditt befintliga Angular-bygge.
- Angular v15 har utökat sitt stöd för node.js version 14.20.x, 16.13.x och 18.10.x och avslutat sitt stöd från versioner inklusive 14.[15-19].x och 16[10-12].x.
- Angular 15 stöder nu bara TypeScript version 4.8 eller äldre än så.
- Kör kommandot i appprojektkatalogen:
ng update @angular/core@15 @angular/cli@15
för att göra din applikation förstärkt med Angular v15-stöd. - @keyframes namnformat har ändrats till ”
@keyframes host-my-cmp_foo { ... }
”- För att följa denna brytande ändring:
- Ändra komponentens inkapslingsvy till Ingen eller ShadowDom.
- Definiera denna regel i de globala stilmallarna
- Definiera denna regel i din egen kod.
- För att följa denna brytande ändring:
- Att lägga till en explicit konstruktor till klassen kan utlösa ett fel.
- Från filen tsconfig.json,
enableIvy
anropet har tagits bort eftersom i den här uppdateringen är Ivy bara en renderingsmotor. - De
canParse
Metoden har tagits bort, så den är nu obligatorisk att användaanalyze
ochhint
parametrar i analysmetoderna. RouterOutlet
kommer endast att instansiera komponenten efter att förändringsdetekteringen har slutförts.- De
DATE_PIPE_DEFAULT_TIMEZONE
funktionen har tagits bort, så från och med nu måste du använda dess ersättningDATE_PIPE_DEFAULT_OPTIONS
för att definiera tidszonen. - De
routerLinkWithHref
direktivet har tagits bort, så från och med nu måste du användaRouterLink
direktiv att hantera element medhref
attribut.
Jo, det finns andra metoder och direktiv som har tagits bort och uppdaterats med en ny förenklad syntaxstruktur. Så det är bättre att gå med Migreringsguide för Angular v14 till v15 för att säkerställa en smidigare applikationsmigrering.
Använd följande kommando för att uppdatera Angular 14 till Angular 15:
ng update @angular/cli @angular/core
Skriv upp det nedan nämnda kommandot i CLI för att uppdatera din globala Angular:
npm i -g @angular/cli
Avslutar
Beslutet att lansera Ivy 2020 var det bästa eftersom det har möjliggjort många förbättringar – NgModules var en av dem. Denna förbättring hjälper till att göra inlärningskurvan enklare och mer förenklad.
Teamet Angular arbetar med att göra fler förbättringar av renderingspipelinen på serversidan, och förbättring av kodens återanvändbarhet är nästa på tur för att göra Angular mer effektiv.
Så låt oss uppgradera till Angular v15 och vänta på den nya spännande uppdateringen att bekanta oss med.