Detta inlägg publicerades ursprungligen den min webbsida: https://dsebastien.net
I den här artikeln ska jag gå igenom (nästan) allt som är anmärkningsvärt i den här helt nya versionen. Jag kommer också att belysa vad som har förändrats kring Angular, precis som jag gjorde med mina tidigare artiklar om Vinkel 11 och Vinkel 10.
Om du bara letar efter fågelperspektivet, kolla in officiellt släppmeddelande. Här gräver jag mycket djupare in i release-anteckningarna.
Gå med i Ivy league ...
Angular-teamet har arbetat med Ivy (den nya kompilerings- och renderingslinjen) sedan 2018. Den släpptes äntligen med Angular 8. Sedan Angular 9 har Ivy varit standard för nya projekt, och ekosystemet migrerar långsamt till det. Med vinkel 12, den gamla View Engine är nu officiellt utfasad. Det kommer att tas bort i en framtida större release. Det är inte heller möjligt att skapa nya applikationer med View Engine. Slutligen är Ivy nu standard för nya biblioteksprojekt.
Vid denna tidpunkt kan biblioteksförfattare fortfarande förlita sig på View Engine tack vare ngcc
(Kompatibilitets kompilatorn för Angular), men det är verkligen dags för dem att utvärdera om de kan migrera sina bibliotek till Ivy eller inte. För några veckor sedan publicerade Minko Gechev en artikel för att förklara det i detalj. Kolla också in det relaterade RFC.
Om du inte visste det, ngcc
är den lilla processen som körs efter att du skapat ett Angular-projekt eller installerat beroenden. När du ser meddelanden som Compiling ... : es2015 as esm2015
, det är det ngcc
gör sitt jobb. Vad ngcc
gör är att sammanställa bibliotek som är beroende av View Engine så att Ivy kan konsumera dem.
Liksom jag har du nog lagt märke till det ngcc
tar mycket tid att köra och har en mycket negativ inverkan på utvecklarupplevelsen. Det är därför det är avgörande för det vinklade ekosystemet att migrera till Ivy så snart som möjligt. För det andra, tills en majoritet av ekosystemet har gått vidare, måste Angular-teamet hålla View Engine kvar, vilket är problematiskt av flera anledningar. Sist men inte minst kan bibliotek som är beroende av View Engine inte vara beroende av Ivy-bibliotek.
Biblioteksförfattare kan förmodligen inte migrera till Ivy för snabbt, men de bör tydligt driva motvilliga användare att uppgradera. Hur som helst, vägen framåt är att migrera alla saker till Ivy så fort
Det finns en utmärkt artikel om Ivy där borta.
Hej gradskiva
I april tillkännagav Angular-teamet planer på att avsluta stödet från Protractor I slutet av 2022.
Från och med Angular 12 inkluderas inte Gradskiva som standard i nya projekt. Istället kommer Angular CLI att erbjuda alternativ för att använda andra lösningar som Cypress, WebdriverIO, eller Testcafe. Detta betyder att ng e2e
kommandot bör fortsätta att stödjas i framtiden.
Såsom förklaras i tillkännagivandet, tillbaka 2013 när Protractor skapades, webbdrivrutin var inte en standardoch end-to-end (e2e) tester var svåra att skriva och en mardröm att upprätthålla. Gradskiva medförde en innovativ lösning genom inslagning selen-webdriveroch tillhandahöll ett sätt att kontrollera exekveringsflödet.
Naturligtvis har många saker utvecklats sedan dess. Vi har nu WebDriver
API, async
och await
(även toppnivå await
, woah). Ekosystemet har också utvecklats. Lösningar som Cypress, Dramatiker, Dockare har vunnit mycket (välförtjänt) popularitet. Verktyg som Cypress till exempel ger en mycket bättre utvecklarupplevelse än Protractor, utnyttjar de moderna standarderna och stöder till och med testning i flera webbläsare (bland andra kraftfulla funktioner). En annan fördel med de nuvarande de-facto testverktygen e2e är att de är ramagnostiska, vilket är mycket värdefullt.
Lång historia kort, det är inte mycket vettigt för Angular-teamet att bevara Gradskiva. Evolving Protractor nu skulle kräva för mycket ansträngning och inducera massor av brytande förändringar. Du kan hitta mer information i RFC, det är en intressant läsning.
Tidslinjen är viktig för team / projekt som har investerat mycket tid och energi på att skriva e2e-tester med Protractor. Angular-teamet är fortfarande upptagen med att utvärdera återkopplingen som samlats in via RFC, så vi kommer förmodligen veta mer senare i år.
Hur som helst; prova Cypress om du inte redan har gjort det kommer du inte bli besviken! Förresten, jag fortsätter att rekommendera alla att börja använda Nrwl NX, en underbar lösning som inkluderar stöd för Angular, React, Next.js, Cypress och mycket mer
Nullaktig sammanslagning
Vinkel 12 inkluderar stöd för användning av ogiltig koalescerande operatör i vinklade mallar. Och det här är fantastiskt! Den operatören har fått stöd i TypeScript sedan version 3.7.
Om du inte har hört talas om den här operatören, låt mig ge dig en snabb förklaring. Tanken är att kunna definiera ett reservvärde om något är null
or undefined
. Här är ett exempel:
If foo
is null
or undefined
och sedan x
kommer att ställas in på true
(dvs. reservvärdet), och vi kan ställa in det till vad vi vill.
Utan detta fantastiska ??
operatör, skulle vi behöva skriva detta istället:
let x = foo !== null && foo !== undefined ? foo : true;
Nu när Angular stöder det också kan vi äntligen skriva uttryck som:
{{ age ?? calculateAge() }}
Istället för det gamla och mer detaljerade alternativet. PROPERT!
Du kan lära dig mer om denna förändring här..
Du hittar mer information om nullish coalescing i TypeScript handbok såväl som på MDN.
Support för TypeScript 4.2
Angular 12 introducerar stöd för TypeScript 4.2, vilket innebär att vi nu kan använda en ton av nya underbara språkfunktioner. Dessutom har stöd för TypeScript 4.0 och 4.1 tappats.
Här är en snabb genomgång av vad TS 4.2 innehåller:
Smart typ alias bevarande: De förväntade typerna visas av kodredigerare i stället för råtyper som tidigare. Du kan lära dig mer om det här..
Ledande / mellanstödselement i Tuple-typer: Vi kan nu inkludera vilolement var som helst i en tupel (med några försiktighetsåtgärder). Detta är ganska coolt för de av oss som förlitar sig på tuplar då och då. Läs mer om det här..
Förstå din projektstruktur: TS 4.2 inkluderar en ny flagga kallas --explainFiles
, som instruerar TypeScript att mata ut information om varför en arkiverad inkluderades i ditt program. Detta är mycket användbart för felsökning.
Förbättringar för okallade funktionskontroller: TypeScript kan nu upptäcka fler fall där funktioner inte anropas. Till exempel när du skriver foo
istället för foo()
. Mer information och exempel finns här..
Destrukturerade variabler kan nu uttryckligen markeras som oanvända: let [_first, second] = getValues();
, vilket är fantastiskt; inga fler fel när noUnusedLocals
är aktiverat!
Det finns mycket mer faktiskt, som strängare kontroller för in
operatören och några av de senaste ändringarna som kan påverka dig. Så se till att kolla in släpp anteckningar.
Webpack 5-stöd
Vinkel 11 förde oss experimentellt stöd för Webpack 5. Med Angular 12 är supporten för Webpack 5 nu produktionsklar. w00t!
Om du inte har tittat på Webpack 5, du kommer att bli förvånad. Webpack 5 släpptes tillbaka i oktober 2020, så det är ganska stabilt nu. Webpack är för närvarande på version 5.37 (släpptes för några dagar sedan).
Här är en kort förklaring om vad som har förändrats med Webpack 5 och varför jag är så glad över detta 🤩
Först och främst, som ni vet, är Webpack det nyckel bit av Angular CLI-pusslet, och det spelar en stor roll för buntstorlek, byggprestanda etc.
För det andra är Webpack 5 en stor release av en anledning. Den innehåller ett antal brytande förändringar, vilket förklarar varför det tog ett tag för Angular och ett gazillion-verktyg / bibliotek i ekosystemet att uppgradera.
I release-anteckningarna indikerade Webpack-teamet att Webpack 5 fokuserar på:
- Förbättra byggprestanda med ihållande caching
- Förbättra långvarig cachning med bättre algoritmer och standardvärden
- Förbättrar buntstorleken med bättre trädskakning och kodgenerering
- Förbättra kompatibiliteten med webbplattformen
- Rengöring av interna strukturer
- Vi introducerar brytande förändringar (haha) nu, så att de kan stanna på v5 så länge som möjligt
Den coolaste funktionen i Webpack 5 är dess stöd för modulförbundet, som utgör grunden för att underlätta skapande av mikrofrontar. Det är lite utom räckvidden för den här artikeln, men i en handomgång gör modulfederationen det möjligt för olika byggnader att bete sig som en enorm ansluten modulgraf, och låter oss importera och använda moduler från fjärrbyggnader. Kolla upp den officiella dokumentationen att veta mer.
Bland de stora förändringarna har Webpack 5 tappat allt som tidigare avskaffats (t.ex. NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), såväl som IgnorePlugin
och BannerPlugin
.
Dessutom har Node.js polyfills som tidigare injicerats automatiskt tagits bort. och det är en av de största förändringarna i den versionen. Dessa polyfills tillät ursprungligen Webpack att låta oss använda moduler gjorda för Node.js i webbläsaren. Det var coolt, men det hade en stor nackdel: större buntar. Dessutom var dessa polyfills mindre och mindre användbara, eftersom det antingen fanns webbläsarkompatibla alternativ för bibliotek eller specifika distributioner med webbläsarstöd. Från och med Webpack 5, eftersom dessa polyfills inte kommer att läggas till automatiskt längre, kan vi snubbla över några överraskningar. Till exempel i fall där vi använder moduler gjorda för Node.js i webbläsaren utan att inse att det tidigare fungerade tack vare Webpack. Du kan lära dig mer om det här..
Webpack 5 har infört bättre stöd för långvarig cachning. I produktionsläge innehåller den nu nya algoritmer som standard:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
Som värdet indikerar tilldelar dessa algoritmer bitar och moduler deterministiska ID och deterministiska namn till export.
Webpack 5 kan utföra kapslade trädskakningar genom att spåra åtkomst till kapslade exportegenskaper (välkommen till Matrix), vilket ytterligare skulle förbättra trädskakningar. Det kan också nu analysera beroenden mellan export och import av en modul. Det finns också förbättringar av CommonJS träd skakar. Och det finns massor fler optimeringar.
Webpack 5 innehåller också ett antal ändringar för att förbättra utvecklarupplevelsen. Till exempel finns det en ny namngiven chunk id-algoritm som är aktiverat som standard i utvecklingsläge. Den nya algoritmen ger mänskligt läsbara namn på bitar. De target
fastigheter har också varit enormt förbättras.
För att vara ärlig har jag inte tillräckligt med utrymme här för att täcka allt nytt med Webpack 5, där's bara sätt alltför mycket. Så jag stannar här
Om du bara använder Webpack indirekt genom Angular CLI, bör det mesta vara "transparent" för dig. Men om du använder en anpassad Webpack-byggnad i ditt projekt bör du förmodligen ta en titt på migrationsguide.
Slutligen, om du är nyfiken på vad som kommer nästa med Webpack, kolla in färdplan för 2021 och naturligtvis senaste release-anteckningarna.
IE11-stödet har upphört
Så sorgligt som det kanske låter (vem skojar jag? 😂), försämrar Angular 12 stöd för IE11. Internet Explorer är död för de flesta av oss, men tyvärr använder många organisationer det fortfarande i produktionen. IE 11-stöd kommer således att tas bort av Angular 13, vilket innebär att dessa organisationer verkligen måste börja flytta från IE (vilket är bra i alla fall). Inga fler ursäkter!
När IE-stödet är borta blir Angular mindre, snabbare och därmed bättre för oss alla. När bördan för att upprätthålla bakåtkompatibilitet med äldre webbläsare är borta (IE11 är den sista av dem!) Kommer Angular att kunna utnyttja moderna API: er (t.ex. CSS-variabler, Korsningsobservatör, CSS-rutnät, Ombud, Webb-animationeroch mer).
Jag kan verkligen inte vänta på att IE-stödet är borta!
Strikt som standard
JA JA JA 🤩. Från och med Angular 12, strikt läge för vinkel är aktiverat som standard i CLI. Och det här är fantastiskt.
Som ni vet är jag ett stort fan av TypeScript: s strikta läge, men också av Angulars strikta läge. Om du vill veta mer, kolla in det artikeln jag skrev förra året och Minko Gechevs artikel som förklarar förändringen.
Produktion byggs som standard
Fram till nu kör du ng build
kommando skapade en utvecklingsbyggnad. Från och med vinkel 12, ng build
kommer nu att vara standard till en produktionsbyggnad.
Förhoppningsvis kommer det att hjälpa vissa team att undvika att göra misstaget att bygga och distribuera utvecklingsbyggnader till produktionsmiljöer. Även om jag är rädd att lag som gör det misstaget fortfarande har andra problem att hantera
Sass-stöd för inline-stilar
Angular stöder Sass sedan mycket lång tid, men hittills kunde vi bara använda Sass i externa formatmallar. Med Angular 12 är det nu möjligt att använda Sass tillsammans med inbyggda komponentstilar (dvs. inom styles
fast egendom).
Detta måste aktiveras genom att ställa in det nya inlineStyleLanguage
egendom till true
in angular.json
.
Medvind stöd
Medvind stöds nu officiellt av Angular. Egentligen infördes stöd i Angular CLI i v11.2.
Medvind är upptagen med att ta över världen, särskilt nu när den har en rad JIT-kompilator, och det är underbart att ha inbyggt stöd för det i Angular.
Tidigare krävs det att lägga Tailwind till ett Angular-projekt anpassa Webpack-byggnaden. Inte längre! Nu är det så enkelt att lägga till Tailwind som att installera paketet, skapa tailwind.config.js
fil med hjälp av npx tailwindcss init
och se till att aktivera Tailwinds JIT-läge.
HTTP-förbättringar
Angular 12 introducerar ett antal förbättringar kring sitt HTTP-stöd.
Metadata för förfrågningar och avlyssnare
Först den HttpClient
kan nu användas för att lagra och hämta anpassade metadata för förfrågningar. Detta är särskilt användbart för HTTP-avlyssnare. Denna funktion kan användas genom den nya HttpContext
.
Tidigare var det komplicerat att ge avlyssnare sammanhang, men nu kommer det att bli mycket enklare. Nu, de olika HTTP-metoderna som tillhandahålls av HttpClient
inkludera en ny context: HttpContext
alternativ, som vi kan använda för att skicka på en karta.
Netanel Basal har skrivit en artikel om detta, så kolla in det om du vill veta mer.
appendAll på HttpParams
Smakämnen HttpParams
klass har nu en ny appendAll
metod, som kan användas för att enkelt lägga till en uppsättning parametrar på en gång:
appendAll(params: {[param: string]: string|string[]}): HttpParams
Params kan nu skickas som siffror och booleaner
Tidigare kunde siffror och booleaner inte användas direkt som HTTP-parametrar. Vi var tvungna att förvandla dessa till strängar. Inte längre!
HttpStatuskod
Angular har infört sin egen lista med läsbara namn för HTTP-statuskoder, i form av en konstruktion.
Tidigare var vi tvungna att introducera vår egen lösning om vi ville ha mänskligt läsbara namn. Tack vare den här nya funktionen kan vi nu istället använda HttpStatusCode
.
Till exempel:
if (response.status === HttpStatusCode.Ok) { ...
}
För dem som använder TypeScript på både back-end och front-end, är detta inte särskilt användbart (eftersom vi förmodligen alla redan har vår egen abstraktion), men om ditt projekt bara använder TypeScript / Angular på front-end, då är det en fin förbättring.
XhrFactory
Smakämnen XhrFactory
klass har flyttats till ett annat paket. Det exponeras nu av angular/common
istället för angular/common/http
.
Observera att en migrering har inkluderats i uppgraderingen, så du kommer inte ens märka om du kör ng update
Routerändringar
Angular router har förändrats lite i Angular 12.
Först den routerLinkActiveOptions
direktivet har förbättrats. Nu är det möjligt att ange om vi behöver en exakt matchning eller inte för olika delar av URL: en för att lägga till en CSS-klass till en länk.
Tidigare kunde vi bara kräva en exakt matchning (eller inte) för hela webbadressen:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
Nu kan vi istället tillhandahålla finkorniga matchningsregler för sökvägar, frågeparametrar, matrisparametrar och fragment.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
De värden som stöds är exact
, ignored
och subset
, som kan användas för queryParams
och matrixParams
. För stigar kan du antingen passera in exact
or subset
och exact
or ignored
för fragment
.
Observera att isActive
routerns metod accepterar också dessa nya alternativ.
fragmentet är ogiltigt
Ända tills nu, ActivatedRouteSnapshot.fragment
var inte ogiltig. Detta har förändrats med Angular 12. Men oroa dig inte för mycket; ng update
har fått dig täckt
Blanketter
Mer kontroll över emitterade händelser
Smakämnen emitEvent
alternativ har lagts till i olika metoder för FormGroup
och FormArray
. Tack vare denna förändring kommer det nu att vara möjligt att kontrollera om händelser behöver sändas ut eller inte i fler fall.
Till exempel tidigare när en kontroll togs bort med removeControl
metod av FormGroup
, då släpptes alltid en händelse. Med denna förändring kommer vi nu att kunna undvika sådana problem.
Smakämnen emitEvent
alternativet har lagts till följande metoder för FormGroup
:
addControl
removeControl
setControl
Och till följande metoder för FormArray
:
push
insert
removeAt
setControl
clear
stöd för min och max validatorer för malldrivna formulär
Smakämnen min
och max
Validerare av Angular kan nu användas med malldrivna formulär:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
Observera att detta är en brytande förändring, eftersom de tidigare skulle ignoreras.
i18n
I18n-systemet för Angular har förändrats med den här versionen.
Som påpekas i meddelandeblogginlägget används för närvarande ett antal äldre meddelande-ID-format. De är ömtåliga och problem kan förekomma på grund av mellanslag, formateringsmallar och ICU-uttryck.
Angular 12 introducerar ett nytt kanoniskt meddelande-ID-format (dvs. ett format för att styra dem alla). Detta format är mer elastiskt och mer intuitivt.
Det här formatet minskar onödig översättningsinvalidering och tillhörande återöverföringskostnad i applikationer där översättningar inte matchar på grund av till exempel förändringar i mellanslag.
Sedan v11 konfigureras nya projekt automatiskt för att använda de nya meddelandets id: n och nu finns det verktyg för att migrera befintliga projekt med befintliga översättningar. Om du är orolig kan du använda localize-migrate
verktyg för att migrera dina meddelande-id: er:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
Du kan hitta mer information här..
Prestandaförbättring
Med den här versionen finns det ett antal prestandaförbättringar. Den mest uppenbara kommer tillsammans med uppgraderingen till Webpack 5, men det finns mer:
Ett antal oanvända metoder har tagits bort från DomAdapter
. Det är coolt eftersom dess metoder inte kan skakas i träd och inkluderades i alla vinklade applikationer, som förklaras i motsvarande PR.
Angular genererar nu mindre kod för säker tillgång till egendom; till exempel för malluttryck som a?.b
och den nyligen stödda noll-sammanslagningen: a ?? b
.
Angular-kompilatorn stöder nu inkrementell kompilering även i närvaro av omdirigerade källfiler. Tidigare kunde arbete från tidigare kompilering inte återanvändas när TypeScript deduplicerade källfiler. Du kan läsa mer om det här..
Angular-kompilatorn cachar nu filsystemets sökväg för källfiler. Tidigare ringde det upprepade gånger fs.resolve()
, vilket är tidskrävande.
Smakämnen getDirectives
har förbättrats. Tillsammans med den förändringen, ng
namespace har också utökats till att inkludera ett nytt getDirectiveMetadata
verktyg.
Och det finns lite mer.
ng API-förbättringar
Smakämnen ng
felsöknings-API som vi kan använda från webbläsarens utvecklingsverktyg har förbättrats med Angular 12.
Det finns en ny funktion som heter getDirectiveMetadata
, som kan användas för att hämta information om komponenter och direktiv. Jag tror inte att vi behöver det ofta, men framtida förbättringar av utvecklingsverktyg kommer förmodligen att förlita sig på detta. Du kan ta reda på mer hit.
En ny profilfunktion kallad esetProfiler
har också implementerats och det finns också i produktionsläge. Den nya funktionen kan anropas i ett antal scenarier. Till exempel kan den användas för att spåra varaktighet för skapande av mallar, uppdateringar av mallar, bearbetning av livscykelkrokar etc. Återigen kommer detta API att utnyttjas av kommande utvecklingsverktyg, vilket ger oss mycket mer insiktsfull information om hur våra applikationer presterar på körning.
Detta är fortfarande experimentellt just nu, men jag antar att vi kommer att höra mer om detta senare. Jag är nyfiken på att se om / när verktyg som Sentry kommer att integrera stöd för att samla in denna typ av information för att förse oss med användbara instrumentpaneler.
Några dagar efter lanseringen av Angular 12 har Angular-teamet meddelade tillgången på helt nya Angular Dev Tools för Google Chrome. Du kan ladda ner dem här..
Med det helt nya webbläsartillägget kan du enkelt inspektera dina Angular-applikationer under utvecklingen. Den stöder:
- Visualisera applikationens struktur (dvs. inspektera komponentträdet)
- Utforska och redigera komponenter
- Profilerande föreställningar
Med den inbäddade profilen kan vi spela in händelser för ändringsdetektering och förhandsgranska dem när de inträffar. För varje ändringsdetekteringscykel kan vi titta på hur lång tid det tog, vilka komponenter som tog längst tid, om den cykeln orsakade ramdroppar.
Angular hade tidigare semi-officiella Dev Tools genom Järtecken projekt (som är grunden för de nya verktygen!), men de var inte kompatibla med Ivy. Så det här är bra nyheter för Angular-samhället!
Och mer…
Det finns ett ton mer mindre förändringar i denna version. Här är en snabb översikt.
APP_INITIALIZER stöder nu Observables
Hittills var det inte möjligt att använda Observables med APP_INITIALIZER
. Från och med Angular 12 kan vi nu göra det, vilket kommer att möjliggöra renare kod!
Om du inte visste om den här funktionen hos Angular än, APP_INITIALIZER
is en symbol som vi kan använda för att definiera funktioner som måste köras under applikationsinitialisering. Om den funktionen är asynkron, returneras en Promise
eller en Observable
(ny: p), sedan väntar Angular på att det ska slutföras innan du startar applikationen.
Denna förändring är mer än välkommen, eftersom det innebär att vi kan skriva ännu mer kod med RxJS, istället för att behöva "falla tillbaka" till Promise
API.
Du kan läsa mer om det här..
Runtime kontroll över animationer
Tidigare var det enda sättet att inaktivera animationer att tillhandahålla NoopAnimationsModule
. Från och med Angular 12 är det nu möjligt att inaktivera animationer baserat på runtime-information med BrowserAnimationModule.withConfig
metod och vidarebefordra den disableAnimations
boolesk egendom.
Ny historyGo-metod för platstjänst
Smakämnen LocationService
av Angular innehåller nu en historyGo
metod, som kan användas för att navigera mot en viss sida i sessionshistoriken, identifierad av dess relativa position till den aktuella sidan. Denna metod motsvarar den infödda window.history.go
metod. Kolla in MDN för några exempel.
Förbättringar av språktjänster
Språktjänsten, vilket är det som ger IDE: s alla användbara insikter om vinkelkod har också förbättrats med den här versionen.
Med Angular 12 är språktjänsten aktiverad som standard (tidigare krävde vi att vi skulle delta).
Från och med Angular 12 kommer det också att upptäcka om strikt malltypskontroll är inte aktiverat och kommer att råda dig att aktivera dessa.
Språktjänsten inkluderar nu också funktionsspårningsfunktioner, som kan användas för att spåra föreställningar. Detta kan aktiveras i VSCode, som förklaras här (detta är dock ganska låg nivå).
Om du inte känner till språktjänsten än, kolla in de officiella dokumenten, eller det trevliga blogginlägget skrivet av Ninja Squad, eller det här videointro.
Inaktivera luddregler direkt från HTML-mallar
Angular mall kompilatorn håller nu reda på HTML-kommentarer.
Tidigare var det inte möjligt att inaktivera linterregler från HTML-mallar eftersom Angular mallkompilatorn ignorerade kommentarer. Lösningen var att inaktivera dessa regler för hela mallen från komponentens styrenhet. Tack vare denna förändring är det nu möjligt att göra detta mer exakt från mallen:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Yay för renare kod!
DatePipe stöder nu ICU-standard fristående veckodag
Tidigare, det var inte möjligt för att formatera ett datum till fristående veckodag med DatePipe.
Tack vare denna ändring stöds nu finsk datumformatering, och jag är säker på att det är bra nyheter för en bråkdel av Angular-communityn 😉
Stöd för framåt Ref i tillhandahålls i fält av Injicerbara dekoratörer
Det är nu möjligt att använda forwardRef
inom providedIn
fältet av @Injectable
dekoratör.
Ny transformResource-krok i ResourceHost-gränssnittet
A transformResource
metoden har lagts till i ResourceHost
gränssnitt. Tack vare detta är det nu möjligt för verktyg att göra saker som att introducera förprocessorsupport för inline-stilar. Det är detta som möjliggör det nya stödet för SASS med inline-stilar.
Du kan lära dig mer om det här. och här..
Möjligt att skapa anpassade routeruttagsimplementeringar
Fram till nu var det möjligt att skapa anpassade routeruttag, men det krävdes att man hoppade igenom några ringar (dvs. att registrera anpassade uttag med ChildrenOutletContexts
).
Vinkel 12 ger en renare stöd för anpassade routeruttag.
Bug fixar
Som vanligt finns det en gazillion buggfixar ingår i den här utgåvan.
Här är en kopia av release-anteckningarna:
- animationer: säkerställa konsekvent beställning av namnrymd (#19854) (01cc995)
- animationer: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (e918250)
- animationer: rensa DOM-element när rotvyn tas bort (#41059) (c49b280)
- animationer: tillåta animeringar på element i skuggan DOM (#40134) (pappa42c8), stänger #25672
- animationer: rensa DOM-element när rotvyn tas bort (#41001) (a31da48)
- basel: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (8503246)
- basel: uppdatera byggverktyg för de senaste ändringarna i rules_nodejs (#40710) (696f7bc)
- basel: uppdatera integrationstestet att använda regler_nodejs@3.1.0 (#40710) (34av89a)
- basel: uppdateringar typ gjutningar för JSON.parse användning (#40710) (2c90391)
- bänkpress: uppdateringar typ gjutningar för JSON.parse användning (#40710) (e721a5d)
- allmänning: lägg till rätt ContentType för booleska värden med HttpClient-begäran body (#38924) (#41885) (922a602)
- allmänning: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (f2b6fd8)
- allmänning: viewport scroller hittar inte element i skuggan DOM (#41644) (c0f5ba3), stänger #41470
- allmänning: tillfälligt återexportera och avskaffa
XhrFactory
(#41393) (7dfa446) - allmänning: rengöringsplats ändrar lyssnare när rotvyn tas bort (#40867) (38524c4), stänger #31546
- allmänning: tillåt antal eller booleska som http params (#40663) (91cdc11), stänger #23856
- allmänning: undvik att mutera sammanhangsobjekt i NgTemplateOutlet (#40360) (d3705b3), stänger #24515
- kompilator: bevara @page-regler i inkapslade stilar (#41915) (3e365ba), stänger #26269
- kompilator: ta bort väljare från
@font-face
regler (#41815) (2a11cda), stänger #41751 - kompilator: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (bae8126)
- kompilator: icke-bokstavliga inbyggda mallar felaktigt bearbetade i partiell sammanställning (#41583) (ab257b3)
- kompilator: genererar inte uppdateringsinstruktioner för ng-mall i alternativa namnområden (#41669) (2bcbbda), stänger #41308
- kompilator: undvik att analysera EmptyExpr med en spännvidd bakåt (#41581) (e1a2930)
- kompilator: hantera skiftlägeskänsliga CSS-anpassade egenskaper (#41380) (e112e32), stänger #41364
- kompilator: inkludera använda komponenter under JIT-sammanställning av partiell komponentdeklaration (#41353) (ff9470b), stänger #41104 #41318
- kompilator: stödja flera
:host-context()
väljare (#40494) (07b7af3), stänger #19199 - kompilator: uppdateringar typ gjutningar för JSON.parse användning (#40710) (f728490)
- kompilator-cli: användning ”för källkartans URL för indirekta mallar (#41973) (7a4d980), stänger #40854
- kompilator-cli: exponera länken som ett Babel-plugin (#41918) (8fdac8f)
- kompilator-cli: föredrar icke-alias export i referensemitterare (#41866) (75bb931), stänger #41443 #41277
- kompilator-cli: tillåta länkar att bearbeta minifierade booleaner (#41747) (1fb6724), stänger #41655
- kompilator-cli: matcha strängindexerade partiella deklarationer (#41747) (f885750), stänger #41655
- kompilator-cli: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (5b463f4)
- kompilator-cli: autoslutför bokstavliga typer i mallar. (#41456) (#41645) (8b2b5ef)
- kompilator-cli: fel inte med prepocessing om komponenten inte har några inbyggda stilar (#41602) (a5fe8b9)
- kompilator-cli: se till att kompilatorns spår
ts.Program
s korrekt (#41291) (74) - kompilator-cli: förhindra eliminerad standardimport i inkrementella återkompileringar (#41557) (7f16515), stänger #41377
- kompilator-cli: Lös
rootDirs
till absolut (#41359) (3e0fda9), stänger #36290 - kompilator-cli: lägga till
useInlining
möjlighet att skriva check config (#41043) (09aefd2), stänger #40963 - kompilator-cli:
readConfiguration
befintliga alternativ bör åsidosätta alternativ i tsconfig (#40694) (b7c4d07) - kompilator-cli: förlänga
angularCompilerOptions
i tsconfig från nod (#40694) (5eb1954), stänger #36715 - kompilator-cli: uppdatera ngcc integrationstester för senaste ändringar i rules_nodejs (#40710) (d7f5755)
- kompilator-cli: uppdateringar typ gjutningar för JSON.parse användning (#40710) (b75d7cb)
- kärna: behåll inte dynamiskt kompilerade komponenter och moduler (#42003) (1449c5c), stänger #19997
- kärna: anropa profiler runt ngOnDestroy livscykelkrokar (#41969) (e9ddc57)
- kärna: AsyncPipe nu kompatibel med RxJS 7 (#41590) (9759 f.Kr)
- kärna: hantera flera i18n-attribut med uttrycksbindningar (#41882) (73c6c64), stänger #41869
- kärna: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (f9c1f08)
- kärna: upptäcka syntetiserade konstruktörer som har utvecklats nedåt med TS 4.2 (#41305) (274dc15), stänger #41298
- kärna: Växla
emitDistinctChangesOnlyDefaultValue
till sant (#41121) (7096246) - kärna: ta bort duplicerad EMPTY_OBJ-konstant (#41066) (bf158e7)
- kärna: ta bort duplicerad EMPTY_ARRAY konstant (#40991) (e12d9de)
- kärna: tillåt att EmbeddedViewRef-sammanhang uppdateras (#40360) (a3e1719), stänger #24515
- kärna: gör DefaultIterableDiffer behåll ordningen på dubbletter (#23941) (a826926), stänger #23815
- kärna: NgZone-alternativ för kolsortering bör aktivera onStable korrekt (#40540) (22f9e45)
- element: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (4f5d094)
- element: uppdateringar typ gjutningar för JSON.parse användning (#40710) (efd4149)
- former: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (dc975ba)
- http: slutföra begäran vid timeout (#39807) (61a0b6d), stänger #26453
- http: avge fel på XMLHttpRequest avbryta händelse (#40767) (3897265), stänger #22324
- språktjänst: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (9b6198c)
- språktjänst: använd skriptversioner för inkrementella sammanställningar (#41475) (78236bf)
- språktjänst: Ange endast kompletterade vinklade egenskaper i mallar (#41278) (0226a11)
- språktjänst: Lägg till plugin-alternativ för att tvinga strikta mallar (#41062) (e9e7c33)
- språktjänst: använd en ingång för Ivy och View Engine (#40967) (e986a97)
- lokalisera: koppla av fel till varning för saknad mål (#41944) (35 fortsätt2), stänger #21690
- lokalisera: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (658ed1f)
- lokalisera: uppdateringar typ gjutningar för JSON.parse användning (#40710) (4b469c9)
- ngcc: upptäcka syntetiserade konstruktörer som har utvecklats nedåt med TS 4.2 (#41305) (8d3da56), stänger #41298
- plattforms-webbläsare: förhindra minnesläckage av stilnoder om DOM-inkapsling används (#42005) (d555555), stänger #36655
- plattforms-webbläsare: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (ea05cfd)
- plattforms-webbläsare: konfigurera
XhrFactory
att användaBrowserXhr
(#41313) (e0028e5), stänger #41311 - plattforms-webbläsare: uppdateringar typ gjutningar för JSON.parse användning (#40710) (7ecfd2d)
- plattform-webbläsare-dynamisk: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (bc45029)
- plattformsserver: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (4b9d4fa)
- router: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (0067edd)
- router: Hämta endast lagrad rutt när återanvändningsstrategi anger att den ska ansluta igen (#30263) (a4ff071), stänger #23162
- router: rekursivt slå samman tomma sökvägar (#41584) (1179dc8), stänger #41481
- router: fragment kan vara noll (#37336) (b555160), stänger #23894 #34197
- router: uppdateringar typ gjutningar för JSON.parse användning (#40710) (350 dada)
- servicearbetare: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (6b823d7)
- servicearbetare: uppdateringar typ gjutningar för JSON.parse användning (#40710) (4f7ff96)
- uppgradering: bevara $ interval.flush när ngMocks används (#30229) (87dc851)
- uppgradering: uppdatera utbudet av nodversioner som stöds för att endast omfatta LTS-versioner (#41822) (10c4523)
Förresten, märkte du det AsyncPipe
har patched av Ben Lesh för att vara kompatibel med både RxJS 6 och 7? Hur coolt är inte det?
Bryter förändringar
Som vanligt finns det ett antal banbrytande förändringar med den här versionen.
As de officiella utgåvan är ganska tydliga, jag kopierar / klistrar bara in dem här:
- Förminskade UMD-paket ingår inte längre i de distribuerade NPM-paketen.
- animationer: DOM-element tas nu bort korrekt när rotvyn tas bort. Om du använder SSR och använder appens HTML för rendering, måste du se till att du sparar HTML till en variabel innan du destorerar appen. Det är också möjligt att tester av misstag kan förlita sig på det gamla beteendet genom att försöka hitta ett element som inte togs bort i ett tidigare test. Om detta är fallet bör de misslyckade testerna uppdateras för att säkerställa att de har rätt installationskod som initialiserar element de litar på
- gemensam: Metoder för
PlatformLocation
klass, nämligenonPopState
ochonHashChange
, brukade återvändavoid
. Nu returnerar dessa metoder funktioner som kan kallas för att ta bort händelsehanterare - vanligt: Metoderna för
HttpParams
klass accepterar nustring | number | boolean
istället förstring
för värdet på en parameter. Om du utökade den här klassen i din ansökan måste du uppdatera signaturerna för dina metoder för att återspegla dessa förändringar - kompilator-cli: Länkade bibliotek genererar inte längre äldre i18n-meddelande-ID. Alla nedströmsapplikationer som tillhandahåller översättningar för dessa meddelanden måste migrera sina meddelande-ID med hjälp av
localize-migrate
kommandoradsverktyg - kärna: Angular har inte längre stöd för nod v10, så om du fortfarande använder den för din utvecklingsmiljö är det verkligen dags att uppgradera!
- kärna: Tidigare
ng.getDirectives
funktionen kastade ett fel om en given DOM-nod inte hade något vinklat sammanhang associerat med den (till exempel om en funktion anropades för ett DOM-element utanför en Angular-app). Detta beteende var oförenligt med andra felsökningsverktyg underng
namnområde, som hanterade denna situation utan att göra något undantag. Ringer nu tillng.getDirectives
funktion för sådana DOM-noder skulle resultera i en tom matris som returneras från den funktionskärnan: Byt standardemitDistinctChangesOnlyDefaultValue
som ändrar standardbeteendet och kan orsaka att vissa applikationer som förlitar sig på felaktigt beteende misslyckas
emitDistinctChangesOnly
flaggan har också upphört att gälla och kommer att tas bort i en framtida större utgåva
Det tidigare genomförandet skulle avfyra förändringar QueryList.changes.subscribe
närhelst QueryList
beräknades om. Detta resulterade i ett artificiellt stort antal ändringsaviseringar, eftersom det är möjligt att återberäkning QueryList
resulterar i samma lista. När QueryList
får beräknas är en implementeringsdetalj, och det borde inte vara det som avgör hur ofta förändringshändelse ska utlösas.
Tyvärr orsakade att alltför många befintliga applikationer misslyckades genom att fixa beteendet direkt. Av denna anledning anser Angular att denna fix är en brytande fix och har infört en flagga i @ContentChildren
och @ViewChildren
, som styr beteendet.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
För bakåtkompatibilitet före v12emitDistinctChangesOnlyDefaultValue
satt till false
. Denna förändring
ändrar standard till true
.
- kärna: Typ av
APP_INITIALIZER
token har ändrats för att mer exakt återspegla de typer av returvärden som hanteras av Angular. Tidigare har varje initialiseringsåterkallning skrivits för att återvändaany
, det här är nuPromise<unknown> | Observable<unknown> | void
. I det osannolika fallet att din applikation använderInjector.get
orTestBed.inject
API för att injiceraAPP_INITIALIZER
token, du kan behöva uppdatera koden för att ta hänsyn till den strängare typen.
Dessutom kan TypeScript rapportera TS2742-felet om APP_INITIALIZER
token används i ett uttryck vars slutsats måste släppas ut i en .d.ts-fil. För att lösa detta behövs en tydlig typnotering, vilket vanligtvis skulle vara Provider
or Provider[]
.
-
kärna: Lägsta stöd
zone.js
versionen är0.11.4
. Således betyder det att om du använder en äldre version är det också dags att uppgradera zone.js i ditt projekt! -
former: Smakämnen
emitEvent
alternativet lades till följandeFormArray
ochFormGroup
metoder: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
Om din app har anpassade klasser som sträcker sig FormArray
or FormGroup
klasser och åsidosätta
ovan nämnda metoder kan du behöva uppdatera din implementering för att ta de nya alternativen in
konto och se till att åsidosättningar är kompatibla ur ett typperspektiv.
- former: Tidigare
min
ochmax
attribut definierade på<input type="number">
ignorerades av formulärmodulen. Nu skulle närvaron av dessa attribut
utlösa min / max-valideringslogik (i fallformControl
,formControlName
orngModel
riktlinjer finns också på en viss input) och
motsvarande formkontrollstatus skulle återspegla det. - plattforms-webbläsare:
XhrFactory
har flyttats från@angular/common/http
till@angular/common
.
Innan
import { XhrFactory } from '@angular/common/http';
Efter
import { XhrFactory } from '@angular/common';
- router: Stränga nollkontroller rapporterar om fragment som potentiellt är noll.
Migrationsväg: lägg till nollkontroll. - router: Typ av
RouterLinkActive.routerLinkActiveOptions
ingången var
utvidgas för att möjliggöra mer finjusterad kontroll. Kod som tidigare lästs
den här egenskapen kan behöva uppdateras för att ta hänsyn till den nya typen.
Uppdaterad färdplan
Enligt nuvarande Angular färdplan, teamet är nu upptagen med följande förbättringar:
- Förbättra utvecklarupplevelsen under felsökning och profilering. Detta bör hjälpa oss att förstå komponentstrukturen (jag antar att React Dev Tools tillåter React) och ändra detektering
- Förbättra testtider och felsökning med automatisk nedrivning: Detta bör förbättra isoleringen mellan test och testtider. De Testbädd kommer också att ändras för att automatiskt rensa upp och riva ner testmiljön efter varje test har utförts
- Använda ES2017 + som standardutgång: De identifierar spärrar och tar bort dem så att standardutmatningsspråket kan uppgraderas
- Integrering av MDC Web i vinklat material
- Förbättra tillgängligheten för vinkelmaterialkomponenter
- Publicera guider om avancerade begrepp som ändringsdetektering, prestandaprofilering, interaktioner med Zone.js, etc.
- Uppdatera teststrategin e2e (cfr ovan)
- Förbereder uppgraderingen till RxJS v7 +. Som du kanske vet har RxJS 7 varit det släppt nyligen. Förhoppningsvis skulle vi snart kunna uppgradera
I framtiden planerar Angular-teamet att:
- Titta på mikrofrontens arkitektur: de kan introducera medel för oss att enkelt skapa mikrofrontar med Angular
- Förbättra utvecklarupplevelsen med strikt att skriva för vinklade former (vi behöver det så mycket)
- Gör Zone.js valfritt, vilket skulle förenkla ramverket, förbättra felsökning, minska buntstorlekar och till och med tillåta att dra nytta av den inbyggda synkroniseringen för async / await
- Förbättra byggprestanda genom att integrera Angular-kompilatorn (
ngc
) som ett TypeScript-kompilator-plugin - Tillåt att lägga till direktiv till värdelement. Detta har också begärts av samhället under lång tid!
- Gör NgModules valfria för att underlätta inlärningskurvan
- Ge oss enklare sätt att implementera koduppdelning på komponentnivå
Vinkelmaterial och vinklat CDK
Sass migration
Internt har både Angular Material och CDK migrerat till nytt Sass-modulsystem.
Om din applikation använder någon av dessa måste du se till att du har ersatt den node-sass
by sass
: https://www.npmjs.com/package/sass. De node-sass
paketet underhålls inte längre!
Med denna migrering har Sass-temaprogrammet förbättrats och det gör att vi nu kan utnyttja Sass @use
verktyg.
Det finns nu en enda startpunkt för @angular/material
och @angular/cdk
.
Slutligen har API: erna också ändrats för tydlighetens skull. Många funktioner, mixins och variabler har bytt namn på vägen.
Du hittar mer information om dessa ändringar i den nya temaguiden: https://github.com/angular/components/blob/master/guides/theming.md. Observera dessutom att guiderna på https://material.angular.io har skrivits om för att visa upp det nya API: et och inkludera förklaringar.
Uppgraderingsprocessen migrerar automatiskt koden till det nya Sass API. Du kan hitta före / efter exempel här..
Vinkel CDK förändringar
Version 12 innehåller ett antal förändringar till Angular CDK.
Här listar jag bara de nya funktionerna, men du kan kolla in release-anteckningarna om du vill ha information om buggfixar och prestandaförbättringar:
- Dra-släpp: Den tappade händelsen innehåller nu en
dropPoint
fastställer den exakta punkten där musen pekade var när objektet tappades. Mer information här. - Dra-släpp: Förhandsgranskningsbehållaren kan nu anpassas
- Bord: Ett nytt direktiv tillåter aktivera recycle view repeater, som cachar borttagna rader och återanvänder dem när datamängden ändras. Detta kan hjälpa till att förbättra prestanda (minska latens)
- Bord: Lade förskjutningarna av klibbiga element till
StickyUpdate
gränssnitt - Stepper: När en användare försöker gå bort från ett steg, an
interacted
händelse kommer nu att vara emitteras - Stepper: Orienteringen kan nu vara ändrats
- Tillgänglighet: En
FocusOptions
objektet kan nu passeras in i olika fokusfällmetoder - Testning: Ny WebDriver-sele-miljö. Jag har inte dykt in i den här än så jag kan inte berätta mer. Kolla upp PR
Vinkelformiga materialförändringar
Det finns också ett antal ändringar för vinkelmaterial. Återigen, kolla in release-anteckningarna för en fullständig lista över buggfixar.
Nya funktioner:
- Datumväljare: Beror inte längre på dialog
- Stepper: Orienteringen kan nu ändras dynamiskt (cfr liknande förändring i CDK)
- Stepper: Tillåt att innehållet är återges lat
- Meny: Tillåt uppdatering av menypositionen programmatiskt
- Mattfel: Används nu
aria-live="polite"
istället förrole="alert"
. Fler detaljer här. - Flikar: Lägg till metod till programmera in fokus på en viss flik
- Lista: Nu returnerar en matris med ändrade alternativ från
selectAll
ochdeselectAll
metoder. Kolla upp PR för mer information - Skjut växla: Tillåta att globalt konfigurera en standardfärg via en leverantör
- Verktygstips: Visar nu den effektiva positionen för verktygstips genom en klass på komponenten
- radio, Kryssruta och Slider: Inkludera bakgrundsfärgen för dessa komponenter i skriva ut formatmallar
Det finns också ett antal ändringar i den experimentella versionen: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
Vinkel Universal
Angular Universal 12 är också färskt ur ugnen.
Med den här utgåvan, Universal nu integrerar kritisk CSS som standard, vilket är ganska coolt.
Universal innehåller nu en ny proxyConfig
alternativ för att tillhandahålla anpassade proxykonfigurationer till ssr-dev-server
byggare.
I den här versionen finns det en ny (experimentell) SSR-motor som heter Clover (påminner mig om ett kvalitetsverktyg i Java-ekosystemet). Denna nya motor verkar lovande. Det syftar till att förenkla saker, bli av med Window is undefined
fel, ta bort behovet av flera builds för SSR / prerender, generera applikationsskal utan extra build och mer. Vi kommer förmodligen att höra mer om det senare. Om du är nyfiken, kolla in den PR.
Denna version innehåller en byggare som kan användas för att generera statiska sidor (dvs. pre-rendering) med den nya Universal Clover-metoden.
Slutligen inkluderar den här versionen också TLS-stöd för dev-servern.
Google Maps
Som du vet innehåller Angular komponenter för Google Maps och Youtube. Version 12 ger några förbättringar för Google Maps-komponenten:
- Nu ingår en
icon
input för att enkelt anpassa markören - Avger nu en
clusterClick
händelse när ett kluster har klickats - Inkluderar ett omslag runt Google Maps Geocoder API och export
MapDirectionsResponse
, som inte exponerades tidigare - Introducerar stöd för gör värmekartor
- Lade
MapDirectionsRenderer
, som gör det möjligt att göra vägbeskrivningar på en karta ochMapDirectionsService
, som omslutergoogle.maps.DirectionsService
att beräkna rutter mellan två punkter. - Nya
options
ingång på markörkluster, liknar de andra direktiven.
Uppgradering
Som vanligt finns det en komplett uppgraderingsguide, och ng update
hjälper dig: https://update.angular.io/?l=3&v=11.0-12.0
Om du använder Nrwl NX (du borde verkligen), notera att Nx 12.3 redan har stöd för Angular 12! Läs mer om det här.. Som en extra fördel hjälper Nx dig också att migrera från TSLint till ESLint (och det är dags!)
Slutsats
I den här artikeln har jag utforskat de nya funktionerna i Angular 12.
Som vanligt är detta release is heroisk- (vad kan det annars vara ?! 😎).
Ivy går framåt och förhoppningsvis blir vi "snart" mindre irriterade av ngcc
, när ekosystemet migrerar. Det finns ett antal fantastiska förändringar med den här versionen, så kolla in den och uppgradera nu !.
Det är det för idag!
PS: Om du vill lära dig massor av andra coola saker om produkt / programvara / webbutveckling, kolla in Dev koncept serie, (https://mailchi.mp/fb661753d54a/developassion-newsletter) [prenumerera på mitt nyhetsbrev], och kom och säg hej på Twitter!
- SEO-drivet innehåll och PR-distribution. Bli förstärkt idag.
- Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. Tillgång här.
- Källa: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- Able
- Om oss
- om det
- ovan
- Absolut
- Acceptera
- accepterar
- tillgång
- tillgänglighet
- Konto
- exakt
- faktiskt
- lagt till
- Dessutom
- avancerat
- Fördel
- Efter
- Syftet
- Varna
- algoritm
- algoritmer
- Alla
- tillåta
- tillåter
- ensam
- redan
- alternativ
- alternativ
- Även
- alltid
- bland
- och
- Vinkel
- animationer
- meddelade
- Tillkännagivande
- Annan
- var som helst
- api
- API: er
- app
- visas
- Ansökan
- tillämpningar
- tillvägagångssätt
- April
- arkitektur
- runt
- array
- Artikeln
- artiklar
- associerad
- attribut
- Författarna
- Automat
- automatiskt
- tillgänglighet
- tillgänglig
- Babel
- tillbaka
- Back-end
- bakgrund
- bar
- baserat
- grund
- därför att
- innan
- Där vi får lov att vara utan att konstant prestera,
- fördel
- Bättre
- mellan
- Stor
- störst
- Bit
- Blogg
- varumärke
- Brand New
- Breaking
- Bringar
- fört
- webbläsare
- webbläsare
- Bug
- SLUTRESULTAT
- byggare
- Byggnad
- bygger
- inbyggd
- Bunt
- belastning
- kallas
- anropande
- kapacitet
- Vid
- fall
- Orsak
- orsakas
- byta
- Förändringar
- ta
- Kontroller
- krom
- klarhet
- klass
- klasser
- klar
- klart
- stänger
- kluster
- koda
- Samla
- färg
- kommande
- kommentarer
- samfundet
- kompatibilitet
- kompatibel
- fullborda
- komplicerad
- komponent
- komponenter
- Begreppen
- aktuella
- slutsats
- anslutna
- anser
- konsekvent
- konstant
- konsumera
- Behållare
- innehåll
- sammanhang
- fortsätta
- kontroll
- styrenhet
- kontroller
- kyla
- Kärna
- motsvarar
- Pris
- kunde
- Naturligtvis
- täcka
- omfattas
- skapa
- skapas
- Skapa
- skapande
- kritisk
- olika webbläsare
- avgörande
- CSS
- nyfiken
- Aktuella
- För närvarande
- beställnings
- anpassade egenskaper
- skräddarsy
- Datum
- dag
- Dagar
- döda
- behandla
- djupare
- Standard
- beror
- utplacera
- djup
- detalj
- detaljer
- Detektering
- bestämd
- bestämmande
- dev
- Utvecklare
- Utveckling
- DID
- olika
- GRÄV
- direktiv
- direkt
- distribueras
- Distributioner
- gör
- DOM
- ner
- ladda ner
- nackdelen
- tappade
- Droppar
- dubbletter
- under
- varje
- lättare
- lätt
- ekosystemet
- Effektiv
- ansträngning
- antingen
- element
- inbäddade
- möjliggöra
- möjliggör
- inkapslad
- början till slut
- energi
- Motor
- förbättrad
- tillräckligt
- säkerställa
- inträde
- Miljö
- miljöer
- fel
- fel
- speciellt
- etc
- Eter (ETH)
- utvärdera
- Även
- händelse
- händelser
- alla
- allt
- utvecklats
- utvecklas
- exempel
- exempel
- utmärkt
- undantag
- exekvera
- utförande
- befintliga
- expanderade
- förväntat
- erfarenhet
- Förklara
- förklarade
- förklara
- Förklarar
- förklaring
- utforskas
- explorer
- export
- utsatta
- uttryck
- förlänga
- förlängning
- extern
- extra
- främja
- MISSLYCKAS
- ganska
- Höst
- fläkt
- SNABB
- snabbare
- rädsla
- Leverans
- Funktioner
- Federation
- återkoppling
- få
- fält
- Fält
- Fil
- Filer
- Slutligen
- hitta
- finna
- natur
- Fast
- flöda
- Fokus
- fokuserar
- efter
- kraft
- formen
- format
- former
- Framåt
- hittade
- Stiftelser
- fraktion
- RAM
- Ramverk
- från
- Frontend
- full
- fungera
- funktioner
- ytterligare
- framtida
- generera
- genererar
- generera
- skaffa sig
- GitHub
- Ge
- ges
- ger
- Ge
- Go
- kommer
- god
- Google Chrome
- Google Maps
- diagram
- stor
- styra
- Guider
- hantera
- Hård
- har
- hört
- hjälpa
- här.
- hi
- Hög
- Markera
- historia
- krokar
- Förhoppningsvis
- värd
- Hur ser din drömresa ut
- html
- HTTPS
- stor
- läsbar
- SJUK
- Tanken
- identifierade
- identifiera
- Inverkan
- genomföra
- genomförande
- genomföras
- importera
- med Esport
- import
- förbättra
- förbättras
- förbättring
- förbättringar
- in
- innefattar
- ingår
- innefattar
- felaktigt
- pekar på
- indirekt
- info
- informationen
- initialt
- innovativa
- ingång
- insikter
- installera
- installera
- exempel
- istället
- instruktioner
- integrera
- Integrera
- integrering
- interaktioner
- intressant
- Gränssnitt
- inre
- Internet
- införa
- introducerade
- Introducerar
- införa
- intuitiv
- investerat
- isolering
- problem
- IT
- java
- JIT
- Jobb
- delta
- json
- Ha kvar
- Snäll
- Vet
- språk
- större
- Efternamn
- Latens
- senaste
- League
- läckage
- LÄRA SIG
- inlärning
- Legacy
- Nivå
- Hävstång
- bibliotek
- Bibliotek
- linje
- LINK
- kopplade
- Lista
- läge
- Lång
- länge sedan
- lång sikt
- längre
- se
- såg
- du letar
- Lot
- Låg
- gjord
- bibehålla
- upprätthåller
- större
- Majoritet
- göra
- GÖR
- Framställning
- många
- karta
- kartor
- Match
- matchande
- Materialet
- Matris
- max
- betyder
- Minne
- Meny
- Sammanfoga
- meddelande
- meddelanden
- metadata
- metod
- metoder
- Microsoft
- kanske
- migrera
- migration
- minsta
- mindre
- saknas
- misstag
- Mode
- Modern Konst
- modul
- Moduler
- mer
- mest
- flytta
- rörliga
- Mozilla
- multipel
- Som heter
- nämligen
- namn
- nativ
- Navigera
- nödvändigt för
- Behöver
- behov
- negativ
- netto
- Nya
- Nya funktioner
- nyheter
- Nyhetsbrev
- Nästa
- Next.js
- nod
- node.js
- noder
- Anmärkningar
- anmärkningsvärd
- anmälningar
- antal
- nummer
- objektet
- Uppenbara
- inträffade
- oktober
- tjänsteman
- Officiellt
- Gamla
- ONE
- Operatören
- Alternativet
- Tillbehör
- beställa
- organisationer
- ursprungligen
- Övriga
- Ombud
- utanför
- Översikt
- egen
- paket
- paket
- parameter
- parametrar
- särskilt
- reservdelar till din klassiker
- Godkänd
- Förbi
- bana
- utföra
- prestanda
- föreställningar
- utför
- perspektiv
- bit
- rörledning
- Plats
- planer
- plato
- Platon Data Intelligence
- PlatonData
- plugin
- Punkt
- popularitet
- placera
- möjlig
- Inlägg
- potentiellt
- den mäktigaste
- exakt
- föredra
- Närvaron
- presentera
- pretty
- förhindra
- Förhandsvisning
- föregående
- tidigare
- Innan
- förmodligen
- problem
- process
- bearbetning
- Produktion
- profilering
- Program
- projektet
- projekt
- lovande
- rätt
- egenskaper
- egenskapen
- ge
- förutsatt
- ger
- ombud
- publicerade
- Tryck
- pussel
- kvalitet
- Snabbt
- höja
- område
- Raw
- RE
- Reagera
- Läsa
- inse
- Anledningen
- skäl
- rekommendera
- post
- minska
- reflektera
- registrera
- relaterad
- frigöra
- frigörs
- avlägsen
- ta bort
- avlägsnas
- rendering
- UPPREPAT
- ersättas
- rapport
- begära
- förfrågningar
- kräver
- Obligatorisk
- elastisk
- respons
- REST
- resultera
- Resultat
- avkastning
- tillbaka
- återgår
- Befria
- spärrar
- Roll
- rot
- Rutt
- router
- Regel
- regler
- Körning
- rinnande
- säker
- Samma
- sass
- Save
- scenarier
- omfattning
- Andra
- verkar
- känsla
- Serier
- service
- session
- in
- inställning
- inställning
- skugga
- Kort
- skall
- visa
- signaturer
- liknande
- Enkelt
- förenkla
- eftersom
- enda
- Situationen
- Storlek
- storlekar
- Långsamt
- Small
- mindre
- So
- än så länge
- lösning
- Lösningar
- några
- något
- ljud
- Källa
- Utrymme
- specifik
- stabil
- stå
- standard
- standarder
- starta
- Starta
- status
- bo
- Steg
- Fortfarande
- Sluta
- lagra
- lagras
- Historia
- Strategi
- sträng
- striktare
- struktur
- stil
- prenumerera
- sådana
- super
- stödja
- Som stöds
- Stöder
- överraskningar
- Växla
- system
- Medvind
- Medvindcss
- Ta
- tar
- tar
- Målet
- grupp
- lag
- mall
- mallar
- testa
- Testning
- tester
- Smakämnen
- källan
- deras
- sak
- saker
- i år
- Genom
- tid
- tidskrävande
- tidslinje
- gånger
- till
- tillsammans
- token
- ton
- ton
- alltför
- verktyg
- verktyg
- toppnivå
- mot
- spåra
- spåra
- spår
- Spårning
- Förvandla
- övergång
- Översättning
- transparent
- utlösa
- sann
- typer
- skrivmaskin
- typiskt
- under
- förstå
- Universell
- oanvänd
- kommande
- Uppdatering
- uppdaterad
- Uppdateringar
- uppdatering
- uppgradera
- URL
- us
- Användning
- användning
- Användare
- användare
- verktyg
- verktyg
- godkännande
- validerare
- Värdefulla
- värde
- Värden
- olika
- Ve
- version
- utsikt
- W3
- vänta
- ville
- varning
- webb
- Webpack
- vecka
- veckor
- välkommen
- Vad
- om
- som
- medan
- VEM
- kommer
- inom
- utan
- Vann
- underbart
- Arbete
- arbetade
- arbetssätt
- skulle
- skriva
- skrivning
- skriven
- X
- år
- Din
- Youtube
- zephyrnet