Původní článek Angular blogu od Marka Thompsona
Jsme zpět s novou verzí Angular v13, o kterou se s vámi všemi podělíme! Tato nejnovější verze přináší nejrůznější aktualizace a funkce, které vašim týmům pomohou vytvářet skvělé aplikace.
Získejte Angular v13 nyní spuštěním ng update ve vašem projektu. Na adrese update.angular.io máme také k dispozici průvodce aktualizací, který týmům pomůže získat pokyny, jak aktualizovat své projekty.
S každou novou verzí je naším cílem najít způsoby, jak zlepšit Angular. V této verzi jsme toho dosáhli rozšířením funkcí a optimalizací založených na Ivy, partnerstvím s naší skvělou komunitou Angular a pokračováním v poskytování hladkého a stabilního procesu upgradu pro vaše týmy a projekty.
Začněme pohledem na to, jak posouváme Angular vpřed díky síle Ivy.
Posun úhlového vykreslování do budoucnosti
Ve vydání v12 z května 2021 jsme mluvili o „Ivy Everywhere“ a zmínili jsme se, že na podporu této iniciativy dojde v Angularu k několika přelomovým změnám. Usilovně jsme o to usilovali a jsme velmi potěšeni, že jsme ve verzi 13 provedli několik zásadních změn, protože Ivy stále otevírá dveře pro optimalizace a vylepšení.
Stav modulu zobrazení
Zobrazit modul již není k dispozici v Angular od verze 13. To je skvělá zpráva, protože Angular může pokračovat ve vytváření funkcí založených na Ivy, které posílí vaši produktivitu s platformou. Odstranění View Engine také znamená, že Angular může v budoucnu snížit svou závislost na ngcc (Angular Compatibility Compiler) a týmy mohou očekávat rychlejší sestavování, protože již nejsou zahrnuty metadata a soubory s přehledem.
Změny Angular Package Format (APF)
Formát Angular Package Format (APF) byl zjednodušen a modernizován, aby lépe sloužil vývojářům. Abychom optimalizovali APF ve verzi 13, odstranili jsme starší výstupní formáty, včetně metadat specifických pro View Engine.
Abychom jej zmodernizovali, standardizovali jsme jej na novější formáty JS, jako je ES2020. Knihovny vytvořené pomocí nejnovější verze APF již nebudou vyžadovat použití ngcc. V důsledku těchto změn mohou vývojáři knihoven očekávat menší výstup balíčků a rychlejší provádění.
Aktualizovali jsme také APF, aby podporoval exporty balíčků uzlů. To vývojářům pomůže, aby se nechtěně nespoléhali na interní rozhraní API, která se mohou změnit.
Aktualizace rozhraní API komponent
Ivy také umožňuje zlepšit kvalitu života ve způsobu, jakým mohou vývojáři dynamicky vytvářet komponenty. Rozhraní API bylo nyní zjednodušeno. Před změnami v Angular v13 vyžadovalo vytváření dynamických komponent spoustu standardního kódu.
Nové API odstraňuje nutnost vkládat ComponentFactoryResolver v konstruktoru. Ivy vytváří příležitost vytvořit instanci komponenty pomocí ViewContainerRef.createComponent aniž byste vytvořili přidruženou továrnu.
Zde je příklad sestavování komponent se staršími verzemi Angular:
S novým API se tento kód může stát:
Máme mnoho dalších vylepšení API, jako je toto, v práci, která budou povolena Ivy.
Konec podpory IE11
Nasloucháme vaší zpětné vazbě a pracujeme na tom, abychom připravili cestu k odstranění podpory IE11 v Angular v13.
Odstranění podpory IE11 umožňuje Angular využívat výhody moderních funkcí prohlížeče, jako jsou proměnné CSS a webové animace prostřednictvím nativních webových rozhraní API. Aplikace budou také menší a budou se načítat rychleji, protože můžeme odstranit polyfilly a cesty kódu specifické pro IE. Také eliminuje potřebu diferenciálního nabíjení. Vývojáři budou těžit z vylepšených rozhraní API a budování infrastruktury, zatímco uživatelé aplikací budou těžit z rychlejšího načítání a lepšího uživatelského zážitku.
Provedení ng update automaticky odstraní tyto polyfilly specifické pro IE a zmenší velikost balíčku během migrace projektu.
Děkujeme všem, kteří se zúčastnili žádosti o komentáře (RFC). Vývojáři, kteří stále potřebují podporovat uživatele IE11 pro stávající projekty, mohou nadále používat Angular v12 a bude podporován do listopadu 2022.
Vylepšení Angular CLI
Chcete-li aktualizovat nástroje Angular. Angular nyní podporuje používání trvalé mezipaměti sestavení ve výchozím nastavení pro nové projekty v13. Cenná zpětná vazba od [RFC] Persistent Build Cache ve výchozím nastavení vedla k této aktualizaci nástrojů, která přinesla až 68% zlepšení rychlosti sestavení a ergonomičtější možnosti. U stávajících projektů, které byly upgradovány na v13, aby tyto funkce umožnily, mohou vývojáři přidat toto nastavení do angular.json :
Další podrobnosti naleznete v dokumentaci.
ESBuild také vidí v této verzi určitá vylepšení výkonu! Představujeme esbuild , který nyní funguje s terser k optimalizaci globálních skriptů. Také esbuild podporuje zdrojové mapy CSS a dokáže optimalizovat globální CSS a také optimalizovat všechny šablony stylů.
Změny rámce a aktualizace závislostí
Angular v13 také přináší některé užitečné aktualizace a zásadní změny. Za prvé, RxJS 7.4 je nyní výchozí pro aplikace vytvořené pomocí ng new. Stávající aplikace používající RxJS v6.x bude nutné ručně aktualizovat pomocí příkazu npm install [email protected]. Další informace o změnách z verze 6 na verzi 7 naleznete v tomto souhrnu na rxjs.dev.
Pokud by to nestačilo, je tu nyní podpora pro TypeScript 4.4. Více informací naleznete na blogu o vydáních TypeScript.
Testování vylepšení v Angular
Udělali jsme několik zásadních vylepšení TestBed, která nyní po každém testu lépe ruší testovací moduly a prostředí. DOM je nyní vyčištěn po každém testu a vývojáři mohou očekávat rychlejší, méně náročné na paměť, méně vzájemně závislé a více optimalizované testy.
Tato funkce byla povolena od verze 12.1.0 a nyní bude výchozí a lze ji přizpůsobit. Zde je návod:lze jej nastavit pro celou testovací sadu pomocí metody TestBed.initTestEnvironment :
Nebo jej lze nastavit pro každý modul aktualizací metody TestBed.configureTestingModule :
To poskytuje flexibilitu při aplikaci těchto změn tam, kde mají pro každý projekt a jeho testy největší smysl. Pro více informací se podívejte na tento blog Larse Gyrupa Brink Nielsena.
Vše o komponentách
Dostupnost (a11y) musí být základem všeho, co budujeme uvnitř i vně komunity Angular. Bereme tuto odpovědnost vážně a naše práce vedla k významným vylepšením a změnám součástí Angular Material.
Všechny komponenty založené na MDC byly testovány, aby splňovaly vysoké standardy v oblastech, jako je kontrast, dotykové cíle, ARIA a další.
Chcete-li si udělat lepší představu o tom, jak tyto změny ovlivňují komponenty, podívejte se na úpravy, které jsme provedli u velikostí dotykových cílů pro komponenty, jako je zaškrtávací políčko a přepínač.
Velikosti vpravo jsou nové velikosti.
Došlo také k několika vylepšením režimů vysokého kontrastu pro více komponent.
Další informace o těchto změnách najdete v našem příspěvku na blogu o zlepšení dostupnosti komponent v Angular. Doufáme, že to každému pomůže vytvořit inkluzivnější aplikace Angular.
Další významné aktualizace
S vydáním Angular v11 v roce 2020 jsme zavedli podporu pro vkládání písem Google. Nyní rozšiřujeme podporu pro Adobe Fonts. Pamatujte, že vložená písma mohou zlepšit výkon vaší aplikace urychlením First Contentful Paint (FCP). Tato změna je nyní ve výchozím nastavení povolena pro všechny! Vše, co musíte udělat, je aktualizovat. Máme video o vkládání písem, které by mohlo být užitečné, podívejte se na něj zde:
YouTube:
V dokumentech angular.io jsme provedli několik zásadních změn, abychom vývojářům poskytli více informací o lokalizačním API. Lokalizační příručky byly aktualizovány tak, aby obsahovaly menší části pro jasnější cestu učení. Také jsme přidali další dokumentaci API pro $localize.
Příspěvky komunity
Komunita Angular nikdy nepřestává vyčnívat obrovským způsobem přidáním funkcí do rámce. Tým Angular je neuvěřitelně vděčný za tak živou a podporující komunitu. Věnujme chvíli zvýraznění některých příspěvků, které byly součástí této verze.
Dynamicky aktivovat/deaktivovat validátory
Tento PR, předložený Nirmalem Bhagwanim, umožňuje deaktivovat vestavěné validátory nastavením hodnoty na null . To se stává stále užitečnějším při vytváření dynamických formulářů.
Po zrušení navigace obnovit historii
Ahmed Ayed přispěl PR, který umožňuje příznak routeru canceledNavigationResolution obnovit vypočítanou hodnotu historie prohlížeče při nastavení na computed (vypočteno).
Zde jsou některé z aktualizací, které jsme zdůraznili, ale ještě více příspěvků přišlo od komunity:
- Rozhraní SwUpdate API je o něco ergonomičtější
- Nastavení jazykové služby umožňující automatické použití volitelného řetězení na tokenu s možnou hodnotou null
- Směrovač vysílá události povolení/zakázání, když se oulet připojí/odpojí
- A další!
Velké poděkování patří všem v komunitě, kteří přispěli do rámce. Společně s Angular postupujeme vpřed.
Závěrečné myšlenky
Angular pokračuje v pohybu vpřed s pomocí hvězdné komunity Angular. Děkujeme všem za vaše příspěvky do úložiště. Také děkuji za vaše cenné komentáře k RFC. Vaše podpora nám pomáhá utvářet budoucnost Angular tím, že se posouváme vpřed s nezávislými komponentami a v souladu s moderními webovými standardy.
Podrobnější přehled najdete v našem úplném changelogu. Získejte nejnovější verzi Angular a dejte nám vědět, co si myslíte; podrobného průvodce aktualizací najdete na adrese update.angular.io.
Až příště, přátelé, vytvářejte nějaké skvělé aplikace.
Děkuji Igoru Minařovi.
původní článek si můžete přečíst zde, Mnohokrát děkujeme komunitě Angular, vývojářskému týmu a všem, kdo čtou a sdílejí obsah