Ta objava je bila prvotno objavljena na moje spletno mesto: https://dsebastien.net
V tem članku bom pregledal (skoraj) vse, kar je omembe vredno v tej povsem novi izdaji. Poudaril bom tudi, kaj se je spremenilo okoli Angularja, tako kot sem v prejšnjih člankih o Kotna 11 in Kotna 10.
Če iščete le pogled iz ptičje perspektive, si oglejte uradno obvestilo o izdaji. Tukaj se bom poglobil v opombe ob izdaji.
Pridružite se ligi Ivy ...
Ekipa Angular je delala na Ivy (nov cevovod za kompilacijo in upodabljanje) od leta 2018. Končno je bil izdan z Angular 8. Od Angular 9 je Ivy privzet za nove projekte in ekosistem se počasi seli nanj. Z Angular 12, stari View Engine je zdaj uradno opuščen. Odstranjen bo v prihodnji večji izdaji. Prav tako ne bo mogoče ustvariti novih aplikacij z uporabo View Engine. Končno je Ivy zdaj privzeta za nove knjižnične projekte.
Na tej točki se lahko avtorji knjižnic še vedno zanesejo na View Engine, zahvaljujoč ngcc
(kompatibilni prevajalnik Angular), vendar je res čas, da ocenijo, ali lahko preselijo svoje knjižnice v Ivy ali ne. Pred nekaj tedni je objavil Minko Gechev članek da to podrobno razložim. Oglejte si tudi povezane RFC.
Če niste vedeli, ngcc
je majhen proces, ki se zažene, ko ustvarite Angular projekt ali namestite odvisnosti. Ko vidite sporočila, kot je Compiling ... : es2015 as esm2015
, to je ngcc
opravlja svoje delo. Kaj ngcc
je zbiranje knjižnic, ki se zanašajo na View Engine, tako da jih lahko Ivy uporablja.
Tako kot jaz ste verjetno to opazili ngcc
Izvedba zahteva veliko časa in ima zelo negativen vpliv na izkušnjo razvijalcev. Zato je ključnega pomena, da se ekosistem Angular čim prej preseli na Ivy. Drugič, dokler se večina ekosistema ne premakne naprej, bo ekipa Angular morala obdržati View Engine, kar je problematično iz več razlogov. Nenazadnje, knjižnice, ki se zanašajo na View Engine, ne morejo biti odvisne od knjižnic Ivy.
Avtorji knjižnic verjetno ne morejo prehitro migrirati na Ivy, vendar bi morali nenaklonjene uporabnike očitno spodbuditi k nadgradnji. Kakor koli že, pot naprej je ta, da vse stvari čim prej preselimo na Ivy
Obstaja odličen članek o Ivy tam.
Adijo kotomer
Aprila je ekipa Angular napovedala, da namerava ukiniti podporo za Nosilec konec leta 2022.
Od Angular 12 naprej Protractor ne bo privzeto vključen v nove projekte. Namesto tega bo Angular CLI ponudil možnosti za uporabo drugih rešitev, kot je Cypress, WebdriverIOali TestCafe. To pomeni, da ng e2e
ukaz mora biti podprt tudi v prihodnje.
Kot je razloženo v napoved, leta 2013, ko je bil ustvarjen Protractor, spletni gonilnik Ni bilo standard, teste od konca do konca (e2e) pa je bilo težko napisati, vzdrževanje pa nočna mora. Kotomer je prinesel inovativno rešitev z zavijanjem selen-webdriver, in zagotovil način za nadzor poteka izvajanja.
Seveda se je od takrat veliko stvari razvilo. Zdaj imamo WebDriver
API, async
in await
(tudi na najvišji ravni await
, vau). Prav tako se je razvil tudi ekosistem. Rešitve, kot so Cypress, Dramski pisatelj, Lutkar so pridobili veliko (zasluženo) priljubljenost. Orodja, kot je Cypress, na primer zagotavljajo veliko boljšo izkušnjo za razvijalce kot Protractor, izkoriščajo sodobne standarde in celo podpirajo testiranje med brskalniki (med drugimi zmogljivimi zmogljivostmi). Druga prednost trenutnih de facto orodij za testiranje e2e je, da so neodvisna od ogrodja, kar je zelo dragoceno.
Skratka, vzdrževanje Protractorja za ekipo Angular nima velikega smisla. Zdajšnji razvoj kotomerja bi zahteval preveč truda in sprožil ogromno prelomnih sprememb. Več podrobnosti najdete v RFC, zanimivo branje.
Časovnica je pomembna za ekipe/projekte, ki so vložili veliko časa in energije v pisanje testov e2e s Protractorjem. Ekipa Angular je še vedno zaposlena z ocenjevanjem povratnih informacij, zbranih prek RFC, tako da bomo verjetno izvedeli več pozneje letos.
Kakorkoli že; poskusite Cypress, če ga še niste, ne boste razočarani! Mimogrede, vsem priporočam, da začnejo uporabljati Nrwl NX, čudovita rešitev, ki vključuje podporo za Angular, React, Next.js, Cypress in še veliko več
Ničelno združevanje
Angular 12 vključuje podporo za uporabo ničelni operater združevanja v predlogah Angular. In to je super! Ta operater je podprt v TypeScriptu od različice 3.7.
Če še niste slišali za tega operaterja, naj vam na hitro razložim. Ideja je, da bi lahko definirali nadomestno vrednost, če nekaj je null
or undefined
. Tu je primer:
If foo
is null
or undefined
, Potem x
bo nastavljeno na true
(tj. nadomestna vrednost) in jo lahko nastavimo na karkoli želimo.
Brez tega super ??
operator, bi morali namesto tega napisati tole:
let x = foo !== null && foo !== undefined ? foo : true;
Zdaj, ko Angular podpira tudi to, lahko končno pišemo izraze, kot so:
{{ age ?? calculateAge() }}
Namesto stare in bolj besedne alternative. NEAT!
Več o tej spremembi lahko izveste tukaj.
Več informacij o ničelnem združevanju najdete v Priročnik za TypeScript kot tudi naprej DND.
Podpora za TypeScript 4.2
Angular 12 uvaja podporo za TypeScript 4.2, kar pomeni, da lahko sedaj uporabljamo a ton novih čudovitih jezikovnih funkcij. Prav tako je bila opuščena podpora za TypeScript 4.0 in 4.1.
Tukaj je kratek pregled tega, kar vključuje TS 4.2:
Smart Type Alias Preservation: Urejevalniki kode prikažejo pričakovane tipe namesto neobdelanih tipov, kot se je dogajalo prej. O tem lahko izveste več tukaj.
Elementi vodilnega/srednjega počitka v vrstah Tuple: Sedaj lahko vključimo preostale elemente kamor koli znotraj tuple (z nekaj opozorili). To je zelo kul za tiste med nami, ki se občasno zanašamo na tuple. Več o tem tukaj.
Razumevanje strukture vašega projekta: TS 4.2 vključuje novo zastavo se imenuje --explainFiles
, ki TypeScriptu naroči, naj izpiše informacije o tem, zakaj je bila datoteka vključena v vaš program. To je zelo koristno za odpravljanje težav.
Izboljšave za neklicana preverjanja funkcij: TypeScript lahko zdaj zazna več primerov, ko funkcije niso klicane. Na primer pri pisanju foo
Namesto foo()
. Več podrobnosti in primerov lahko najdete tukaj.
Destrukturirane spremenljivke je zdaj mogoče izrecno označiti kot neuporabljene: let [_first, second] = getValues();
, kar je super; ni več napak, ko noUnusedLocals
je omogočeno!
Pravzaprav je veliko več, kot so strožji pregledi za in
operaterja in nekaj pomembnih sprememb, ki bi lahko vplivale na vas. Zato se prepričajte, da preverite opombe k izdaji.
Podpora za Webpack 5
Angular 11 nas je pripeljal eksperimentalna podpora za Webpack 5. Z Angular 12 je podpora za Webpack 5 zdaj pripravljena za proizvodnjo. ne!
Če niste pogledali Spletni paket 5, presenečeni boste. Webpack 5 je bil izdan oktobra 2020, tako da je do zdaj precej stabilen. Webpack je trenutno na različica 5.37 (izdano pred nekaj dnevi).
Tukaj je kratka razlaga o tem, kaj se je spremenilo z Webpackom 5, in zakaj sem tega tako vesel 🤩
Prvič, kot veste, je Webpack ključ del sestavljanke Angular CLI in igra pomembno vlogo pri velikosti svežnja, zmogljivosti gradnje itd.
Drugič, Webpack 5 je pomembna izdaja z razlogom. Vključuje številne prelomne spremembe, ki pojasnjujejo, zakaj je trajalo nekaj časa, da so Angular in gazilijon pripomočkov/knjižnic v ekosistemu nadgradili.
V opombah ob izdaji je skupina Webpack navedla, da se Webpack 5 osredotoča na:
- Izboljšanje zmogljivosti gradnje z obstojne predpomnjenje
- Izboljšanje dolgoročnega predpomnjenja z boljšimi algoritmi in privzetimi nastavitvami
- Izboljšanje velikosti svežnja z boljšim Tree Shakingom in ustvarjanjem kode
- Izboljšanje združljivosti s spletno platformo
- Čiščenje notranjih struktur
- Zdaj predstavljamo prelomne spremembe (haha), ki jim omogočajo, da ostanejo na različici 5 čim dlje
Najbolj kul lastnost Webpacka 5 je njegova podpora za Module Federation, ki zagotavlja temelje, potrebne za olajšanje ustvarjanje mikro front-endov. To je nekoliko izven obsega tega članka, a v hipu združevanje modulov omogoča, da se različne gradnje obnašajo kot ogromen povezan graf modulov, in nam omogoča uvoz in uporabo modulov iz oddaljenih gradenj. Preveri uradno dokumentacijo vedeti več.
Med večjimi spremembami je Webpack 5 opustil vse, kar je bilo prej opuščeno (npr. NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), tako dobro, kot IgnorePlugin
in BannerPlugin
.
Prav tako so bila odstranjena polifilna Node.js, ki so bila prej samodejno vstavljena; in to je ena največjih sprememb v tej izdaji. Ti polifili so sprva Webpacku omogočili uporabo modulov, izdelanih za Node.js, v brskalniku. To je bilo kul, vendar je imelo veliko slabost: večje svežnje. Poleg tega so bila ta polifilla vse manj uporabna, saj so obstajale bodisi z brskalnikom združljive alternative knjižnic bodisi posebne distribucije s podporo za brskalnik. Od Webpacka 5 dalje, ker se ti polifili ne bodo več dodajali samodejno, bomo morda naleteli na nekaj presenečenj. Na primer v primerih, ko v brskalniku uporabljamo module, narejene za Node.js, ne da bi se zavedali, da je prej deloval zahvaljujoč Webpacku. O tem lahko izveste več tukaj.
Webpack 5 je predstavil boljšo podporo za dolgoročno predpomnjenje. V produkcijskem načinu zdaj privzeto vključuje nove algoritme:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
Kot kaže vrednost, ti algoritmi kosom in modulom dodelijo deterministične ID-je ter izvozom deterministična imena.
Webpack 5 lahko izvaja ugnezdeno tresenje drevesa s sledenjem dostopu do ugnezdenih lastnosti izvozov (dobrodošli v matriki), kar bi moralo še izboljšati tresenje drevesa. Prav tako lahko zdaj analizirati odvisnosti med izvozi in uvozi modula. Obstajajo tudi izboljšave Tresenje drevesa CommonJS. In obstaja na tono več optimizacij.
Webpack 5 vključuje tudi številne spremembe za izboljšanje izkušnje razvijalcev. Na primer, obstaja nov algoritem identifikacije kosov ki je privzeto omogočen v razvojnem načinu. Ta novi algoritem daje kosom berljiva imena. The target
premoženja je bilo tudi precej izboljšalo.
Iskreno povedano, tukaj nimam dovolj prostora, da bi pokrival vse novosti s Webpackom 5, tamje samo način tudi veliko. Torej se bom ustavil tukaj
Če Webpack uporabljate samo posredno prek Angular CLI, potem bi morala biti večina tega za vas »pregledna«. Če pa uporabljate a izdelava spletnega paketa po meri v vašem projektu, potem bi si verjetno morali ogledati vodnik za migracije.
Nazadnje, če vas zanima, kaj sledi z Webpackom, si oglejte načrt za leto 2021 in seveda zadnje opombe ob izdaji.
Podpora za IE11 je zastarela
Naj se sliši še tako žalostno (koga zavajam? 😂), Angular 12 opušča podporo za IE11. Internet Explorer je za večino od nas mrtev, a na žalost ga številne organizacije še vedno uporabljajo v proizvodnji. Angular 11 bo tako odstranil podporo za IE 13, kar pomeni, da se morajo te organizacije res začeti odmikati od IE (kar je vseeno dobro). Nič več izgovorov!
Ko podpore za IE ne bo več, bo Angular manjši, hitrejši in s tem boljši za vse nas. Poleg tega, ko ne bo več bremena vzdrževanja združljivosti za nazaj s podedovanimi brskalniki (IE11 je zadnji od teh!), bo Angular lahko izkoristil sodobne API-je (npr. spremenljivke CSS, Opazovalec križišča, Mreža CSS, Pooblaščenci, Spletne animacijein več).
Res komaj čakam, da podpore za IE ni več!
Privzeto strogo
DA DA DA 🤩. Od Angular 12 je strogi način Angular je privzeto omogočeno v CLI. In to je super.
Kot veste, sem velik oboževalec strogega načina TypeScript, pa tudi strogega načina Angular. Če želite izvedeti več, preverite članek, ki sem ga napisal lani in Minka Gečeva članek, ki pojasnjuje spremembo.
Privzeta izdelava
Do sedaj, vodenje ng build
ukaz je ustvaril razvojno zgradbo. Od Angular 12, ng build
bo zdaj privzeta produkcijska zgradba.
Upajmo, da bo nekaterim ekipam pomagalo, da se izognejo napaki pri gradnji in uvajanju razvojnih zgradb v produkcijska okolja. Čeprav se bojim, da bodo imele ekipe, ki naredijo to napako, še vedno druge težave
Podpora Sass za vgrajene sloge
Angular podpira Sass že zelo dolgo, vendar smo do sedaj lahko uporabljali Sass le v zunanjih slogovnih listih. Z Angular 12 je zdaj mogoče uporabljati Sass skupaj s slogi komponent v vrstici (tj. znotraj styles
lastnina).
To je treba omogočiti z nastavitvijo novega inlineStyleLanguage
premoženje true
in angular.json
.
Podpora za zadnji veter
Tailwind zdaj uradno podpira Angular. Pravzaprav je bila podpora uvedena v Angular CLI v v11.2.
Hrbtni veter je zaseden s prevzemanjem sveta, še posebej zdaj, ko ima a rad JIT prevajalnik, in čudovito je imeti vgrajeno podporo zanj v Angularju.
Prej je bilo potrebno dodati Tailwind projektu Angular prilagajanje gradnje spletnega paketa. Ne več! Zdaj je dodajanje Tailwind tako preprosto kot namestitev paketa, ustvarjanje tailwind.config.js
datoteko z uporabo npx tailwindcss init
in omogočite Tailwindov način JIT.
Http izboljšave
Angular 12 uvaja številne izboljšave glede podpore za HTTP.
Metapodatki za zahteve in prestreznike
Prvič, HttpClient
zdaj lahko uporabite za shranjevanje in pridobivanje metapodatkov po meri za zahteve. To je še posebej uporabno za prestreznike HTTP. To zmožnost je mogoče uporabiti prek novega HttpContext
.
Prej je bilo zapleteno zagotoviti kontekst prestreznikom, zdaj pa bo veliko bolj preprosto. Zdaj pa različne metode HTTP, ki jih ponuja HttpClient
vključite novo context: HttpContext
možnost, ki jo lahko uporabimo za podajanje v zemljevid.
Netanel Basal je o tem napisal članek, torej preverite, če želite izvedeti več.
appendAll na HttpParams
O HttpParams
razred ima zdaj nov appendAll
metoda, ki jo je mogoče uporabiti za enostavno dodajanje nabora parametrov hkrati:
appendAll(params: {[param: string]: string|string[]}): HttpParams
Parame je zdaj mogoče posredovati kot številke in logične vrednosti
Prej števil in logičnih vrednosti ni bilo mogoče neposredno uporabiti kot parametre HTTP. Morali smo jih pretvoriti v strune. Ne več!
HttpStatusCode
Angular je uvedel svoj seznam človeku berljivih imen za statusne kode HTTP v obliki const enum.
Prej smo morali predstaviti lastno rešitev, če smo želeli imeti človeku berljiva imena. Zahvaljujoč tej novi funkciji lahko zdaj namesto tega uporabljamo HttpStatusCode
.
Na primer:
if (response.status === HttpStatusCode.Ok) { ...
}
Za tiste, ki uporabljajo TypeScript na sprednji in zadnji strani, to ni zelo uporabno (saj imamo verjetno že vsi svojo abstrakcijo), a če vaš projekt uporablja TypeScript/Angular samo na sprednji strani, potem je lep napredek.
XhrFactory
O XhrFactory
razred je bil premaknjen v drug paket. Zdaj ga je izpostavil angular/common
Namesto angular/common/http
.
Upoštevajte, da je bila v nadgradnjo vključena selitev, tako da ne boste niti opazili, če zaženete ng update
Spremembe usmerjevalnika
Usmerjevalnik Angular se je v Angular 12 nekoliko spremenil.
Prvič, routerLinkActiveOptions
direktiva je bila izboljšana. Zdaj je mogoče določiti, ali potrebujemo natančno ujemanje ali ne za različne dele URL-ja, da lahko povezavi dodamo razred CSS.
Prej smo lahko zahtevali samo natančno ujemanje (ali ne) za celoten URL:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
Zdaj lahko namesto tega zagotovimo podrobna pravila ujemanja za poti, parametre poizvedbe, parametre matrike in fragmente.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
Podprte vrednosti so exact
, ignored
in subset
, ki se lahko uporablja za queryParams
in matrixParams
. Za poti lahko vstopite exact
or subset
in exact
or ignored
za fragment
.
Upoštevajte, da isActive
način usmerjevalnika sprejema tudi te nove možnosti.
fragment je ničen
Do zdaj, ActivatedRouteSnapshot.fragment
ni bilo ničelno. To se je spremenilo z Angular 12. Vendar ne skrbite preveč; ng update
vas je pokril.
Obrazci
Več nadzora nad emitiranimi dogodki
O emitEvent
možnost je bila dodana različnim metodam FormGroup
in FormArray
. Zahvaljujoč tej spremembi bo zdaj mogoče nadzorovati, ali je treba dogodke oddati ali ne v več primerih.
Na primer, prej, ko je bil kontrolnik odstranjen z uporabo removeControl
metoda FormGroup
, potem je bil dogodek vedno oddan. S to spremembo se bomo zdaj tovrstnim težavam lahko izognili.
O emitEvent
možnost je bila dodana naslednjim metodam FormGroup
:
addControl
removeControl
setControl
In na naslednje metode FormArray
:
push
insert
removeAt
setControl
clear
podpora za preverjanje min in max za obrazce, ki temeljijo na predlogah
O min
in max
validatorje Angular je zdaj mogoče uporabljati z obrazci, ki temeljijo na predlogah:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
Upoštevajte, da je to prelomna sprememba, saj bi bile prej prezrte.
i18n
Sistem i18n Angular se je s to izdajo spremenil.
Kot je poudarjeno v objavi v spletnem dnevniku z napovedjo, se trenutno uporabljajo številni podedovani formati id sporočil. Ti so občutljivi in težave se lahko pojavijo zaradi presledkov, predlog oblikovanja in izrazov ICU.
Angular 12 uvaja novo kanonično obliko ID-ja sporočila (tj. ena oblika, ki vlada vsem). Ta oblika je bolj prožna in bolj intuitivna.
Ta oblika bo zmanjšala nepotrebno razveljavitev prevoda in s tem povezane stroške ponovnega prevoda v aplikacijah, kjer se prevodi ne ujemajo na primer zaradi sprememb presledkov.
Od različice 11 naprej so novi projekti samodejno konfigurirani za uporabo novih ID-jev sporočil, zdaj pa je na voljo orodje za selitev obstoječih projektov z obstoječimi prevodi. Če vas skrbi, lahko uporabite localize-migrate
orodje za selitev vaših ID-jev sporočil:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
Več informacij je na voljo tukaj.
izboljšave učinkovitosti delovanja
S to izdajo so na voljo številne izboljšave zmogljivosti. Najbolj očiten pride skupaj z nadgradnjo na Webpack 5, vendar je še več:
Številne neuporabljene metode so bile odstranjene iz DomAdapter
. Kul je, ker njegovih metod ni mogoče spreminjati drevesa in so bile vključene v vse aplikacije Angular, kot je razloženo v ustrezen PR.
Angular zdaj ustvari manj kode za varen dostop do lastnine; na primer za izraze predloge, kot je a?.b
in na novo podprto ničelno združevanje: a ?? b
.
Prevajalnik Angular zdaj podpira inkrementalno prevajanje tudi v prisotnosti preusmerjenih izvornih datotek. Prej dela iz prejšnjega prevajanja ni bilo mogoče ponovno uporabiti, ko je TypeScript odstranil podvojene izvorne datoteke. Več o tem lahko preberete tukaj.
Prevajalnik Angular zdaj predpomni pot datotečnega sistema izvornih datotek. Prej je večkrat poklical fs.resolve()
, kar je zamudno.
O getDirectives
funkcija je bila izboljšana. Skupaj s to spremembo je ng
imenski prostor je bil prav tako razširjen in vključuje novo getDirectiveMetadata
uporabnost.
In obstaja nekaj več.
izboljšave API-ja
O ng
API za odpravljanje napak ki ga lahko uporabljamo iz orodij za razvijalce brskalnika, je bil izboljšan z Angular 12.
Obstaja nova funkcija, imenovana getDirectiveMetadata
, ki se lahko uporablja za pridobivanje informacij o komponentah in direktivah. Mislim, da ga ne bomo pogosto potrebovali, vendar bodo prihodnje izboljšave orodij za razvijalce najverjetneje temeljile na tem. Lahko izveste več tukaj.
Poklicana nova funkcija profilerja esetProfiler
je bil tudi implementiran in je na voljo tudi v produkcijskem načinu. To novo funkcijo je mogoče poklicati v številnih scenarijih. Uporablja se lahko na primer za sledenje trajanju ustvarjanja predloge, posodobitvam predloge, obdelavi kavljev življenjskega cikla itd. Tudi ta API bodo izkoristila prihajajoča orodja za razvijalce, kar nam bo dalo veliko več informacij o tem, kako delujejo naše aplikacije pri čas izvajanja.
To je trenutno še eksperimentalno, vendar mislim, da bomo o tem slišali več kasneje. Zanima me, če/kdaj bodo orodja, kot je Sentry, vključevala podporo za zbiranje tovrstnih informacij, da bi nam zagotovila uporabne nadzorne plošče za delovanje.
Nekaj dni po izdaji Angularja 12 je ekipa Angularja razglasitve razpoložljivost povsem novih orodij Angular Dev Tools za Google Chrome. Lahko jih prenesete tukaj.
Z uporabo te povsem nove razširitve brskalnika lahko preprosto pregledujete svoje aplikacije Angular med razvojem. Podpira:
- Vizualizacija strukture aplikacije (tj. pregled drevesa komponent)
- Raziskovanje in urejanje komponent
- Profiliranje predstav
Z uporabo vdelanega profilerja lahko posnamemo dogodke zaznavanja sprememb in jih predogledamo, ko se zgodijo. Za vsak cikel zaznavanja sprememb lahko pogledamo, koliko časa je trajalo, katere komponente so trajale najdlje, ali je ta cikel povzročil padce okvirja.
Angular je prej imel napol uradna orodja za razvijalce prek Avgurija (ki so osnova novih orodij!), vendar niso bila združljiva z Ivy. To je torej odlična novica za skupnost Angular!
In več…
Tukaj tono več manjše spremembe v tej izdaji. Tukaj je kratek pregled.
APP_INITIALIZER zdaj podpira Observables
Do sedaj ni bilo mogoče uporabljati Observables z APP_INITIALIZER
. Od Angularja 12 lahko zdaj to storimo, kar bo omogočilo čistejšo kodo!
Če še niste vedeli za to funkcijo Angularja, APP_INITIALIZER
is žeton ki jih lahko uporabimo za definiranje funkcij, ki se morajo izvajati med inicializacijo aplikacije. Če je ta funkcija asinhrona, vrne a Promise
ali Observable
(novo :p), potem Angular počaka, da se dokonča, preden zažene aplikacijo.
Ta sprememba je več kot dobrodošla, saj pomeni, da lahko napišemo še več kode z uporabo RxJS, namesto da bi se morali "vrniti" na Promise
API.
O tem si lahko preberete več tukaj.
Nadzor izvajalnega časa nad animacijami
Prej je bil edini način za onemogočanje animacij zagotavljanje NoopAnimationsModule
. Od Angular 12 je zdaj mogoče onemogočiti animacije na podlagi informacij o času izvajanja z uporabo BrowserAnimationModule.withConfig
metodo in njeno posredovanje disableAnimations
logična lastnost.
Nova metoda historyGo v lokacijski storitvi
O LocationService
Angular zdaj vključuje a historyGo
metodo, ki jo je mogoče uporabiti za navigacijo do določene strani v zgodovini seje, ki jo prepoznamo po relativnem položaju glede na trenutno stran. Ta metoda ustreza domači window.history.go
metoda. Oglejte si MDN za nekaj primerov.
Izboljšave jezikovnih storitev
S to izdajo je izboljšana tudi jezikovna storitev, ki IDE-jem zagotavlja vse uporabne vpoglede o kodi Angular.
Pri Angular 12 je jezikovna storitev privzeto omogočena (prej je zahtevala, da se priglasimo).
Od Angular 12 bo zaznal tudi, če strogo preverjanje vrste predloge ni omogočeno in vam bo svetoval, da jih omogočite.
Jezikovna storitev zdaj vključuje tudi zmogljivosti sledenja uspešnosti, ki jih je mogoče uporabiti za sledenje uspešnosti. To je mogoče omogočiti v VSCode, kot je razloženo tukaj (čeprav je to precej nizka raven).
Če še ne poznate jezikovne storitve, preverite uradni dokumenti, ali lepo objavo v spletnem dnevniku, ki jo je napisal Ninja Squadali to video uvod.
Onemogočite pravila lint neposredno iz predlog HTML
Prevajalnik predlog Angular zdaj sledi komentarjem HTML.
Prej ni bilo mogoče onemogočiti pravil linter iz predlog HTML, ker prevajalnik predloge Angular ni upošteval komentarjev. Rešitev je bila onemogočanje teh pravil za celotno predlogo iz krmilnika komponente. Zahvaljujoč tej spremembi bo zdaj to mogoče narediti natančneje iz predloge:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Bravo za čistejšo kodo!
DatePipe zdaj podpira samostojni dan v tednu ICU standard
Prej ni bilo mogoče za oblikovanje datuma v samostojni dan v tednu z uporabo DatePipe.
Zahvaljujoč tej spremembi je zdaj podprto finsko oblikovanje datuma in prepričan sem, da je to odlična novica za delček skupnosti Angular 😉
Podpora za forwardRef v podanih poljih Injectable dekoratorjev
Zdaj je možna uporaba forwardRef
znotraj providedIn
polje polja @Injectable
dekorater.
Nova kljuka transformResource na vmesniku ResourceHost
A transformResource
metoda je bila dodana v ResourceHost
vmesnik. Zahvaljujoč temu je zdaj mogoče, da orodja izvajajo stvari, kot je uvedba podpore za predprocesor za vgrajene sloge. To je tisto, kar omogoča novo podporo za SASS z vgrajenimi slogi.
O tem lahko izveste več tukaj in tukaj.
Možno je izdelati izvedbe usmerjevalnikov po meri
Do sedaj je bilo ustvarjanje prodajnih mest usmerjevalnika po meri možno, vendar je bilo treba nekaj preskočiti (tj. registracija prodajnih mest po meri z ChildrenOutletContexts
).
Angular 12 zagotavlja a čistejša podpora za vtičnice usmerjevalnikov po meri.
Popravljene napake
Kot običajno je v tej izdaji vključenih več milijonov popravkov napak.
Tukaj je kopija opomb ob izdaji:
- animacije: zagotoviti dosledno vrstni red prehodnih imenskih prostorov (#19854) (01cc995)
- animacije: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (e918250)
- animacije: čiščenje elementov DOM, ko je korenski pogled odstranjen (#41059) (c49b280)
- animacije: dovolite animacije na elementih v senčnem DOM (#40134) (očka42c8), se zapre #25672
- animacije: čiščenje elementov DOM, ko je korenski pogled odstranjen (#41001) (a31da48)
- bazel: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (8503246)
- bazel: posodobite orodje za gradnjo za najnovejše spremembe v rules_nodejs (#40710) (696f7bc)
- bazel: posodobite integracijski test za uporabo rules_nodejs@3.1.0 (#40710) (34of89a)
- bazel: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (2c90391)
- benchpress: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (e721a5d)
- običajni: dodajte desni ContentType za logične vrednosti s telesom zahteve HttpClient(#38924) (#41885) (922a602)
- običajni: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (f2b6fd8)
- običajni: drsnik vidnega polja ne najde elementov znotraj senčnega DOM (#41644) (c0f5ba3), se zapre #41470
- običajni: začasno ponovno izvoziti in opustiti
XhrFactory
(#41393) (7dfa446) - običajni: lokacija čiščenja spremeni poslušalce, ko je korenski pogled odstranjen (#40867) (38524c4), se zapre #31546
- običajni: dovoli število ali logično vrednost kot parametre http (#40663) (91cdc11), se zapre #23856
- običajni: izogibajte se spreminjanju kontekstnega predmeta v NgTemplateOutlet (#40360) (d3705b3), se zapre #24515
- prevajalnik: ohrani pravila @page v enkapsuliranih slogih (#41915) (3e365ba), se zapre #26269
- prevajalnik: izbirniki z obsegom stripa iz
@font-face
pravila (#41815) (2a11cda), se zapre #41751 - prevajalnik: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (bae8126)
- prevajalnik: neliteralne predloge v vrstici, nepravilno obdelane v delnem prevajanju (#41583) (ab257b3)
- prevajalnik: ne ustvarja navodil za posodobitev za predlogo ng znotraj nadomestnih imenskih prostorov (#41669) (2bcbbda), se zapre #41308
- prevajalnik: izogibajte se razčlenjevanju EmptyExpr z razponom nazaj (#41581) (e1a2930)
- prevajalnik: obravnava lastnosti CSS po meri, ki razlikujejo med velikimi in malimi črkami (#41380) (e112e32), se zapre #41364
- prevajalnik: vključi uporabljene komponente med prevajanjem JIT delne deklaracije komponent (#41353) (ff9470b), se zapre #41104 #41318
- prevajalnik: podpirajo več
:host-context()
izbirniki (#40494) (07B7AF3), se zapre #19199 - prevajalnik: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (f728490)
- prevajalnik-cli: uporabite ” za URL izvornega zemljevida posrednih predlog (#41973) (7a4d980), se zapre #40854
- prevajalnik-cli: izpostavite povezovalnik kot vtičnik Babel (#41918) (8fdac8f)
- prevajalnik-cli: dajejo prednost izvozom brez vzdevkov v referenčnih oddajnikih (#41866) (75bb931), se zapre #41443 #41277
- prevajalnik-cli: dovoli povezovalniku obdelavo zmanjšanih logičnih vrednosti (#41747) (1fb6724), se zapre #41655
- prevajalnik-cli: ujemanje z nizom indeksiranih delnih deklaracij (#41747) (f885750), se zapre #41655
- prevajalnik-cli: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (5b463f4)
- prevajalnik-cli: tipi literalov samodokončanja v predlogah. (#41456) (#41645) (8b2b5ef)
- prevajalnik-cli: ne delajte napak pri predpocesiranju, če komponenta nima vgrajenih slogov (#41602) (a5fe8b9)
- prevajalnik-cli: zagotoviti, da prevajalnik sledi
ts.Program
prav je (#41291) (deacc74) - prevajalnik-cli: preprečiti izločanje privzetih uvozov v postopnih ponovnih prevajanjih (#41557) (7f16515), se zapre #41377
- prevajalnik-cli: reševanje
rootDirs
do absolutnega (#41359) (3e0fda9), se zapre #36290 - prevajalnik-cli: dodajte
useInlining
možnost vnosa preveri konfiguracijo (#41043) (09aefd2), se zapre #40963 - prevajalnik-cli:
readConfiguration
obstoječe možnosti bi morale preglasiti možnosti v tsconfig (#40694) (b7c4d07) - prevajalnik-cli: razširiti
angularCompilerOptions
v tsconfig iz vozlišča (#40694) (5eb1954), se zapre #36715 - prevajalnik-cli: posodobi integracijske teste ngcc za najnovejše spremembe v rules_nodejs (#40710) (d7f5755)
- prevajalnik-cli: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (b75d7cb)
- jedro: ne obdrži dinamično prevedenih komponent in modulov (#42003) (1449c5c), se zapre #19997
- jedro: prikliči profiler okoli kavljev življenjskega cikla ngOnDestroy (#41969) (e9ddc57)
- jedro: AsyncPipe je zdaj združljiv z RxJS 7 (#41590) (9759bca)
- jedro: obravnava več atributov i18n z izraznimi vezmi (#41882) (73c6c64), se zapre #41869
- jedro: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (f9c1f08)
- jedro: zazna sintetizirane konstruktorje, ki so bili znižani z uporabo TS 4.2 (#41305) (274dc15), se zapre #41298
- jedro: Preklop
emitDistinctChangesOnlyDefaultValue
res (#41121) (7096246) - jedro: odstranite podvojeno konstanto EMPTY_OBJ (#41066) (bf158e7)
- jedro: odstranite podvojeno konstanto EMPTY_ARRAY (#40991) (e12d9de)
- jedro: omogoči posodobitev konteksta EmbeddedViewRef (#40360) (a3e1719), se zapre #24515
- jedro: naj DefaultIterableDiffer ohrani vrstni red dvojnikov (#23941) (a826926), se zapre #23815
- jedro: Možnosti združevanja NgZone bi se morale pravilno sprožiti na Stable (#40540) (22f9e45)
- elementi: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (4f5d094)
- elementi: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (efd4149)
- obrazci: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (dc975ba)
- http: izpolnite zahtevo po časovni omejitvi (#39807) (61a0b6d), se zapre #26453
- http: odda napako pri prekinitvenem dogodku XMLHttpRequest (#40767) (3897265), se zapre #22324
- jezikovna služba: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (9b6198c)
- jezikovna služba: uporabite različice skriptov za inkrementalne kompilacije (#41475) (78236 bf)
- jezikovna služba: Zagotovite samo dopolnitve lastnosti Angular v predlogah (#41278) (0226a11)
- jezikovna služba: Dodajte možnost vtičnika za vsiljevanje strictTemplates (#41062) (e9e7c33)
- jezikovna služba: uporabite eno samo vstopno točko za Ivy in View Engine (#40967) (e986a97)
- lokalizirati: sprosti napako na opozorilo za manjkajočo tarčo (#41944) (35ceed2), se zapre #21690
- lokalizirati: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (658ed1f)
- lokalizirati: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (4b469c9)
- ngcc: zazna sintetizirane konstruktorje, ki so bili znižani z uporabo TS 4.2 (#41305) (8d3da56), se zapre #41298
- platforma-brskalnik: preprečite uhajanje pomnilnika slogovnih vozlišč, če je uporabljena senčna inkapsulacija DOM (#42005) (d555555), se zapre #36655
- platforma-brskalnik: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (ea05cfd)
- platforma-brskalnik: nastavite
XhrFactory
uporabitiBrowserXhr
(#41313) (e0028e5), se zapre #41311 - platforma-brskalnik: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (7ecfd2d)
- platforma-brskalnik-dinamična: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (bc45029)
- platforma-strežnik: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (4b9d4fa)
- usmerjevalnik: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (0067dodat)
- usmerjevalnik: Pridobite shranjeno pot samo, ko strategija ponovne uporabe kaže, da bi se morala znova priključiti (#30263) (a4ff071), se zapre #23162
- usmerjevalnik: rekurzivno združi ujemanja prazne poti (#41584) (1179dc8), se zapre #41481
- usmerjevalnik: fragment je lahko nič (#37336) (b555160), se zapre #23894 #34197
- usmerjevalnik: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (350 podano)
- serviser: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (6b823d7)
- serviser: posodobitev ulitkov vrst za uporabo JSON.parse (#40710) (4f7ff96)
- nadgradnja: ohrani $interval.flush, ko se uporablja ngMocks (#30229) (87dc851)
- nadgradnja: posodobite podprt obseg različic vozlišča, da bo vključeval samo različice LTS (#41822) (10c4523)
Mimogrede, ste to opazili AsyncPipe
je bilo Popravljen avtorja Bena Lesha, da bo združljiv z RxJS 6 in 7? Kako kul je to?
Prelomne spremembe
Kot običajno je v tej izdaji na voljo več pomembnih sprememb.
As uradne opombe ob izdaji so precej jasni, samo kopiram/prilepim jih tukaj:
- Zmanjšani paketi UMD niso več vključeni v distribuirane pakete NPM.
- animacije: Elementi DOM so zdaj pravilno odstranjeni, ko je odstranjen korenski pogled. Če uporabljate SSR in za upodabljanje uporabljate HTML aplikacije, morate zagotoviti, da ste HTML shranili v spremenljivko, preden uničite aplikacijo. Možno je tudi, da se testi pomotoma zanašajo na staro vedenje, tako da poskušajo najti element, ki ni bil odstranjen v prejšnjem testu. Če je temu tako, je treba neuspešne teste posodobiti, da se zagotovi, da imajo ustrezno nastavitveno kodo, ki inicializira elemente, na katere se zanašajo
- Skupno: Metode
PlatformLocation
razreda, namrečonPopState
inonHashChange
, se je vračalvoid
. Zdaj te metode vračajo funkcije, ki jih je mogoče poklicati za odstranitev obdelovalcev dogodkov - skupno: Metode
HttpParams
razred zdaj sprejmestring | number | boolean
Namestostring
za vrednost parametra. Če ste ta razred razširili v svoji aplikaciji, boste morali posodobiti podpise svojih metod, da bodo odražale te spremembe - prevajalnik-cli: Povezane knjižnice ne ustvarjajo več podedovanih ID-jev sporočil i18n. Vsaka nadaljnja aplikacija, ki zagotavlja prevode za ta sporočila, bo morala preseliti svoje ID-je sporočil z uporabo
localize-migrate
Orodje ukazni vrstici - jedro: Angular ne vzdržuje več podpore za vozlišče v10, tako da, če ga še vedno uporabljate za svoje razvojno okolje, je res čas za nadgradnjo!
- jedro: Prej
ng.getDirectives
funkcija je vrgla napako, če dano vozlišče DOM ni imelo povezanega konteksta Angular (na primer, če je bila funkcija poklicana za element DOM zunaj aplikacije Angular). To vedenje ni bilo v skladu z drugimi pripomočki za odpravljanje napak podng
namespace, ki je obravnaval to situacijo brez sprožitve izjeme. Zdaj kličeng.getDirectives
funkcija za takšna vozlišča DOM bi povzročila prazno matriko, vrnjeno iz tega jedra funkcije: Preklapljanje privzete vrednostiemitDistinctChangesOnlyDefaultValue
ki spremeni privzeto vedenje in lahko povzroči, da nekatere aplikacije, ki se zanašajo na nepravilno vedenje, ne uspejo
emitDistinctChangesOnly
zastavica je prav tako opuščena in bo odstranjena v prihodnji večji izdaji
Prejšnja izvedba bi sprožila spremembe QueryList.changes.subscribe
kadarkoli QueryList
je bil ponovno izračunan. To je povzročilo umetno visoko število obvestil o spremembah, saj je možno ponovno računanje QueryList
rezultati na istem seznamu. Ko QueryList
gets recomputed je podrobnost izvedbe in ne bi smelo biti tisto, kar določa, kako pogosto naj se sproži dogodek spremembe.
Na žalost je neposredna odprava vedenja povzročila odpoved preveč obstoječih aplikacij. Zaradi tega Angular meni, da je ta popravek zlomljiv popravek in je uvedel zastavico @ContentChildren
in @ViewChildren
, ki nadzoruje vedenje.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
Za združljivost nazaj pred v12emitDistinctChangesOnlyDefaultValue
je bil nastavljen na false
. Ta sprememba
spremeni privzeto na true
.
- jedro: Vrsta
APP_INITIALIZER
žeton je bil spremenjen tako, da natančneje odraža vrste vrnjenih vrednosti, ki jih obravnava Angular. Prej je bil vsak povratni klic inicializatorja vnesen za vrnitevany
, to je zdajPromise<unknown> | Observable<unknown> | void
. V malo verjetnem primeru, da vaša aplikacija uporabljaInjector.get
orTestBed.inject
API za vbrizgavanjeAPP_INITIALIZER
žeton, boste morda morali posodobiti kodo, da bo upoštevala strožjo vrsto.
Poleg tega lahko TypeScript sporoči napako TS2742, če je APP_INITIALIZER
žeton se uporablja v izrazu, katerega ugotovljeni tip je treba oddati v datoteko .d.ts. Da bi se temu izognili, je potrebna eksplicitna opomba tipa, ki bi običajno bila Provider
or Provider[]
.
-
jedro: Minimalno podprto
zone.js
različica je0.11.4
. To torej pomeni, da je čas, da nadgradite zone.js v svojem projektu, če uporabljate starejšo različico! -
obrazci: O
emitEvent
možnost je bila dodana naslednjimFormArray
inFormGroup
metode: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
Če ima vaša aplikacija razrede po meri, ki se razširijo FormArray
or FormGroup
razrede in preglasi
zgoraj omenjenih metod, boste morda morali posodobiti svojo izvedbo, da boste lahko uporabili nove možnosti
računa in se prepričajte, da so preglasitve združljive z vidika vrst.
- obrazci: prej
min
inmax
atributi, določeni na<input type="number">
jih je modul Forms prezrl. Zdaj bi prisotnost teh atributov
sproži logiko preverjanja min/max (v primeruformControl
,formControlName
orngModel
direktive so prisotne tudi na danem vnosu) in
ustrezen nadzorni status obrazca bi to odražal. - platforma-brskalnik:
XhrFactory
je bil premaknjen iz@angular/common/http
do@angular/common
.
pred
import { XhrFactory } from '@angular/common/http';
po
import { XhrFactory } from '@angular/common';
- usmerjevalnik: Stroga ničelna preverjanja bodo poročala o fragmentu, ki bi lahko bil ničelni.
Pot selitve: dodajte ničelno preverjanje. - usmerjevalnik: Vrsta
RouterLinkActive.routerLinkActiveOptions
vnos je bil
razširjeno, da omogoča bolj natančno nastavljen nadzor. Koda, ki je bila prej prebrana
to lastnost bo morda treba posodobiti, da bo upoštevala novo vrsto.
Posodobljen zemljevid
Glede na trenutni Angular načrt, je ekipa zdaj zaposlena z naslednjimi izboljšavami:
- Izboljšanje izkušnje razvijalcev med odpravljanjem napak in profiliranjem. To bi nam moralo pomagati razumeti strukturo komponente (predstavljam si, kot da orodja React Dev omogočajo React) in zaznavanje sprememb
- Izboljšanje preskusnih časov in odpravljanje napak s samodejnim odstranjevanjem: To bi moralo izboljšati izolacijo med preskusi in preskusnimi časi. The TestBed bo prav tako spremenjeno tako, da samodejno očisti in uniči testno okolje po vsakem izvedenem testu
- Uporaba ES2017+ kot privzetega izhoda: Identificirali bodo ovire in jih odstranili, da bo mogoče nadgraditi privzeti izhodni jezik
- Integracija MDC Web v Angular Material
- Izboljšanje dostopnosti komponent Angular Material
- Objavljanje vodnikov o naprednih konceptih, kot so zaznavanje sprememb, profiliranje zmogljivosti, interakcije z Zone.js itd.
- Posodabljanje strategije testiranja e2e (cfr zgoraj)
- Priprava nadgradnje na RxJS v7+. Kot morda veste, je bil RxJS 7 izšel pred kratkim. Upajmo, da bomo kmalu lahko nadgradili
V prihodnosti ekipa Angular načrtuje:
- Poglejte v arhitekturo mikro vmesnikov: morda nam bodo predstavili sredstva za enostavno ustvarjanje mikro vmesnikov z uporabo Angularja
- Izboljšajte razvijalsko izkušnjo s strogim tipkanjem za oblike Angular (to tako nujno potrebujemo)
- Naj bo Zone.js neobvezen, kar bi moralo poenostaviti ogrodje, izboljšati odpravljanje napak, zmanjšati velikosti paketov in celo omogočiti izkoriščanje izvorne sintakse async/await
- Izboljšajte zmogljivost gradnje z integracijo prevajalnika Angular (
ngc
) kot vtičnik prevajalnika TypeScript - Dovoli dodajanje direktiv gostiteljskim elementom. To je že dolgo zahtevala tudi skupnost!
- Naredite NgModules izbirno, da olajšate krivuljo učenja
- Zagotovite nam lažja sredstva za implementacijo delitve kode na ravni komponent
Kotni material in kotni CDK
Sass migracija
Interno sta se Angular Material in CDK preselila na nov sistem modulov Sass.
Če vaša aplikacija uporablja katero koli od teh, se morate prepričati, da ste zamenjali node-sass
by sass
: https://www.npmjs.com/package/sass. The node-sass
paket ni več vzdrževan!
S to selitvijo je bil API za temiranje Sass izboljšan in nam zdaj omogoča, da izkoristimo Sass @use
uporabnost.
Zdaj obstaja ena sama vstopna točka za @angular/material
in @angular/cdk
.
Nazadnje so zaradi jasnosti spremenjeni tudi API-ji. Veliko funkcij, miksinov in spremenljivk je bilo preimenovanih na poti.
Več informacij o teh spremembah najdete v novem vodniku za temiranje: https://github.com/angular/components/blob/master/guides/theming.md. Poleg tega upoštevajte, da so bili vodniki na https://material.angular.io prepisani za predstavitev novega API-ja in vključujejo pojasnila.
Postopek nadgradnje bo kodo samodejno preselil v nov Sass API. Najdete lahko primere prej/potem tukaj.
Kotne spremembe CDK
Različica 12 vključuje številne spremembe v Angular CDK.
Tukaj bom navedel le nove funkcije, vendar si lahko ogledate opombe ob izdaji, če želite podrobnosti o popravkih napak in izboljšavah delovanja:
- Povleci spusti: Izpuščeni dogodek zdaj vključuje a
dropPoint
lastnost, ki določa natančno točko, kamor je kazala miška, ko je bil predmet spuščen. Več informacij tukaj - Povleci spusti: Vsebnik za predogled zdaj lahko prilagodite
- Tabela: Nova direktiva omogoča omogoči ponavljalnik pogleda recikliranja, ki predpomni odstranjene vrstice in jih ponovno uporabi, ko se nabor podatkov spremeni. To lahko pomaga izboljšati delovanje (zmanjša zakasnitev)
- Tabela: Dodano odmiki lepljivih elementov na
StickyUpdate
vmesnik - Stepper: Ko se uporabnik poskuša odmakniti od koraka, se an
interacted
dogodek bo zdaj izpuščena - Stepper: Orientacija je zdaj lahko spremenilo
- Dostopnost:
FocusOptions
predmet zdaj je mogoče opraviti v različne metode pasti fokusa - Testiranje: Novo okolje snopa WebDriver. Nisem se še poglobil v to, zato vam ne morem povedati več. Preveri PR
Kotne spremembe materiala
Obstaja tudi nekaj spremembe za Angular Material. Ponovno si oglejte opombe ob izdaji za celoten seznam popravkov napak.
Nove lastnosti:
- Izbira datuma: Nič več odvisno v pogovornem oknu
- Stepper: orientacijo je zdaj mogoče spreminjati dinamično (cfr podobno spremembo v CDK)
- Stepper: Dovoli vsebino, da je upodobljeno leno
- Meni: Dovoli posodobitev položaja menija programsko
- Mat napaka: Zdaj uporablja
aria-live="polite"
Namestorole="alert"
. Več podrobnosti tukaj - Zavihki: Dodaj metodo v programsko nastavite fokus na določen zavihek
- Seznam: Zdaj vrne matriko s spremenjenimi možnostmi iz
selectAll
indeselectAll
metode. Preveri PR za podrobnosti - Drsni preklop: Dovoli globalno konfigurirajte privzeto barvo preko ponudnika
- Tooltip: zdaj izpostavi efektivni položaj namiga orodja skozi razred na komponenti
- radio, Potrditveno polje in Drsnik: Vključite barvo ozadja teh komponent v natisnite slogovne liste
Obstajajo tudi številne spremembe v eksperimentalni različici: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
Kotni univerzalni
Angular Universal 12 je tudi sveže iz pečice.
S to izdajo, Universal zdaj privzeto vstavi kritični CSS, kar je zelo kul.
Universal zdaj vključuje novo proxyConfig
možnost za zagotavljanje konfiguracij strežnika proxy po meri ssr-dev-server
gradbenik.
V tej različici je na voljo nov (eksperimentalni) motor SSR, imenovan Clover (spominja me na kakovostno orodje v ekosistemu Java). Ta novi motor se zdi obetaven. Njegov cilj je poenostaviti stvari, se znebiti Window is undefined
napaka, odstranite potrebo po več zgradbah za SSR/predupodobitev, ustvarite aplikacijske lupine brez dodatne gradnje in več. Več o tem bomo verjetno slišali kasneje. Če ste radovedni, potem preverite PR.
Ta različica vključuje a builder ki jih je mogoče uporabiti za ustvarjanje statičnih strani (tj. vnaprejšnje upodabljanje) z uporabo novega pristopa Universal Clover.
Končno ta različica vključuje tudi TLS podpora za razvijalski strežnik.
Google Maps
Kot veste, Angular vključuje komponente za Google Maps in Youtube. Različica 12 prinaša nekaj izboljšav za komponento Google Maps:
- Zdaj vključuje an
icon
vnos za enostavno prilagajanje označevalca - Zdaj oddaja a
clusterClick
dogodek, ko grozd je bilo kliknjeno - Vključuje ovitek okrog API-ja Google Maps Geocoder in izvozi
MapDirectionsResponse
, ki prej ni bil izpostavljen - Uvaja podporo za upodabljanje toplotnih kart
- Dodano
MapDirectionsRenderer
, ki omogoča upodabljanje navodil na zemljevidu inMapDirectionsService
, ki zavijagoogle.maps.DirectionsService
Za izračun poti med dvema točkama. - Novo
options
vnos na označevalec grozdov, podobno kot druge direktive.
Nadgradnja
Kot običajno je na voljo celoten vodnik za nadgradnjo in ng update
vam bo pomagal: https://update.angular.io/?l=3&v=11.0-12.0
Če uporabljate Nrwl NX (res bi morali), upoštevajte, da Nx 12.3 že vključuje podporo za Angular 12! Več o tem tukaj. Kot dodatna prednost vam bo Nx pomagal tudi pri selitvi s TSLint na ESLint (in čas je!)
zaključek
V tem članku sem raziskal nove funkcije Angular 12.
Kot ponavadi je to izdaja herojsko (kaj drugega bi lahko bilo?! 😎).
Ivy gre naprej in upajmo, da nas bo "kmalu" manj motil ngcc
, ko se ekosistem seli. V tej izdaji je veliko izjemnih sprememb, zato si jo oglejte in nadgradite zdaj!.
To je to za danes!
PS: Če želite izvedeti ogromno drugih zanimivih stvari o razvoju izdelkov/programske opreme/spletu, si oglejte Dev Concepts serije, (https://mailchi.mp/fb661753d54a/developassion-newsletter)[naročite se na moje glasilo] in pozdravi se na Twitterju!
- Distribucija vsebine in PR s pomočjo SEO. Okrepite se še danes.
- Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. Dostopite tukaj.
- vir: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- Sposobna
- O meni
- o IT
- nad
- absolutna
- Sprejmi
- Sprejema
- dostop
- dostopnost
- Račun
- natančno
- dejansko
- dodano
- Poleg tega
- napredno
- Prednost
- po
- Cilje
- Opozorite
- algoritem
- algoritmi
- vsi
- Dovoli
- omogoča
- sam
- že
- alternativa
- alternative
- Čeprav
- vedno
- med
- in
- Kotna
- animacije
- razglasitve
- Objava
- Še ena
- kjerkoli
- API
- API-ji
- aplikacija
- zdi
- uporaba
- aplikacije
- pristop
- april
- Arhitektura
- okoli
- Array
- članek
- članki
- povezan
- lastnosti
- Avtorji
- Samodejno
- samodejno
- razpoložljivost
- Na voljo
- Babel
- nazaj
- Back-end
- ozadje
- bar
- temeljijo
- Osnova
- ker
- pred
- počutje
- koristi
- Boljše
- med
- Big
- največji
- Bit
- Blog
- blagovne znamke
- Brand New
- Breaking
- Prinaša
- prinesel
- brskalnik
- brskalniki
- Bug
- izgradnjo
- builder
- Building
- Gradi
- vgrajeno
- Sveženj
- obremenitev
- se imenuje
- kliče
- Zmogljivosti
- primeru
- primeri
- Vzrok
- povzročilo
- spremenite
- Spremembe
- preveriti
- Pregledi
- Krom
- jasnost
- razred
- razredi
- jasno
- jasno
- Zapre se
- Grozd
- Koda
- Zbiranje
- barva
- prihajajo
- komentarji
- skupnost
- združljivost
- združljiv
- dokončanje
- zapleten
- komponenta
- deli
- koncepti
- zaskrbljen
- Sklenitev
- povezane
- meni
- dosledno
- stalna
- porabijo
- Posoda
- vsebina
- ozadje
- naprej
- nadzor
- krmilnik
- Nadzor
- Cool
- Core
- ustreza
- strošek
- bi
- Tečaj
- pokrov
- zajeti
- ustvarjajo
- ustvaril
- Ustvarjanje
- Oblikovanje
- kritično
- navzkrižni brskalnik
- ključnega pomena
- CSS
- radovedna
- Trenutna
- Trenutno
- po meri
- lastnosti po meri
- prilagodite
- Datum
- dan
- Dnevi
- mrtva
- ponudba
- globlje
- privzeto
- odvisno
- uvajanja
- globina
- Podatki
- Podrobnosti
- Odkrivanje
- določa
- določanje
- dev
- Razvojni
- Razvoj
- DID
- drugačen
- DIG
- direktiv
- neposredno
- porazdeljena
- Distribucije
- tem
- DOM
- navzdol
- prenesi
- slaba stran
- padla
- Kapljice
- dvojnikov
- med
- vsak
- lažje
- enostavno
- ekosistem
- Učinkovito
- prizadevanje
- bodisi
- elementi
- vgrajeni
- omogočajo
- omogoča
- zaprto
- konec koncev
- energija
- Motor
- okrepljeno
- dovolj
- zagotovitev
- Vpis
- okolje
- okolja
- Napaka
- napake
- zlasti
- itd
- Eter (ETH)
- oceniti
- Tudi
- Event
- dogodki
- vsi
- vse
- razvil
- razvija
- Primer
- Primeri
- odlično
- izjema
- izvršiti
- izvedba
- obstoječih
- razširiti
- Pričakuje
- izkušnje
- Pojasnite
- razložiti
- pojasnjujejo
- Pojasni
- Razlaga
- Raziskano
- raziskovalec
- Izvoz
- izpostavljena
- izrazi
- razširiti
- razširitev
- zunanja
- dodatna
- olajšati
- FAIL
- pošteno
- Padec
- ventilator
- FAST
- hitreje
- strah
- Feature
- Lastnosti
- Federacija
- povratne informacije
- Nekaj
- Polje
- Področja
- file
- datoteke
- končno
- Najdi
- iskanje
- narava
- fiksna
- Pretok
- Osredotočite
- Osredotoča
- po
- moč
- obrazec
- format
- Obrazci
- Naprej
- je pokazala,
- Temelji
- ulomek
- FRAME
- Okvirni
- iz
- začelje
- polno
- funkcija
- funkcije
- nadalje
- Prihodnost
- ustvarjajo
- ustvarja
- ustvarjajo
- dobili
- GitHub
- Daj
- dana
- daje
- Giving
- Go
- dogaja
- dobro
- Google Chrome
- Google Maps
- graf
- veliko
- vodi
- Vodniki
- ročaj
- Trdi
- ob
- Slišal
- pomoč
- tukaj
- hi
- visoka
- Označite
- zgodovina
- kljuke
- upajmo, da
- gostitelj
- Kako
- HTML
- HTTPS
- velika
- človeško berljivo
- Bom
- Ideja
- identificirati
- identificirati
- vpliv
- izvajati
- Izvajanje
- izvajali
- uvoz
- Pomembno
- uvoz
- izboljšanje
- izboljšalo
- Izboljšanje
- Izboljšave
- in
- vključujejo
- vključeno
- vključuje
- nepravilno
- označuje
- posredno
- info
- Podatki
- na začetku
- inovativne
- vhod
- vpogledi
- namestitev
- Namestitev
- primer
- Namesto
- Navodila
- integrirati
- Povezovanje
- integracija
- interakcije
- Zanimivo
- vmesnik
- notranji
- Internet
- uvesti
- Uvedeno
- Predstavlja
- Predstavljamo
- intuitivno
- investirali
- izolacija
- Vprašanja
- IT
- Java
- JIT
- Job
- pridružite
- json
- Imejte
- Otrok
- Vedite
- jezik
- večja
- Zadnja
- Latenca
- Zadnji
- Liga
- uhajanje
- UČITE
- učenje
- Legacy
- Stopnja
- Vzvod
- knjižnice
- Knjižnica
- vrstica
- LINK
- povezane
- Seznam
- kraj aktivnosti
- Long
- dolgo časa
- dolgoročna
- več
- Poglej
- Pogledal
- si
- Sklop
- nizka
- je
- vzdrževati
- vzdržuje
- velika
- Večina
- Znamka
- IZDELA
- Izdelava
- več
- map
- Zemljevidi
- Stave
- ujemanje
- Material
- Matrix
- max
- pomeni
- Spomin
- Meni
- Spoji
- Sporočilo
- sporočil
- metapodatki
- Metoda
- Metode
- Microsoft
- morda
- selitev
- migracije
- minimalna
- mladoletnika
- manjka
- napaka
- način
- sodobna
- modul
- Moduli
- več
- Najbolj
- premikanje
- premikanje
- Mozilla
- več
- Imenovan
- in sicer
- Imena
- materni
- Krmarjenje
- potrebno
- Nimate
- potrebe
- negativna
- net
- Novo
- Nove funkcije
- novice
- Novice
- Naslednja
- Naprej.js
- Vozel
- Node.js
- vozlišča
- Opombe
- vredno omeniti
- Obvestila
- Številka
- številke
- predmet
- Očitna
- zgodilo
- oktober
- Uradni
- Uradno
- Staro
- ONE
- operater
- Možnost
- možnosti
- Da
- organizacije
- originalno
- Ostalo
- Prodajalne
- zunaj
- pregled
- lastne
- paket
- pakete
- parameter
- parametri
- zlasti
- deli
- opravil
- Podaje
- pot
- opravlja
- performance
- predstave
- izvajati
- perspektiva
- kos
- plinovod
- Kraj
- načrti
- platon
- Platonova podatkovna inteligenca
- PlatoData
- vključiti
- Točka
- Priljubljenost
- Stališče
- mogoče
- Prispevek
- potencialno
- močan
- Ravno
- raje
- Prisotnost
- predstaviti
- precej
- preprečiti
- predogled
- prejšnja
- prej
- Predhodna
- verjetno
- Težave
- Postopek
- obravnavati
- proizvodnja
- profiliranje
- Program
- Projekt
- projekti
- obetaven
- pravilno
- Lastnosti
- nepremičnine
- zagotavljajo
- če
- zagotavlja
- proxy
- objavljeno
- Push
- puzzle
- kakovost
- Hitri
- dvig
- območje
- Surovi
- RE
- Reagirajo
- Preberi
- uresničevanje
- Razlog
- Razlogi
- priporočilo
- zapis
- zmanjša
- odražajo
- registracijo
- povezane
- sprostitev
- sprosti
- daljinsko
- odstrani
- Odstranjeno
- upodabljanje
- PONOVNO
- nadomesti
- poročilo
- zahteva
- zahteva
- zahteva
- obvezna
- odporno
- Odgovor
- REST
- povzroči
- Rezultati
- vrnitev
- vrnitev
- vrne
- znebi
- zapore cest
- vloga
- koren
- Pot
- usmerjevalnik
- Pravilo
- pravila
- Run
- tek
- varna
- Enako
- drzen
- Shrani
- scenariji
- Obseg
- drugi
- Zdi se,
- Občutek
- Serija
- Storitev
- Zasedanje
- nastavite
- nastavitev
- nastavitev
- Shadow
- Kratke Hlače
- shouldnt
- predstavitev
- Podpisi
- Podoben
- Enostavno
- poenostavitev
- saj
- sam
- Razmere
- Velikosti
- velikosti
- Počasi
- majhna
- manj
- So
- doslej
- Rešitev
- rešitve
- nekaj
- Nekaj
- zvok
- vir
- Vesolje
- specifična
- stabilna
- stati
- standardna
- standardi
- Začetek
- Začetek
- Status
- bivanje
- Korak
- Še vedno
- stop
- trgovina
- shranjeni
- Zgodba
- Strategija
- strogo
- strožji
- Struktura
- slog
- naročiti
- taka
- Super
- podpora
- Podprti
- Podpira
- presenečenj
- Preklop
- sistem
- Tailwind
- Zadnji vetercss
- Bodite
- meni
- ob
- ciljna
- skupina
- Skupine
- Predloga
- predloge
- Test
- Testiranje
- testi
- O
- Vir
- njihove
- stvar
- stvari
- letos
- skozi
- čas
- zamudno
- časovnica
- krat
- do
- skupaj
- žeton
- Ton
- Tone
- tudi
- orodje
- orodja
- najvišji nivo
- proti
- sledenje
- Sledenje
- sledenje
- Sledenje
- Transform
- Prehod
- prevod
- pregleden
- sprožijo
- Res
- Vrste
- Tipkovnica
- tipično
- pod
- razumeli
- Universal
- neuporabljeno
- prihajajoče
- Nadgradnja
- posodobljeno
- posodobitve
- posodabljanje
- nadgradnja
- URL
- us
- Uporaba
- uporaba
- uporabnik
- Uporabniki
- javne gospodarske službe
- pripomoček
- potrjevanje
- potrjevalci
- dragocene
- vrednost
- Vrednote
- različnih
- Ve
- različica
- Poglej
- W3
- Počakaj
- hotel
- opozorilo
- web
- Spletni paket
- teden
- Weeks
- dobrodošli
- Kaj
- ali
- ki
- medtem
- WHO
- bo
- v
- brez
- Zmagali
- Čudovit
- delo
- delal
- deluje
- bi
- pisati
- pisanje
- pisni
- X
- leto
- Vaša rutina za
- youtube
- zefirnet