Ez a bejegyzés eredetileg ekkor jelent meg a Weboldalam: https://dsebastien.net
Ebben a cikkben (majdnem) minden említésre méltó dolgot áttekintek ebben a vadonatúj kiadásban. Azt is kiemelem, hogy mi változott az Angular körül, akárcsak a korábbi cikkeimmel 11. szög és a 10. szög.
Ha csak a madártávlatot keresi, akkor nézze meg a hivatalos kiadási bejelentés. Itt sokkal jobban beleásom magam a kiadási megjegyzésekbe.
Csatlakozz az Ivy League-hez…
Az Angular csapata dolgozott ezen Borostyán (az új összeállítási és megjelenítési folyamat) 2018 óta. Végül az Angular 8-cal adták ki. Az Angular 9 óta az Ivy az alapértelmezett az új projekteknél, és az ökoszisztéma lassan átáll rá. Angular 12-vel, a régi View Engine már hivatalosan is elavult. Egy jövőbeli nagyobb kiadásban eltávolítják. Ezenkívül nem lehet új alkalmazásokat létrehozni a View Engine használatával. Végül az Ivy az alapértelmezett az új könyvtári projekteknél.
Ezen a ponton a könyvtár szerzői továbbra is támaszkodhatnak a View Engine-re, köszönhetően ngcc
(az Angular kompatibilitási fordítója), de itt az ideje, hogy felmérjék, át tudják-e költöztetni a könyvtáraikat az Ivy-re vagy sem. Néhány hete Minko Gecsev publikált egy cikket hogy ezt részletesen kifejtse. Nézze meg a kapcsolódót is RFC.
Ha nem tudnád, ngcc
az a kis folyamat, amely az Angular projekt létrehozása vagy a függőségek telepítése után fut le. Amikor olyan üzeneteket lát, mint Compiling ... : es2015 as esm2015
, ez ngcc
teszi a dolgát. Mit ngcc
Ez az, hogy olyan könyvtárakat állít össze, amelyek a View Engine-re támaszkodnak, hogy az Ivy felhasználhassa azokat.
Hozzám hasonlóan ezt te is észrevetted ngcc
végrehajtása sok időt vesz igénybe, és nagyon negatív hatással van a fejlesztői tapasztalatokra. Éppen ezért kulcsfontosságú, hogy az Angular ökoszisztéma a lehető leghamarabb átvándoroljon az Ivy-re. Másodszor, amíg az ökoszisztéma többsége tovább nem lép, az Angular csapatának a View Engine-t kell tartania, ami több okból is problémás. Végül, de nem utolsósorban, azok a könyvtárak, amelyek a View Engine-re támaszkodnak, nem függhetnek az Ivy-től.
A könyvtári szerzők valószínűleg nem tudnak túl gyorsan áttérni az Ivy-re, de egyértelműen rá kell kényszeríteniük a vonakodó felhasználókat a frissítésre. Mindenesetre az előrevezető út az, hogy minden dolgot a lehető leghamarabb át kell költöztetni Ivy-hez
Van egy remek cikk Ivy-ről ott.
Viszlát Szögmérő
Áprilisban az Angular csapat bejelentette, hogy befejezi a támogatást Szögmérő az 2022 végén.
Az Angular 12-től kezdve a Protractor alapértelmezés szerint nem szerepel az új projektekben. Ehelyett az Angular CLI lehetőséget biztosít más megoldások, például Ciprus, WebdriverIOvagy TestCafe. Ez azt jelenti, hogy a ng e2e
parancsot a jövőben is támogatni kell.
Amint azt a a bejelentés2013-ban, amikor a Protractort létrehozták, webdriver nem volt egy szabvány, és end-to-end (e2e) teszteket nehéz volt megírni, és rémálom volt fenntartani. A Protractor a burkolással innovatív megoldást hozott szelén-webdriver, és lehetőséget biztosított a végrehajtási folyamat szabályozására.
Persze azóta sok minden változott. Most megvan a WebDriver
API, async
és a await
(még a legfelső szinten is await
, Azta). Emellett az ökoszisztéma is fejlődött. Megoldások, mint Ciprus, Drámaíró, Bábjátékos nagy (megérdemelt) népszerűségre tettek szert. Az olyan eszközök, mint például a Cypress, sokkal jobb fejlesztői élményt nyújtanak, mint a Protractor, kihasználják a modern szabványokat, és még a böngészők közötti tesztelést is támogatják (egyéb hatékony képességek mellett). A jelenlegi de facto e2e tesztelőeszközök másik előnye, hogy keretrendszer-agnosztikusak, ami nagyon értékes.
Röviden, a Protractor fenntartásának nincs sok értelme az Angular csapata számára. A Protractor fejlesztése most túl sok erőfeszítést igényelne, és rengeteg törést okozna. További részleteket az RFC-ben találsz, érdekes olvasmány.
Az idővonal fontos azoknak a csapatoknak/projekteknek, amelyek sok időt és energiát fektettek az e2e tesztek Protractorral történő megírásába. Az Angular csapata még mindig az RFC-n keresztül gyűjtött visszajelzések értékelésével van elfoglalva, így valószínűleg még ebben az évben többet tudunk meg.
Egyébként; próbáld ki a Cypress-t, ha még nem tetted meg, nem fogsz csalódni! Egyébként továbbra is mindenkinek ajánlom, hogy kezdje el használni Nrwl NX, egy csodálatos megoldás, amely támogatja az Angular, React, Next.js, Cypress és még sok mást
Nullas összeolvadás
Az Angular 12 támogatást tartalmaz a használatához nullish koaleszcáló operátor Szögletes sablonokban. És ez fantasztikus! Ezt az operátort a TypeScript támogatja a 3.7-es verzió óta.
Ha még nem hallott erről az operátorról, akkor hadd adjak egy gyors magyarázatot. Az ötlet az, hogy meg lehessen határozni egy tartalék értéket arra az esetre, ha valami történik null
or undefined
. Íme egy példa:
If foo
is null
or undefined
, Akkor x
értékre lesz állítva true
(azaz a tartalék érték), és bármire beállíthatjuk, amit csak akarunk.
Enélkül a fantasztikus ??
operátort, helyette ezt kellene írnunk:
let x = foo !== null && foo !== undefined ? foo : true;
Most, hogy az Angular is támogatja, végre írhatunk olyan kifejezéseket, mint például:
{{ age ?? calculateAge() }}
A régi és bőbeszédűbb alternatíva helyett. TISZTA!
Erről a változásról többet megtudhat itt.
A nullish összevonásról további információkat talál a TypeScript kézikönyv valamint tovább DND.
TypeScript 4.2 támogatás
Az Angular 12 támogatja a TypeScript 4.2, ami azt jelenti, hogy most már használhatjuk a tonna új csodálatos nyelvi jellemzőkről. A TypeScript 4.0 és 4.1 támogatása is megszűnt.
Íme egy gyors összefoglaló arról, hogy mit tartalmaz a TS 4.2:
Intelligens típusú álnév megőrzése: A kódszerkesztők a várt típusokat jelenítik meg a nyers típusok helyett, ahogy korábban történt. Erről többet megtudhat itt.
Leading/Middle Rest elemek Tuple típusokban: Mostantól bárhol felvehetünk pihenőelemeket egy soron belül (néhány kikötéssel). Ez nagyon klassz azoknak, akik időről időre támaszkodnak a sorokra. Tudjon meg többet erről itt.
A projekt szerkezetének megértése: A TS 4.2 tartalmazza új zászlót hívott --explainFiles
, amely arra utasítja a TypeScriptet, hogy információt adjon ki arról, hogy miért került be egy fájl a programba. Ez nagyon hasznos a hibaelhárításhoz.
Fejlesztések a nem hívott funkcióellenőrzéshez: A TypeScript mostantól több olyan esetet is képes észlelni, amikor a függvények nem kerülnek meghívásra. Például írás közben foo
helyett foo()
. További részletek és példák találhatók itt.
A strukturált változók mostantól kifejezetten nem használtként jelölhetők meg: let [_first, second] = getValues();
, ami fantasztikus; nincs több hiba mikor noUnusedLocals
engedélyezve!
Valójában sokkal több van, mint például a szigorúbb ellenőrzések in
operátort, és néhány törést okozó változtatást, amelyek hatással lehetnek Önre. Tehát feltétlenül nézze meg a Kiadási megjegyzések.
Webpack 5 támogatás
Angular 11 hozott minket kísérleti támogatás a Webpack 5-höz. Az Angular 12-vel a Webpack 5 támogatása készen áll a gyártásra. w00t!
Ha nem nézted meg Webpack 5, meg fogsz lepődni. A Webpack 5 még 2020 októberében jelent meg, tehát mára meglehetősen stabil. A Webpack jelenleg itt található 5.37 verzió (pár napja jelent meg).
Íme egy rövid magyarázat arról, hogy mi változott a Webpack 5-tel, és miért örülök ennek annyira 🤩
Először is, mint tudod, a Webpack az kulcs az Angular CLI puzzle darabja, és nagy szerepet játszik a köteg méretében, a felépítési teljesítményben stb.
Másodszor, a Webpack 5 egy okkal jelentős kiadás. Számos áttörő változást tartalmaz, ami megmagyarázza, hogy miért tartott egy ideig az Angular és az ökoszisztéma egy millió segédprogramjának/könyvtárának frissítése.
A kiadási megjegyzésekben a Webpack csapata jelezte, hogy a Webpack 5 a következőkre összpontosít:
- Az építési teljesítmény javítása a kitartó caching
- A hosszú távú gyorsítótárazás javítása jobb algoritmusokkal és alapértelmezésekkel
- A köteg méretének javítása jobb farázással és kódgenerálással
- A webes platformmal való kompatibilitás javítása
- Belső szerkezetek tisztítása
- Megtörő változásokat vezetünk be (haha), lehetővé téve számukra, hogy a lehető legtovább a v5-ön maradjanak
A Webpack 5 legmenőbb tulajdonsága az Modul Federation támogatása, amely biztosítja a szükséges alapokat, hogy megkönnyítse a mikro front-endek létrehozása. Kicsit kívül esik a cikk hatókörén, de egy pillanat alatt a modul-összevonás lehetővé teszi, hogy a különböző buildek egy hatalmas összekapcsolt modulgráfként viselkedjenek, és lehetővé teszi számunkra, hogy távoli buildekből származó modulokat importáljunk és használjunk. Nézze meg a hivatalos dokumentációt többet tudni.
A főbb változtatások közül a Webpack 5 mindent elvetett, ami korábban elavult volt (pl. NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), továbbá IgnorePlugin
és a BannerPlugin
.
Ezenkívül eltávolították a korábban automatikusan beinjektált Node.js polikitöltéseket; és ez az egyik legnagyobb változás a kiadásban. Ezek a többkitöltések kezdetben lehetővé tették a Webpack számára, hogy a Node.js számára készült modulokat használjuk a böngészőben. Ez klassz volt, de volt egy nagy hátránya: nagyobb kötegek. Ezen túlmenően ezek a többkitöltések egyre kevésbé voltak hasznosak, mivel voltak vagy böngészővel kompatibilis könyvtárak, vagy specifikus disztribúciók a böngésző támogatásával. A Webpack 5-től kezdve, mivel ezek a polifillek már nem lesznek automatikusan hozzáadva, meglepetésekbe ütközhetünk. Például olyan esetekben, amikor Node.js-hez készült modulokat használunk a böngészőben anélkül, hogy észrevennénk, hogy az korábban a Webpacknek köszönhetően működött. Erről többet megtudhat itt.
A Webpack 5 jobb támogatást vezetett be a hosszú távú gyorsítótárazáshoz. Éles módban alapértelmezés szerint új algoritmusokat tartalmaz:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
Ahogy az érték is mutatja, ezek az algoritmusok determinisztikus azonosítókat rendelnek a darabokhoz és modulokhoz, és determinisztikus neveket az exportokhoz.
A Webpack 5 képes beágyazott fa rázást végrehajtani az exportált anyagok beágyazott tulajdonságaihoz való hozzáférés nyomon követésével (üdvözöljük a Mátrixban), ami tovább javítja a fa rázását. Ráadásul most is lehet elemzi a függőségeket egy modul exportja és importja között. Vannak fejlesztések is CommonJS fa rázás. És van egy tonna további optimalizálás.
A Webpack 5 számos változtatást is tartalmaz a fejlesztői élmény javítása érdekében. Például van egy új nevű chunk id algoritmus amely alapértelmezés szerint engedélyezve van fejlesztési módban. Ez az új algoritmus ember által olvasható neveket ad a daraboknak. Az target
ingatlan is hatalmas javított.
Hogy őszinte legyek, nincs elég helyem, hogy minden újat lefedjek a Webpack 5-ben, ott„s éppen út is sok. Szóval itt abbahagyom
Ha a Webpack-et csak közvetetten, az Angular CLI-n keresztül használja, akkor ennek nagy részének „átláthatónak” kell lennie az Ön számára. De ha a egyedi Webpack összeállítás projektjében, akkor valószínűleg érdemes megnéznie a migrációs útmutató.
Végül, ha kíváncsi arra, hogy mi következik a Webpack segítségével, akkor nézze meg a ütemterv 2021-re és természetesen a legújabb kiadási megjegyzések.
Az IE11 támogatása elavult
Bármilyen szomorúan is hangzik (kit viccelek? 😂), az Angular 12 megszünteti az IE11 támogatását. Az Internet Explorer legtöbbünk számára halott, de sajnos sok szervezet még mindig éles környezetben használja. Az IE 11 támogatását így az Angular 13 megszünteti, ami azt jelenti, hogy ezeknek a szervezeteknek valóban el kell távolodniuk az IE-től (ami egyébként jó dolog). Nincs több kifogás!
Amint az IE támogatás megszűnik, az Angular kisebb, gyorsabb lesz, és így mindannyiunk számára jobb lesz. Továbbá, ha megszűnik a visszafelé kompatibilitás fenntartásának terhe a régi böngészőkkel (az IE11 az utolsó ezek közül!), az Angular képes lesz a modern API-k (pl. CSS-változók, Kereszteződés-figyelő, CSS Rács, Proxyk, Webes animációkés több).
Alig várom, hogy az IE támogatás megszűnjön!
Alapértelmezés szerint szigorú
IGEN IGEN IGEN 🤩. Az Angular 12-től kezdve a szigorú mód az Angular alapértelmezés szerint engedélyezve van a CLI-ben. És ez fantasztikus.
Mint tudod, nagy rajongója vagyok a TypeScript szigorú módjának, de az Angular szigorú módjának is. Ha többet szeretnél tudni, akkor nézd meg a cikk, amit tavaly írtam és Minko Gecsevét a változást ismertető cikk.
Gyári összeállítás alapértelmezés szerint
Eddig futott a ng build
parancs hozott létre egy fejlesztési buildet. Az Angular 12-től ng build
alapértelmezés szerint éles build lesz.
Remélhetőleg ez segít néhány csapatnak abban, hogy elkerüljék azt a hibát, hogy fejlesztői buildeket készítsenek és telepítsenek éles környezetben. Bár attól tartok, hogy a hibát elkövető csapatoknak más problémákkal kell megküzdeniük
Sass támogatás a beépített stílusokhoz
Az Angular nagyon régóta támogatja a Sass-t, de eddig csak külső stíluslapokban tudtuk használni a Sass-t. Az Angular 12-vel most már lehetséges a Sass a beépített komponensstílusokkal együtt használni (pl. styles
ingatlan).
Ezt az új beállításával engedélyezni kell inlineStyleLanguage
tulajdonhoz true
in angular.json
.
Hátszél támogatás
Hátszél immár hivatalosan is támogatja az Angular. Valójában a támogatást az Angular CLI-ben vezették be a 11.2-es verzióban.
Hátszél az elfoglalt a világ uralmával, főleg most, hogy van a rad JIT fordító, és csodálatos, hogy az Angularban beépített támogatás van hozzá.
Korábban a Tailwind hozzáadása szükséges volt egy Angular projekthez a Webpack összeállítás testreszabása. Többé nem! Mostantól a Tailwind hozzáadása olyan egyszerű, mint a csomag telepítése és létrehozása tailwind.config.js
fájl segítségével npx tailwindcss init
, és ügyeljen arra, hogy engedélyezze Tailwind JIT mód.
Http fejlesztések
Az Angular 12 számos fejlesztést vezet be a HTTP-támogatás körül.
Metaadatok kérésekhez és elfogókhoz
Először is, a HttpClient
mostantól használható egyéni metaadatok tárolására és lekérésére a kérésekhez. Ez különösen hasznos a HTTP-elfogók esetében. Ez a képesség az újon keresztül használható HttpContext
.
Korábban bonyolult volt kontextust biztosítani az elfogók számára, de most sokkal egyszerűbb lesz. Most a különböző HTTP-módszerek HttpClient
tartalmazzon egy újat context: HttpContext
opciót, amellyel térképen is átadhatunk.
Netanel Basal írt erről egy cikket, szóval nézd meg, ha többet szeretnél tudni.
appendAll on HttpParams
A HttpParams
osztálynak most van új appendAll
metódus, amellyel egyszerűen hozzáadhat egy sor paramétert:
appendAll(params: {[param: string]: string|string[]}): HttpParams
A paraméterek most átadhatók számként és logikai értékként
Korábban a számok és logikai értékek közvetlenül nem használhatók HTTP-paraméterként. Ezeket karakterláncokká kellett átalakítanunk. Többé nem!
HttpStatusCode
Az Angular bevezette saját, ember által olvasható nevének listáját a HTTP állapotkódokhoz, állandó enum formájában.
Korábban saját megoldást kellett bevezetnünk, ha ember által is olvasható neveket akartunk. Ennek az új funkciónak köszönhetően már használhatjuk HttpStatusCode
.
Például:
if (response.status === HttpStatusCode.Ok) { ...
}
Azok számára, akik a TypeScriptet a háttérben és a front-endben is használják, ez nem túl hasznos (mivel valószínűleg már mindannyiunknak megvan a saját absztrakciója), de ha a projekt csak a TypeScript/Angular-t használja az előtérben, akkor szép javulás.
XhrFactory
A XhrFactory
osztály másik csomagba került. Most ki van téve a angular/common
helyett angular/common/http
.
Vegye figyelembe, hogy a frissítés tartalmaz egy áttelepítést is, így észre sem veszi, ha futtatja ng update
Router változások
Az Angular router kicsit megváltozott az Angular 12-ben.
Először is, a routerLinkActiveOptions
az irányelvet javították. Mostantól megadható, hogy szükségünk van-e pontos egyezésre az URL különböző részeihez, hogy CSS-osztályt adhassunk egy hivatkozáshoz.
Korábban csak pontos egyezést kérhettünk (vagy nem) a teljes URL-hez:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
Most ehelyett finom szemcsés illesztési szabályokat biztosíthatunk az elérési utak, lekérdezési paraméterek, mátrix paraméterek és töredékek számára.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
A támogatott értékek exact
, ignored
és a subset
, amelyhez használható queryParams
és a matrixParams
. Az ösvényeknél be lehet menni exact
or subset
és exact
or ignored
az fragment
.
Ne feledje, hogy a isActive
a router metódusa is elfogadja ezeket az új lehetőségeket.
töredéke érvénytelen
Mostanáig, ActivatedRouteSnapshot.fragment
nem volt érvénytelen. Ez megváltozott az Angular 12-vel. Ne aggódj azonban túl sokat; ng update
elkaptad.
Űrlapok
Több ellenőrzés a kibocsátott események felett
A emitEvent
opciót adták hozzá a különböző módszerekhez FormGroup
és a FormArray
. Ennek a változásnak köszönhetően mostantól több esetben is ellenőrizhetővé válik, hogy kell-e eseményeket kiadni vagy sem.
Például korábban, amikor egy vezérlőt a removeControl
a metódusa FormGroup
, akkor mindig kiadtak egy eseményt. Ezzel a változtatással most elkerülhetjük az ilyen problémákat.
A emitEvent
opció hozzáadásra került a következő metódusokhoz FormGroup
:
addControl
removeControl
setControl
És a következő módszerekhez FormArray
:
push
insert
removeAt
setControl
clear
min és max validátorok támogatása a sablonvezérelt űrlapokhoz
A min
és a max
Az Angular validátorai mostantól sablonvezérelt űrlapokkal is használhatók:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
Vegye figyelembe, hogy ez egy átütő változás, mivel ezeket korábban figyelmen kívül hagytuk.
i18n
Az Angular i18n rendszere ezzel a kiadással megváltozott.
Amint a bejelentés blogbejegyzésében rámutattak, jelenleg számos örökölt üzenetazonosító-formátumot használnak. Ezek törékenyek, és problémák léphetnek fel a szóközök, a formázási sablonok és az ICU-kifejezések miatt.
Az Angular 12 új kanonikus üzenetazonosító formátumot vezet be (azaz egy formátumot, amely mindegyiket szabályozza). Ez a formátum rugalmasabb és intuitívabb.
Ez a formátum csökkenti a szükségtelen fordítás érvénytelenítését és a kapcsolódó újrafordítási költségeket azokban az alkalmazásokban, ahol a fordítások nem egyeznek, például a szóközök módosítása miatt.
A v11 óta az új projektek automatikusan konfigurálva vannak az új üzenetazonosítók használatára, és most már rendelkezésre állnak eszközök a meglévő projektek áttelepítésére a meglévő fordításokkal. Ha aggódik, használhatja a localize-migrate
eszköz az üzenetazonosítók migrálásához:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
További információkat talál itt.
Teljesítmény fejlesztések
Ez a kiadás számos teljesítményjavítást tartalmaz. A legkézenfekvőbb a Webpack 5-re való frissítéssel jár, de van még:
Számos használaton kívüli módszert eltávolítottak DomAdapter
. Ez klassz, mert a módszerei nem rázhatók meg a fán, és minden Angular alkalmazásban szerepeltek, amint azt a megfelelő PR.
Az Angular mostantól kevesebb kódot generál a biztonságos hozzáféréshez; például sablonkifejezésekhez, mint pl a?.b
és az újonnan támogatott null összevonás: a ?? b
.
Az Angular fordító mostantól támogatja a növekményes fordítást még átirányított forrásfájlok jelenlétében is. Korábban az előző fordításból származó munkát nem lehetett újra felhasználni, amikor a TypeScript deduplikálta a forrásfájlokat. Erről bővebben olvashat itt.
Az Angular fordító most gyorsítótárazza a forrásfájlok fájlrendszer-útvonalát. Korábban többször is hívott fs.resolve()
, ami időigényes.
A getDirectives
funkciója javult. Ezzel a változással együtt a ng
névteret is bővítettek egy újjal getDirectiveMetadata
hasznosság.
És ott van néhány.
ng API fejlesztések
A ng
hibakereső API amelyet a böngészőből használhatunk, az Angular 12-vel továbbfejlesztett fejlesztői eszközök.
Van egy új funkció, az úgynevezett getDirectiveMetadata
, amely az összetevőkről és direktívákról szóló információk lekérésére használható. Nem hiszem, hogy gyakran lesz rá szükségünk, de a jövőbeni fejlesztői eszközfejlesztések valószínűleg ezen fognak támaszkodni. Többet megtudhat ide.
Egy új profilkészítő függvény az úgynevezett esetProfiler
is megvalósult, és éles üzemmódban is elérhető. Ez az új függvény számos forgatókönyv szerint meghívható. Használható például a sablonok létrehozásának időtartamának, a sablonfrissítéseknek, az életciklus-horgok feldolgozásának stb. nyomon követésére. Ezt az API-t ismét kihasználják a közelgő fejlesztői eszközök, így sokkal több áttekinthető információt kapunk arról, hogyan teljesítenek alkalmazásaink futásidő.
Ez jelenleg még kísérleti jellegű, de azt hiszem, később hallunk még erről. Kíváncsian várom, hogy az olyan eszközök, mint a Sentry, integrálják-e/mikor az ilyen jellegű információk gyűjtésének támogatását, hogy hasznos teljesítmény-műszerfalakat biztosítsanak számunkra.
Néhány nappal az Angular 12 megjelenése után az Angular csapata megtette bejelentés a vadonatúj Angular Dev Tools elérhetősége a Google Chrome-hoz. Ezeket letöltheted itt.
A vadonatúj böngészőbővítmény használatával könnyedén ellenőrizheti Angular alkalmazásait fejlesztés közben. Támogatja:
- Az alkalmazás szerkezetének megjelenítése (azaz a komponens fa vizsgálata)
- Összetevők feltárása és szerkesztése
- Profilelőadások
A beágyazott profilozó segítségével rögzíthetjük a változásészlelési eseményeket, és megtekinthetjük azokat, amint előfordulnak. Minden változásészlelési ciklusnál megnézhetjük, hogy mennyi ideig tartott, mely összetevők vették igénybe a leghosszabb időt, hogy az adott ciklus okozott-e képkocka-kiesést.
Az Angular korábban félhivatalos fejlesztői eszközökkel rendelkezett Jövendölés projekt (amelyek az új eszközök alapját képezik!), de ezek nem voltak kompatibilisek az Ivy-vel. Szóval ez nagyszerű hír az Angular közösség számára!
És több…
Van még egy tonnával kisebb változtatások ebben a kiadásban. Íme egy gyors áttekintés.
Az APP_INITIALIZER mostantól támogatja a megfigyelhető elemeket
Eddig nem lehetett vele együtt használni az Observables-t APP_INITIALIZER
. Az Angular 12-től már megtehetjük, ami tisztább kódot tesz lehetővé!
Ha még nem ismerte az Angular funkcióját, APP_INITIALIZER
is egy jelzőt amelyek segítségével meghatározhatjuk az alkalmazás inicializálása során végrehajtandó függvényeket. Ha ez a függvény aszinkron, akkor az a Promise
vagy Observable
(új :p), akkor az Angular megvárja a befejezést, mielőtt elindítaná az alkalmazást.
Ez a változás több mint örvendetes, mivel azt jelenti, hogy még több kódot írhatunk RxJS használatával, ahelyett, hogy „vissza kellene esni” Promise
API.
Erről bővebben olvashat itt.
Futásidejű vezérlés az animációk felett
Korábban az animációk letiltásának egyetlen módja az volt, hogy a NoopAnimationsModule
. Az Angular 12-től kezdve már lehetőség van a futásidejű információkon alapuló animációk letiltására a használatával BrowserAnimationModule.withConfig
módszerrel, és átadva a disableAnimations
logikai tulajdonság.
Új historyGo módszer a helyszolgáltatásban
A LocationService
Az Angular most magában foglalja a historyGo
módszer, amellyel a munkamenet-előzmények egy adott oldala felé navigálhat, amelyet az aktuális oldalhoz viszonyított relatív pozíciója azonosít. Ez a módszer megfelel a natívnak window.history.go
módszer. Nézze meg az MDN-t néhány példáért.
A nyelvi szolgáltatás fejlesztése
A nyelvi szolgáltatás, amely az IDE-k számára minden hasznos információt nyújt az Angular kódról, szintén javult ezzel a kiadással.
Az Angular 12-vel a nyelvi szolgáltatás alapértelmezés szerint engedélyezve van (korábban ehhez be kellett jelentkeznünk).
Az Angular 12-től azt is érzékeli, ha szigorú sablontípus-ellenőrzés nincs engedélyezve, és azt tanácsolja, hogy engedélyezze ezeket.
A nyelvi szolgáltatás immár teljesítménykövetési lehetőségeket is tartalmaz, amelyek segítségével nyomon követhető a teljesítmény. Ez a VSCode-ban engedélyezhető, ahogy itt elmagyarázták (bár ez elég alacsony szint).
Ha még nem ismeri a nyelvi szolgáltatást, nézze meg a hivatalos dokumentumokat, vagy az általa írt szép blogbejegyzés Ninja osztag, vagy ez videó intro.
Tiltsa le a lint szabályokat közvetlenül a HTML-sablonokból
Az Angular sablon fordító mostantól nyomon követi a HTML megjegyzéseket.
Korábban nem lehetett letiltani a linter szabályokat a HTML-sablonokból, mert az Angular sablon fordító figyelmen kívül hagyta a megjegyzéseket. A megoldás az volt, hogy az összetevő vezérlőjéből le kell tiltani ezeket a szabályokat a teljes sablonra vonatkozóan. Ennek a változásnak köszönhetően mostantól pontosabban is megtehető a sablonból:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Szia a tisztább kódért!
A DatePipe mostantól támogatja az ICU szabványos Stand Alone funkciót a hét minden napján
Korábban azt nem volt lehetséges hogy a dátumot önállóan formázza a hét napján a DatePipe segítségével.
Ennek a változásnak köszönhetően a finn dátumformátum már támogatott, és biztos vagyok benne, hogy ez nagyszerű hír az Angular közösség egy része számára 😉
A forwardRef támogatása az injekciós dekorátorok biztosítottIn mezőiben
Most már használható forwardRef
belül providedIn
mező @Injectable
lakberendező.
Új transformResource hook a ResourceHost felületen
A transformResource
módszert adták hozzá a ResourceHost
felület. Ennek köszönhetően most már lehetőség nyílik olyan eszközökre is, mint például a soron belüli stílusok előfeldolgozói támogatásának bevezetése. Ez teszi lehetővé a SASS új támogatását beépített stílusokkal.
Erről többet megtudhat itt és a itt.
Lehetőség van egyéni útválasztó kimeneti megvalósítások létrehozására
Egészen mostanáig lehetséges volt egyéni router-aljzatok létrehozása, de néhány körön keresztül kellett ugrani (pl. egyéni aljzatok regisztrálása ChildrenOutletContexts
).
Az Angular 12 biztosítja a tisztább támogatás az egyéni útválasztó kimenetekhez.
Hibajavítások
Szokás szerint ez a kiadás gazillió hibajavítást tartalmaz.
Íme egy példány a kiadási megjegyzésekből:
- animációk: konzisztens átmenet névterek sorrendjének biztosítása (#19854) (01cc995)
- animációk: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (e918250)
- animációk: DOM elemek tisztítása a gyökérnézet eltávolításakor (#41059) (c49b280)
- animációk: animációk engedélyezése az árnyék DOM-ban (#40134) (apa42c8), bezárul #25672
- animációk: DOM elemek tisztítása a gyökérnézet eltávolításakor (#41001) (a31da48)
- bazel: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (8503246)
- bazel: frissítse az összeállítási eszközöket a rules_nodejs (#40710) (696f7bc)
- bazel: frissítse az integrációs tesztet szabályok_nodejs@3.1.0 (#40710) (34of89a)
- bazel: típusátküldések frissítése a JSON.parse használathoz (#40710) (2c90391)
- fekvenyomás: típusátküldések frissítése a JSON.parse használathoz (#40710) (e721a5d)
- gyakori: adjon hozzá megfelelő ContentType-ot a logikai értékekhez a HttpClient kérés törzsével(#38924) (#41885) (922a602)
- gyakori: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (f2b6fd8)
- gyakori: nézetablak görgető nem talál elemeket az árnyék DOM-on belül (#41644) (c0f5ba3), bezárul #41470
- gyakori: ideiglenesen újraexportálja és elavulttá tegye
XhrFactory
(#41393) (7dfa446) - gyakori: tisztítás helye figyelők megváltoztatása a gyökérnézet eltávolításakor (#40867) (38524c4), bezárul #31546
- gyakori: szám vagy logikai érték engedélyezése http paraméterként (#40663) (91cdc11), bezárul #23856
- gyakori: kerülje a kontextus objektum mutációját az NgTemplateOutletben (#40360) (d3705b3), bezárul #24515
- fordítóprogram: @page szabályok megőrzése beágyazott stílusokban (#41915) (3e365ba), bezárul #26269
- fordítóprogram: csík hatókörű szelektorok a
@font-face
szabályok (#41815) (2a11cda), bezárul #41751 - fordítóprogram: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (bae8126)
- fordítóprogram: nem szó szerinti soron belüli sablonok hibásan feldolgozva a részleges összeállítás során (#41583) (ab257b3)
- fordítóprogram: nem generál frissítési utasításokat az ng-template számára az alternatív névterekben (#41669) (2bcbbda), bezárul #41308
- fordítóprogram: kerülje az EmptyExpr elemzését visszafelé terjedő (#41581) (e1a2930)
- fordítóprogram: kezeli a kis- és nagybetűk közötti egyéni CSS-tulajdonságokat (#41380) (e112e32), bezárul #41364
- fordítóprogram: tartalmazza a használt komponenseket a részleges komponens deklaráció JIT-összeállítása során (#41353) (ff9470b), bezárul #41104 #41318
- fordítóprogram: több támogatást
:host-context()
választó (#40494) (07b7af3), bezárul #19199 - fordítóprogram: típusátküldések frissítése a JSON.parse használathoz (#40710) (f728490)
- compiler-cli: használja a ”-t a közvetett sablonok forrásleképezési URL-jeként (#41973) (7a4d980), bezárul #40854
- compiler-cli: tedd ki a linkert Babel beépülő modulként (#41918) (8fdac8f)
- compiler-cli: előnyben részesíti a nem álnevű exportot a referenciakibocsátókban (#41866) (75bb931), bezárul #41443 #41277
- compiler-cli: lehetővé teszi a linker számára a minimált logikai értékek feldolgozását (#41747) (1fb6724), bezárul #41655
- compiler-cli: match string indexelt részleges deklarációk (#41747) (f885750), bezárul #41655
- compiler-cli: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (5b463f4)
- compiler-cli: automatikusan kiegészíti a literális típusokat a sablonokban. (#41456) (#41645) (8b2b5ef)
- compiler-cli: ne hibázzon az előbeírással, ha a komponensnek nincs belső stílusa (#41602) (a5fe8b9)
- compiler-cli: biztosítsa a fordító pályáit
ts.Program
helyesen (#41291) (deacc74) - compiler-cli: megakadályozza az alapértelmezett importálások megszüntetését a növekményes újrafordításoknál (#41557) (7f16515), bezárul #41377
- compiler-cli: megoldása
rootDirs
abszolút (#41359) (3e0fda9), bezárul #36290 - compiler-cli: hozzá
useInlining
opció a check config (#41043) (09aefd2), bezárul #40963 - compiler-cli:
readConfiguration
a meglévő opcióknak felül kell írniuk a tsconfig (#40694) (b7c4d07) - compiler-cli: terjed
angularCompilerOptions
a tsconfig-ban a csomópontból (#40694) (5eb1954), bezárul #36715 - compiler-cli: frissítse az ngcc integrációs teszteket a rules_nodejs (#40710) (d7f5755)
- compiler-cli: típusátküldések frissítése a JSON.parse használathoz (#40710) (b75d7cb)
- mag: ne őrizze meg a dinamikusan lefordított komponenseket és modulokat (#42003) (1449c5c), bezárul #19997
- mag: profilozó meghívása az ngOnDestroy életciklus hook körül (#41969) (e9ddc57)
- mag: Az AsyncPipe immár kompatibilis az RxJS 7-tel (#41590) (9759 i.e)
- mag: több i18n attribútum kezelése kifejezés-kötésekkel (#41882) (73c6c64), bezárul #41869
- mag: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (f9c1f08)
- mag: észleli a szintetizált konstruktorokat, amelyek a TS 4.2 (#41305) (274dc15), bezárul #41298
- mag: kapcsoló
emitDistinctChangesOnlyDefaultValue
igaznak (#41121) (7096246) - mag: távolítsa el a duplikált EMPTY_OBJ állandó (#41066) (bf158e7)
- mag: távolítsa el a duplikált EMPTY_ARRAY állandó (#40991) (e12d9de)
- mag: az EmbeddedViewRef kontextus frissítésének engedélyezése (#40360) (a3e1719), bezárul #24515
- mag: hogy a DefaultIterableDiffer megtartsa az ismétlődések sorrendjét (#23941) (a826926), bezárul #23815
- mag: Az NgZone koaleascolási opcióknak megfelelően kell aktiválniuk az onStable-t (#40540) (22f9e45)
- elemek: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (4f5d094)
- elemek: típusátküldések frissítése a JSON.parse használathoz (#40710) (efd4149)
- formái: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (dc975ba)
- http: töltse ki a kérést időtúllépéskor (#39807) (61a0b6d), bezárul #26453
- http: hibát bocsát ki az XMLHttpRequest megszakítási eseménynél (#40767) (3897265), bezárul #22324
- nyelvi szolgáltatás: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (9b6198c)
- nyelvi szolgáltatás: szkript verziók használata növekményes fordításokhoz (#41475) (78236 bf)
- nyelvi szolgáltatás: Csak a szögtulajdonság-kiegészítéseket adja meg a sablonokban (#41278) (0226a11)
- nyelvi szolgáltatás: Adjon hozzá beépülő modult a strictTemplates (#41062) (e9e7c33)
- nyelvi szolgáltatás: használjon egyetlen belépési pontot az Ivy és a View Engine számára (#40967) (e986a97)
- lokalizálni: relax hiba figyelmeztetés hiányzó cél (#41944) (35 folytassa 2), bezárul #21690
- lokalizálni: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (658ed1f)
- lokalizálni: típusátküldések frissítése a JSON.parse használathoz (#40710) (4b469c9)
- ngcc: észleli a szintetizált konstruktorokat, amelyek a TS 4.2 (#41305) (8d3da56), bezárul #41298
- platform-böngésző: megakadályozza a stíluscsomópontok memóriaszivárgását, ha árnyék DOM tokozást használnak (#42005) (d555555), bezárul #36655
- platform-böngésző: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (ea05cfd)
- platform-böngésző: configure
XhrFactory
használataBrowserXhr
(#41313) (e0028e5), bezárul #41311 - platform-böngésző: típusátküldések frissítése a JSON.parse használathoz (#40710) (7ecfd2d)
- platform-böngésző-dinamikus: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (bc45029)
- platform-szerver: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (4b9d4fa)
- router: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (0067edd)
- router: Csak akkor kérje le a tárolt útvonalat, ha az újrahasználati stratégia azt jelzi, hogy újra kell csatlakoznia (#30263) (a4ff071), bezárul #23162
- router: üres útvonalegyezések rekurzív egyesítése (#41584) (1179dc8), bezárul #41481
- router: töredék lehet null (#37336) (b555160), bezárul #23894 #34197
- router: típusátküldések frissítése a JSON.parse használathoz (#40710) (350 adott)
- szervizmunkás: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (6b823d7)
- szervizmunkás: típusátküldések frissítése a JSON.parse használathoz (#40710) (4f7ff96)
- frissítés: $interval.flush megőrzése az ngMocks használatakor (#30229) (87dc851)
- frissítés: frissítse a támogatott csomópont-verziók tartományát, hogy csak az LTS verziókat tartalmazza (#41822) (10c4523)
Egyébként észrevetted AsyncPipe
már folt Ben Lesh, hogy kompatibilis legyen az RxJS 6-tal és 7-tel is? Milyen menő ez?
Megtörő változások
Szokás szerint számos törést okozó változás van ebben a kiadásban.
As a hivatalos kiadási megjegyzések elég egyértelműek, csak bemásolom/illesztem ide ezeket:
- Az elosztott NPM-csomagok már nem tartalmazzák a csökkentett UMD-csomagokat.
- animációk: A DOM-elemek most megfelelően eltávolításra kerülnek a gyökérnézet eltávolításával. Ha SSR-t használ, és az alkalmazás HTML-kódját használja a megjelenítéshez, akkor az alkalmazás megsemmisítése előtt gondoskodnia kell arról, hogy a HTML-kódot egy változóba mentse. Az is lehetséges, hogy a tesztek véletlenül a régi viselkedésre hagyatkoznak, mivel olyan elemet próbálnak találni, amelyet egy korábbi tesztben nem távolítottak el. Ha ez a helyzet, a sikertelen teszteket frissíteni kell annak biztosítására, hogy megfelelő beállítási kóddal rendelkezzenek, amely inicializálja azokat az elemeket, amelyekre támaszkodnak.
- közös: Módszerek a
PlatformLocation
osztály, mégpedigonPopState
és aonHashChange
, szokott visszatérnivoid
. Most ezek a metódusok olyan függvényeket adnak vissza, amelyek meghívhatók az eseménykezelők eltávolítására - gyakori: A módszerek a
HttpParams
osztály most fogadjastring | number | boolean
helyettstring
egy paraméter értékéhez. Ha kiterjesztette ezt az osztályt az alkalmazásban, frissítenie kell a metódusok aláírásait, hogy tükrözze ezeket a változásokat - fordító-cli: A linkelt könyvtárak már nem generálnak örökölt i18n üzenetazonosítókat. Minden olyan későbbi alkalmazásnak, amely fordítást biztosít ezekhez az üzenetekhez, át kell telepítenie üzenetazonosítóit a következővel:
localize-migrate
parancssori eszköz - mag: Az Angular már nem támogatja a node v10-et, így ha még mindig ezt használod a fejlesztői környezetedhez, akkor tényleg ideje frissíteni!
- mag: Korábban a
ng.getDirectives
A függvény hibát dobott, ha egy adott DOM-csomóponthoz nem volt hozzárendelve Angular kontextus (például ha egy függvényt egy Angular alkalmazáson kívüli DOM-elemhez hívtak meg). Ez a viselkedés összeegyeztethetetlen volt a alatti többi hibakereső segédprogrammalng
névtér, amely kivétel nélkül kezelte ezt a helyzetet. Most hívja ang.getDirectives
függvény az ilyen DOM-csomópontokhoz egy üres tömböt eredményezne, amelyet az adott függvénymag visszaad: Switching default ofemitDistinctChangesOnlyDefaultValue
ami megváltoztatja az alapértelmezett viselkedést, és egyes, a helytelen viselkedésre támaszkodó alkalmazások meghibásodását okozhatja
emitDistinctChangesOnly
A jelző szintén elavult, és egy későbbi nagyobb kiadásban eltávolítjuk
A korábbi megvalósítás változtatásokat eredményezne QueryList.changes.subscribe
amikor a QueryList
újraszámításra került. Ez mesterségesen sok változásértesítést eredményezett, mivel lehetséges, hogy az újraszámítás QueryList
eredmény ugyanabban a listában. Amikor az QueryList
get recomputed egy megvalósítási részlet, és nem ez határozza meg, hogy a változási esemény milyen gyakran induljon el.
Sajnos a viselkedés azonnali kijavítása túl sok meglévő alkalmazás meghibásodását okozta. Emiatt az Angular ezt a javítást törő javításnak tekinti, és bevezetett egy jelzőt @ContentChildren
és a @ViewChildren
, amely szabályozza a viselkedést.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
A v12 előtti visszamenőleges kompatibilitás érdekébenemitDistinctChangesOnlyDefaultValue
beállítva false
. Ez a változás
megváltoztatja az alapértelmezett értéket true
.
- mag: A típus a
APP_INITIALIZER
token módosult, hogy pontosabban tükrözze az Angular által kezelt visszatérési értékek típusait. Korábban minden inicializátor visszahívása be volt írva, hogy visszatérjenany
, ez most vanPromise<unknown> | Observable<unknown> | void
. Abban a valószínűtlen esetben, ha az alkalmazás aInjector.get
orTestBed.inject
API beadni aAPP_INITIALIZER
token, előfordulhat, hogy frissítenie kell a kódot, hogy figyelembe vegye a szigorúbb típust.
Ezenkívül a TypeScript jelentheti a TS2742 hibát, ha a APP_INITIALIZER
A tokent olyan kifejezésben használják, amelynek kikövetkeztetett típusát egy .d.ts fájlba kell kiadni. Ennek megkerüléséhez explicit típusú annotációra van szükség, ami általában az Provider
or Provider[]
.
-
mag: Minimum támogatott
zone.js
verzió0.11.4
. Ez azt jelenti, hogy ha régebbi verziót használ, akkor itt az ideje frissíteni a zone.js fájlt a projektben! -
formái: A
emitEvent
opcióval egészült ki a következőFormArray
és aFormGroup
mód: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
Ha az alkalmazás egyéni osztályokkal rendelkezik, amelyek kiterjednek FormArray
or FormGroup
osztályok és felülírják a
a fent említett módszereket, akkor előfordulhat, hogy frissítenie kell a megvalósítást az új lehetőségek használatához
fiókot, és győződjön meg arról, hogy a felülírások kompatibilisek a típusok szempontjából.
- formái: Korábban
min
és amax
oldalon meghatározott attribútumok<input type="number">
az Űrlapok modul figyelmen kívül hagyta. Most ezeknek az attribútumoknak a jelenléte lenne
trigger min/max érvényesítési logika (abban az esetbenformControl
,formControlName
orngModel
direktívák is jelen vannak egy adott bemeneten) és
a megfelelő űrlapvezérlési állapot azt tükrözné. - platform-böngésző:
XhrFactory
el lett helyezve@angular/common/http
nak nek@angular/common
.
Előtt
import { XhrFactory } from '@angular/common/http';
Után
import { XhrFactory } from '@angular/common';
- router: A szigorú null-ellenőrzések azt jelentik, hogy a töredék potenciálisan null.
Migrációs útvonal: null ellenőrzés hozzáadása. - router: A típus a
RouterLinkActive.routerLinkActiveOptions
bemenet volt
kibővült, hogy finomabb vezérlést tegyen lehetővé. Korábban olvasott kód
előfordulhat, hogy ezt a tulajdonságot frissíteni kell az új típushoz.
Frissített útiterv
A jelenlegi Angular szerint ütemterv, a csapat most a következő fejlesztésekkel van elfoglalva:
- A fejlesztői élmény javítása hibakeresés és profilalkotás közben. Ez segít nekünk megérteni az összetevők szerkezetét (úgy gondolom, hogy a React Dev Tools lehetővé teszi a React-ot), és a változás észlelését
- A tesztelési idők javítása és a hibakeresés automatikus lebontással: Ez javítja a tesztek és a tesztidők közötti elkülönítést. Az Tesztágy úgy is módosul, hogy minden egyes teszt végrehajtása után automatikusan megtisztítsa és lebontsa a tesztkörnyezetet
- Az ES2017+ használata alapértelmezett kimenetként: azonosítják az akadályokat, és eltávolítják azokat, így frissíthető az alapértelmezett kimeneti nyelv
- Az MDC Web integrálása a szögletes anyagba
- A Angular Material alkatrészek hozzáférhetőségének javítása
- Útmutatók közzététele olyan fejlett fogalmakkal kapcsolatban, mint a változásészlelés, a teljesítményprofilok, a Zone.js-szal való interakciók stb.
- Az e2e tesztelési stratégia frissítése (lásd fent)
- Az RxJS v7+ frissítésének előkészítése. Mint azt bizonyára tudod, az RxJS 7 volt nemrég megjelent. Remélhetőleg hamarosan frissíteni tudjuk
A jövőben az Angular csapata a következőket tervezi:
- Nézze meg a mikro-frontend architektúrát: olyan eszközöket vezethetnek be, amelyek segítségével egyszerűen létrehozhatunk mikro-frontendeket az Angular használatával
- Javítsa a fejlesztői tapasztalatot a szögletes űrlapok szigorú gépelésével (annyira nagy szükségünk van erre)
- Legyen opcionális a Zone.js, ami leegyszerűsíti a keretrendszert, javítja a hibakeresést, csökkenti a kötegek méretét, és még a natív aszinkron/várakozás szintaxis előnyeit is lehetővé teszi
- Javítsa az összeállítási teljesítményt az Angular fordító integrálásával (
ngc
) TypeScript fordító beépülő modulként - Irányelvek hozzáadásának engedélyezése a gazdagép elemekhez. Ezt a közösség is régóta kéri!
- Tegye opcionálisan az NgModules-t a tanulási görbe megkönnyítése érdekében
- Biztosítson számunkra egyszerűbb eszközöket a kódfelosztás komponensszintű megvalósításához
Szögletes anyag és szögletes CDK
Sass migráció
Belsőleg az Angular Material és a CDK is áttelepült a új Sass modulrendszer.
Ha az alkalmazás ezek valamelyikét használja, akkor meg kell győződnie arról, hogy lecserélte node-sass
by sass
: https://www.npmjs.com/package/sass. Az node-sass
a csomag már nincs karbantartva!
Ezzel az áttelepítéssel a Sass témakezelő API továbbfejlesztett, és most lehetővé teszi számunkra, hogy kihasználjuk a Sass @use
hasznosság.
Most egyetlen belépési pont van @angular/material
és a @angular/cdk
.
Végül az API-kat is módosították az érthetőség kedvéért. Sok függvényt, mixint és változót átneveztek az út során.
Ezekről a változásokról további információt az új témakezelési útmutatóban talál: https://github.com/angular/components/blob/master/guides/theming.md. Ezenkívül vegye figyelembe, hogy a https://material.angular.io webhelyen található útmutatókat átírták, hogy bemutassák az új API-t, és magyarázatokat is tartalmaznak.
A frissítési folyamat automatikusan áttelepíti a kódot az új Sass API-ra. Előtte/utána példákat találhat itt.
Szögletes CDK változások
A 12-es verzió számos elemet tartalmaz változások az Angular CDK-hoz.
Itt csak az új funkciókat sorolom fel, de megtekintheti a kiadási megjegyzéseket, ha részletekre kíváncsi a hibajavításokról és a teljesítménybeli fejlesztésekről:
- Drag-drop: A kiesett esemény most már tartalmazza a
dropPoint
tulajdonsággal, meghatározva azt a pontot, ahová az egérmutató mutatott, amikor az elemet leejtették. Több információ itt - Drag-drop: Az előnézeti tároló most testreszabható
- Táblázat: Egy új direktíva lehetővé teszi engedélyezze az újrahasznosítási nézet ismétlőt, amely gyorsítótárazza az eldobott sorokat, és újrafelhasználja azokat, amikor az adatkészlet megváltozik. Ez javíthatja a teljesítményt (csökkentheti a várakozási időt)
- Táblázat: Hozzáadott a ragadós elemek eltolásait a
StickyUpdate
felület - Stepper: Amikor a felhasználó megpróbál eltávolodni egy lépéstől, egy
interacted
esemény most lesz kibocsátott - Stepper: A tájolás most lehet megváltozott
- megközelíthetőség: Egy
FocusOptions
tárgy most átadható a különböző fókuszcsapda módszerekbe - Tesztelés: Új WebDriver kábelköteg környezet. Még nem merültem bele ebbe, így nem tudok többet mondani. Nézze meg a PR
Szög Anyagváltozások
Vannak még számos változások az Angular Material esetében. Ismét tekintse meg a kiadási megjegyzéseket a hibajavítások teljes listájáért.
Új funkciók:
- Dátumválasztó: Már nem múlik párbeszédpanelen
- Stepper: A tájolás mostantól dinamikusan megváltoztatható (lásd a CDK hasonló változását)
- Stepper: Engedélyezze, hogy a tartalom legyen lustán visszaadta
- Menü: A menüpozíció frissítésének engedélyezése programozottan
- Mat hiba: Most használ
aria-live="polite"
helyettrole="alert"
. További részletek itt - Lapok: Módszer hozzáadása ehhez programozottan állítsa be a fókuszt egy adott lapra
- Lista: Most egy tömböt ad vissza a módosított opciókkal a
selectAll
és adeselectAll
mód. Nézze meg a PR A részletekért - Csúsztató kapcsoló: Megenged globálisan állítson be egy alapértelmezett színt szolgáltatón keresztül
- Tooltip: Most megjeleníti az eszköztipp tényleges pozícióját egy osztályon keresztül az összetevőn
- rádió, jelölőnégyzetet és a Slider: Adja meg ezen összetevők háttérszínét a stíluslapok nyomtatása
A kísérleti verzióban is számos változás történt: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
Szögletes univerzális
Az Angular Universal 12 is frissen a sütőből.
Ezzel a kiadással a Universal most alapértelmezés szerint a kritikus CSS-t tartalmazza, ami nagyon klassz.
Az Universal most egy újat tartalmaz proxyConfig
lehetőség egyéni proxykonfigurációk biztosítására a ssr-dev-server
építész.
Ebben a verzióban van egy új (kísérleti) SSR motor, az úgynevezett Lóhere (egy minőségi eszközre emlékeztet a Java ökoszisztémában). Ez az új motor ígéretesnek tűnik. Célja, hogy leegyszerűsítse a dolgokat, megszabaduljunk a Window is undefined
hiba, távolítsa el a többszörös build szükségességét az SSR/előmegjelenítéshez, generáljon alkalmazáshéjakat extra build nélkül, és így tovább. Valószínűleg később hallunk még róla. Ha kíváncsi vagy, nézd meg a PR.
Ez a verzió tartalmazza a építész amelyek használhatók statikus oldalak generálására (azaz előzetes megjelenítésre) az új Universal Clover megközelítéssel.
Végül ez a verzió is tartalmazza TLS támogatás a dev-szerver számára.
Google Maps
Mint tudják, az Angular a Google Maps és a Youtube komponenseit tartalmazza. A 12-es verzió néhány fejlesztést tartalmaz a Google Térkép összetevőhöz:
- Most tartalmaz egy
icon
bemenet a marker egyszerű testreszabásához - Most bocsát ki a
clusterClick
esemény, amikor egy klaszter kattintásra került - Tartalmazza egy csomagolóanyag a Google Maps Geocoder API és az exportálás körül
MapDirectionsResponse
, ami korábban nem volt kitéve - Támogatást vezet be a hőtérképek megjelenítése
- Hozzáadott
MapDirectionsRenderer
, amely lehetővé teszi az útvonaltervek megjelenítését a térképen, ésMapDirectionsService
, amely becsomagoljagoogle.maps.DirectionsService
kiszámításához útvonalak két pont között. - Új
options
bemenet a marker klaszter, hasonlóan a többi irányelvhez.
Frissítés
Szokás szerint itt is elérhető egy teljes frissítési útmutató, és ng update
segít: https://update.angular.io/?l=3&v=11.0-12.0
Ha használsz Nrwl NX (tényleg kellene), vegye figyelembe, hogy az Nx 12.3 már támogatja az Angular 12-t! Tudjon meg többet erről itt. További előnyként az Nx segít áttérni a TSLintről az ESLintre (és itt az ideje!)
Következtetés
Ebben a cikkben az Angular 12 új funkcióit fedeztem fel.
Szokás szerint ez a kiadás hősies (mi más is lehetne?! 😎).
Ivy halad előre, és remélhetőleg „hamarosan” kevésbé leszünk idegesítve ngcc
, ahogy az ökoszisztéma vándorol. Ez a kiadás számos fantasztikus változást tartalmaz, ezért nézze meg, és frissítse most!
Mára ennyi!
Ui.: Ha rengeteg más remek dolgot szeretnél megtudni a termékekről/szoftverekről/webfejlesztésről, akkor nézd meg a Fejlesztői koncepciók sorozat, (https://mailchi.mp/fb661753d54a/developassion-newsletter)[feliratkozás a hírlevelemre], és gyere és köszönj a Twitteren!
- SEO által támogatott tartalom és PR terjesztés. Erősödjön még ma.
- Platoblockchain. Web3 metaverzum intelligencia. Felerősített tudás. Hozzáférés itt.
- Forrás: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- Képes
- Rólunk
- erről
- felett
- Abszolút
- Elfogad!
- elfogadja
- hozzáférés
- megközelíthetőség
- Fiók
- pontosan
- tulajdonképpen
- hozzáadott
- mellett
- fejlett
- Előny
- Után
- célok
- Éber
- algoritmus
- algoritmusok
- Minden termék
- lehetővé téve
- lehetővé teszi, hogy
- kizárólag
- már
- alternatív
- alternatívák
- Bár
- mindig
- között
- és a
- szögletes
- animációk
- bejelentés
- Közlemény
- Másik
- bárhol
- api
- API-k
- app
- megjelenik
- Alkalmazás
- alkalmazások
- megközelítés
- április
- építészet
- körül
- Sor
- cikkben
- cikkek
- társult
- attribútumok
- szerzők
- Automatikus
- automatikusan
- elérhetőség
- elérhető
- Babel
- vissza
- Back-end
- háttér
- bár
- alapján
- alap
- mert
- előtt
- hogy
- haszon
- Jobb
- között
- Nagy
- Legnagyobb
- Bit
- Blog
- márka
- Brand New
- Törés
- Bring
- hozott
- böngésző
- böngészők
- Bogár
- épít
- építész
- Épület
- épít
- beépített
- Csomag
- teher
- hívott
- hívás
- képességek
- eset
- esetek
- Okoz
- okozott
- változik
- Változások
- ellenőrizze
- Ellenőrzések
- króm
- világosság
- osztály
- osztályok
- világos
- világosan
- Bezárja
- Fürt
- kód
- Gyűjtő
- szín
- érkező
- Hozzászólások
- közösség
- kompatibilitás
- összeegyeztethető
- teljes
- bonyolult
- összetevő
- alkatrészek
- fogalmak
- az érintett
- következtetés
- összefüggő
- úgy véli,
- következetes
- állandó
- fogyaszt
- Konténer
- tartalom
- kontextus
- folytatódik
- ellenőrzés
- ellenőr
- ellenőrzések
- Hűvös
- Mag
- megfelel
- Költség
- tudott
- tanfolyam
- terjed
- fedett
- teremt
- készítette
- létrehozása
- teremtés
- kritikai
- keresztböngésző
- kritikus
- CSS
- kíváncsi
- Jelenlegi
- Jelenleg
- szokás
- egyedi tulajdonságok
- testre
- találka
- nap
- Nap
- halott
- üzlet
- mélyebb
- alapértelmezett
- függ
- bevezetéséhez
- mélység
- részlet
- részletek
- Érzékelés
- meghatározza
- meghatározó
- Dev
- Fejlesztő
- Fejlesztés
- DID
- különböző
- DIG
- irányelvek
- közvetlenül
- megosztott
- disztribúció
- Ennek
- DOM
- le-
- letöltés
- hátránya
- csökkent
- cseppek
- ismétlődések
- alatt
- minden
- könnyebb
- könnyen
- ökoszisztéma
- Hatékony
- erőfeszítés
- bármelyik
- elemek
- beágyazott
- lehetővé
- lehetővé teszi
- tokozott
- végtől végig
- energia
- Motor
- fokozott
- elég
- biztosítására
- belépés
- Környezet
- környezetek
- hiba
- hibák
- különösen
- stb.
- Eter (ETH)
- értékelni
- Még
- esemény
- események
- mindenki
- minden
- alakult ki
- fejlődik
- példa
- példák
- kiváló
- kivétel
- kivégez
- végrehajtás
- létező
- kiterjesztett
- várható
- tapasztalat
- Magyarázza
- magyarázható
- magyarázó
- Elmagyarázza
- magyarázat
- feltárt
- felfedező
- export
- kitett
- kifejezések
- terjed
- kiterjesztés
- külső
- külön-
- megkönnyítése
- FAIL
- meglehetősen
- Esik
- ventilátor
- GYORS
- gyorsabb
- félelem
- Funkció
- Jellemzők
- államszövetség
- Visszacsatolás
- kevés
- mező
- Fields
- filé
- Fájlok
- Végül
- Találjon
- megtalálása
- természet
- Rögzít
- áramlási
- Összpontosít
- koncentrál
- következő
- Kényszer
- forma
- formátum
- formák
- Előre
- talált
- Alapok
- töredék
- KERET
- Keretrendszer
- ból ből
- frontend
- Tele
- funkció
- funkciók
- további
- jövő
- generál
- generál
- generáló
- kap
- GitHub
- Ad
- adott
- ad
- Giving
- Go
- megy
- jó
- Google Chrome
- Google Maps
- grafikon
- nagy
- útmutató
- Útmutatók
- fogantyú
- Kemény
- tekintettel
- hallott
- segít
- itt
- hi
- Magas
- Kiemel
- történelem
- horgok
- remélhetőleg
- vendéglátó
- Hogyan
- HTML
- HTTPS
- hatalmas
- ember által olvasható
- BETEG
- ötlet
- azonosított
- azonosítani
- Hatás
- végre
- végrehajtás
- végre
- importál
- fontos
- behozatal
- javul
- javított
- javulás
- fejlesztések
- in
- tartalmaz
- beleértve
- magában foglalja a
- tévesen
- jelzi
- közvetve
- info
- információ
- alapvetően
- újító
- bemenet
- meglátások
- telepíteni
- telepítése
- példa
- helyette
- utasítás
- integrálni
- integrálása
- integráció
- kölcsönhatások
- érdekes
- Felület
- belső
- Internet
- bevezet
- Bevezetett
- Bemutatja
- bevezetéséről
- intuitív
- befektetett
- szigetelés
- kérdések
- IT
- Jáva
- JIT
- Munka
- csatlakozik
- json
- Tart
- Kedves
- Ismer
- nyelv
- nagyobb
- keresztnév
- Késleltetés
- legutolsó
- Liga
- szivárog
- TANUL
- tanulás
- Örökség
- szint
- Tőkeáttétel
- könyvtárak
- könyvtár
- vonal
- LINK
- összekapcsolt
- Lista
- elhelyezkedés
- Hosszú
- hosszú idő
- hosszú lejáratú
- hosszabb
- néz
- nézett
- keres
- Sok
- Elő/Utó
- készült
- fenntartása
- fenntartja
- fontos
- Többség
- csinál
- KÉSZÍT
- Gyártás
- sok
- térkép
- Térképek
- Mérkőzés
- egyező
- anyag
- Mátrix
- max
- eszközök
- Memory design
- Menü
- megy
- üzenet
- üzenetek
- Metaadatok
- módszer
- mód
- microsoft
- esetleg
- vándorol
- elvándorlás
- minimum
- kisebb
- hiányzó
- hiba
- Mód
- modern
- modul
- Modulok
- több
- a legtöbb
- mozog
- mozgó
- Mozilla
- többszörös
- Nevezett
- ugyanis
- nevek
- bennszülött
- Keresse
- elengedhetetlen
- Szükség
- igények
- negatív
- háló
- Új
- Új funkciók
- hír
- Hírlevél
- következő
- Next.js
- csomópont
- node.js
- csomópontok
- Megjegyzések
- figyelemre méltó
- értesítések
- szám
- számok
- tárgy
- Nyilvánvaló
- történt
- október
- hivatalos
- Hivatalosan
- Régi
- ONE
- operátor
- opció
- Opciók
- érdekében
- szervezetek
- eredetileg
- Más
- Outlets
- kívül
- áttekintés
- saját
- csomag
- csomagok
- paraméter
- paraméterek
- különösen
- alkatrészek
- Elmúlt
- Múló
- ösvény
- teljesít
- teljesítmény
- előadások
- előadó
- perspektíva
- darab
- csővezeték
- Hely
- tervek
- Plató
- Platón adatintelligencia
- PlatoData
- csatlakoztat
- pont
- népszerűség
- pozíció
- lehetséges
- állás
- potenciálisan
- erős
- pontosan
- jobban szeret
- jelenlét
- be
- szép
- megakadályozása
- Preview
- előző
- korábban
- Előzetes
- valószínűleg
- problémák
- folyamat
- feldolgozás
- Termelés
- profilalkotás
- Program
- program
- projektek
- biztató
- megfelelő
- ingatlanait
- ingatlan
- ad
- feltéve,
- biztosít
- meghatalmazott
- közzétett
- Nyomja
- kirakós játék
- világítás
- Quick
- emelés
- hatótávolság
- Nyers
- RE
- Reagál
- Olvass
- felismerve
- ok
- miatt
- ajánló
- rekord
- csökkenteni
- tükröznie
- regisztráció
- összefüggő
- engedje
- felszabaduló
- távoli
- eltávolítása
- eltávolított
- vakolás
- TÖBBSZÖR
- helyébe
- jelentést
- kérni
- kéri
- szükség
- kötelező
- rugalmas
- válasz
- REST
- eredményez
- Eredmények
- visszatérés
- visszatérő
- Visszatér
- megszabadít
- útlezárások
- Szerep
- gyökér
- Útvonal
- router
- Szabály
- szabályok
- futás
- futás
- biztonságos
- azonos
- Sass
- Megtakarítás
- forgatókönyvek
- hatálya
- Második
- Úgy tűnik,
- értelemben
- Series of
- szolgáltatás
- ülés
- készlet
- beállítás
- felépítés
- árnyék
- rövid
- kellene
- kirakat
- aláírások
- hasonló
- Egyszerű
- egyszerűsítése
- óta
- egyetlen
- helyzet
- Méret
- méretek
- Lassan
- kicsi
- kisebb
- So
- eddig
- megoldások
- Megoldások
- néhány
- valami
- hang
- forrás
- Hely
- különleges
- stabil
- állvány
- standard
- szabványok
- kezdet
- Kezdve
- Állapot
- tartózkodás
- Lépés
- Még mindig
- megáll
- tárolni
- memorizált
- Történet
- Stratégia
- szigorú
- szigorúbb
- struktúra
- stílus
- Iratkozz fel
- ilyen
- szuper
- támogatás
- Támogatott
- Támogatja
- meglepetés
- kapcsoló
- rendszer
- Hátszél
- hátszélcss
- Vesz
- tart
- bevétel
- cél
- csapat
- csapat
- sablon
- sablonok
- teszt
- Tesztelés
- tesztek
- A
- The Source
- azok
- dolog
- dolgok
- idén
- Keresztül
- idő
- időigényes
- időrendben
- alkalommal
- nak nek
- együtt
- jelképes
- tonna
- Tónus
- is
- szerszám
- szerszámok
- felső szint
- felé
- nyom
- nyomkövetés
- vágány
- Csomagkövetés
- Átalakítás
- átmenet
- Fordítás
- átlátszó
- kiváltó
- igaz
- típusok
- Gépelt
- jellemzően
- alatt
- megért
- Egyetemes
- felhasználatlan
- közelgő
- Frissítések
- frissítve
- Frissítés
- frissítése
- frissítés
- URL
- us
- Használat
- használ
- használó
- Felhasználók
- segédprogramok
- hasznosság
- érvényesítés
- érvényesítő
- Értékes
- érték
- Értékek
- különféle
- Ve
- változat
- Megnézem
- W3
- várjon
- kívánatos
- figyelmeztetés
- háló
- webpack
- hét
- Hetek
- fogadtatás
- Mit
- vajon
- ami
- míg
- WHO
- lesz
- belül
- nélkül
- Nyerte
- csodálatos
- Munka
- dolgozott
- dolgozó
- lenne
- ír
- írás
- írott
- X
- év
- A te
- youtube
- zephyrnet