Dit bericht is oorspronkelijk gepubliceerd op mijn website: https://dsebastien.net
In dit artikel zal ik (bijna) alles bespreken wat opmerkelijk is in deze gloednieuwe release. Ik zal ook benadrukken wat er is veranderd rond Angular, net zoals ik deed met mijn vorige artikelen over Hoekig 11 en Hoekig 10.
Als je alleen op zoek bent naar het vogelperspectief, bekijk dan de officiรซle release-aankondiging. Hier zal ik veel dieper ingaan op de release-opmerkingen.
Sluit je aan bij de Ivy League...
Het Angular-team heeft gewerkt aan Klimop (de nieuwe pijplijn voor compilatie en weergave) sinds 2018. Het werd eindelijk uitgebracht met Angular 8. Sinds Angular 9 is Ivy de standaard voor nieuwe projecten en het ecosysteem migreert er langzaam naartoe. Met Hoek 12, de oude View Engine is nu officieel verouderd. Het zal worden verwijderd in een toekomstige grote release. Het is ook niet mogelijk om nieuwe applicaties te maken met View Engine. Ten slotte is Ivy nu de standaard voor nieuwe bibliotheekprojecten.
Op dit moment kunnen bibliotheekauteurs nog steeds vertrouwen op View Engine dankzij ngcc
(de compatibiliteitscompiler van Angular), maar het is echt tijd voor hen om te evalueren of ze hun bibliotheken naar Ivy kunnen migreren of niet. Een paar weken geleden publiceerde Minko Gechev een artikel om dat uitgebreid uit te leggen. Bekijk ook de gerelateerde RFC.
Voor het geval je het niet wist, ngcc
is het kleine proces dat wordt uitgevoerd nadat u een Angular-project hebt gemaakt of afhankelijkheden hebt geรฏnstalleerd. Wanneer je berichten ziet zoals Compiling ... : es2015 as esm2015
, het is ngcc
zijn werk doet. Wat ngcc
doet is het compileren van bibliotheken die afhankelijk zijn van View Engine, zodat Ivy die kan gebruiken.
Net als ik heb je dat waarschijnlijk gemerkt ngcc
kost veel tijd om uit te voeren en heeft een zeer negatieve invloed op de ervaring van de ontwikkelaar. Daarom is het van cruciaal belang dat het Angular-ecosysteem zo snel mogelijk naar Ivy migreert. Ten tweede, totdat een meerderheid van het ecosysteem is verhuisd, zal het Angular-team View Engine in de buurt moeten houden, wat om verschillende redenen problematisch is. Last but not least, bibliotheken die op View Engine vertrouwen, kunnen niet afhankelijk zijn van Ivy-bibliotheken.
Bibliotheekauteurs kunnen waarschijnlijk niet te snel naar Ivy migreren, maar ze zouden onwillige gebruikers duidelijk moeten aansporen om te upgraden. Hoe dan ook, de weg vooruit is om alle dingen zo snel mogelijk naar Ivy te migreren
Er is een uitstekend artikel over Ivy daar.
Dag gradenboog
In april heeft het Angular-team plannen aangekondigd om de ondersteuning van Gradenboog Aan het eind van 2022.
Vanaf Angular 12 wordt Protractor niet standaard opgenomen in nieuwe projecten. In plaats daarvan biedt de Angular CLI opties om andere oplossingen te gebruiken, zoals: Cipres, WebdriverIOof TestCafรฉ. Dit betekent dat de ng e2e
commando moet in de toekomst ondersteund blijven worden.
Zoals in de aankondiging, in 2013, toen Gradenboog werd gemaakt, webdriver niet een standaard, en end-to-end (e2e) tests waren moeilijk te schrijven en een nachtmerrie om te onderhouden. Gradenboog bracht een innovatieve oplossing door te wikkelen selenium-webdriver, en bood een manier om de uitvoeringsstroom te beheersen.
Natuurlijk zijn er sindsdien veel dingen geรซvolueerd. We hebben nu de WebDriver
API, async
en await
(zelfs op topniveau) await
, wauw). Ook het ecosysteem is geรซvolueerd. Oplossingen zoals Cipres, Toneelschrijver, poppenspeler hebben veel (welverdiende) populariteit gewonnen. Tools zoals Cypress bieden bijvoorbeeld een veel betere ontwikkelaarservaring dan Protractor, maken gebruik van de moderne standaarden en ondersteunen zelfs cross-browser testen (naast andere krachtige mogelijkheden). Een ander voordeel van de huidige de-facto e2e-testtools is dat ze framework-onafhankelijk zijn, wat erg waardevol is.
Om een โโlang verhaal kort te maken, het onderhouden van Protractor heeft niet veel zin voor het Angular-team. Het nu evolueren van gradenboog zou te veel inspanning vergen en een hoop baanbrekende veranderingen veroorzaken. Je kunt meer details vinden in de RFC, het is interessant om te lezen.
De tijdlijn is belangrijk voor teams/projecten die veel tijd en energie hebben gestoken in het schrijven van e2e-tests met Protractor. Het Angular-team is nog steeds bezig met het evalueren van de feedback die via de RFC is verzameld, dus we zullen waarschijnlijk later dit jaar meer weten.
Hoe dan ook; probeer Cypress eens als je dat nog niet hebt gedaan, je zult niet teleurgesteld zijn! Trouwens, ik blijf iedereen aanraden om te gaan gebruiken Nrwl NX, een geweldige oplossing met ondersteuning voor Angular, React, Next.js, Cypress en nog veel meer
Nullish samenvloeien
Angular 12 bevat ondersteuning voor het gebruik van de vernietig de coalescentiemedewerker in Hoekige sjablonen. En dit is geweldig! Die operator is ondersteund in TypeScript sinds versie 3.7.
Als je nog nooit van deze operator hebt gehoord, zal ik je een korte uitleg geven. Het idee is om een โโterugvalwaarde te kunnen definiรซren voor het geval er iets is null
or undefined
. Hier is een voorbeeld:
If foo
is null
or undefined
dan x
wordt ingesteld op true
(dwz de fallback-waarde), en we kunnen deze instellen op alles wat we willen.
Zonder dit geweldig ??
operator, zouden we dit in plaats daarvan moeten schrijven:
let x = foo !== null && foo !== undefined ? foo : true;
Nu Angular het ook ondersteunt, kunnen we eindelijk uitdrukkingen schrijven zoals:
{{ age ?? calculateAge() }}
In plaats van het oude en uitgebreidere alternatief. NETJES!
U kunt meer te weten komen over deze wijziging hier.
Meer informatie over nullish coalescing vindt u in de: TypeScript-handboek evenals op Niet storen.
TypeScript 4.2-ondersteuning
Angular 12 introduceert ondersteuning voor: Typescript 4.2, wat betekent dat we nu a . kunnen gebruiken ton van nieuwe prachtige taalfuncties. Ook is de ondersteuning voor TypeScript 4.0 en 4.1 geschrapt.
Hier is een kort overzicht van wat TS 4.2 inhoudt:
Smart Type Alias โโBehoud: De verwachte typen worden weergegeven door code-editors in plaats van onbewerkte typen zoals voorheen. Daar kun je meer over leren hier.
Leading/Middle Rest-elementen in Tuple-types: We kunnen nu overal in een tuple rustelementen opnemen (met een paar kanttekeningen). Dit is best cool voor degenen onder ons die van tijd tot tijd op tuples vertrouwen. Leer daar meer over hier.
Uw projectstructuur begrijpen project: TS 4.2 omvat een nieuwe vlag Dit betekent dat we onszelf en onze geliefden praktisch vergiftigen. --explainFiles
, die de TypeScript instrueert om informatie uit te voeren over waarom een โโbestand in uw programma is opgenomen. Dit is erg handig voor het oplossen van problemen.
Verbeteringen voor niet-aangeroepen functiecontroles: TypeScript kan nu meer gevallen detecteren waarin functies niet worden aangeroepen. Bijvoorbeeld bij het schrijven foo
in plaats van foo()
. Meer details en voorbeelden zijn te vinden hier.
Gedestructureerde variabelen kunnen nu expliciet worden gemarkeerd als ongebruikt: let [_first, second] = getValues();
, wat geweldig is; geen fouten meer wanneer noUnusedLocals
is ingeschakeld!
Er is eigenlijk veel meer, zoals strengere controles op de in
operator, en enkele belangrijke wijzigingen die van invloed kunnen zijn op u. Check dus zeker de release notes.
Webpack 5 ondersteuning
Angular 11 bracht ons experimentele ondersteuning voor Webpack 5. Met Angular 12 is de ondersteuning van Webpack 5 nu klaar voor productie. w00t!
Als je niet hebt gekeken Webpakket 5, je zult versteld staan. Webpack 5 werd in oktober 2020 uitgebracht, dus het is nu redelijk stabiel. Webpack is momenteel op versie 5.37 (een paar dagen geleden uitgebracht).
Hier is een korte uitleg over wat er is veranderd met Webpack 5, en waarom ik hier zo blij mee ben ๐คฉ
Ten eerste, zoals u weet, is Webpack de sleutel stuk van de Angular CLI-puzzel, en het speelt een grote rol voor bundelgrootte, bouwprestaties, enz.
Ten tweede is Webpack 5 niet voor niets een belangrijke release. Het bevat een aantal belangrijke wijzigingen, wat verklaart waarom het even duurde voordat Angular en een miljard hulpprogramma's/bibliotheken in het ecosysteem waren geรผpgraded.
In de release notes gaf het Webpack-team aan dat Webpack 5 zich richt op:
- De bouwprestaties verbeteren met aanhoudend caching
- Langetermijncaching verbeteren met betere algoritmen en standaardinstellingen
- Bundelgrootte verbeteren met betere Tree Shaking en codegeneratie
- Verbetering van de compatibiliteit met het webplatform
- Opruimen van interne structuren
- Introductie van baanbrekende wijzigingen (haha) nu, zodat ze zo lang mogelijk op v5 kunnen blijven
De coolste eigenschap van Webpack 5 is zijn ondersteuning voor Module Federatie, die de basis legt die nodig is om de creatie van micro-front-ends. Het valt een beetje buiten het bestek van dit artikel, maar in een handomdraai maakt modulefederatie het mogelijk voor verschillende builds om zich te gedragen als een enorme verbonden modulegrafiek, en stelt ons in staat om modules van externe builds te importeren en te gebruiken. Uitchecken de officiรซle documentatie om meer te weten te komen.
Een van de belangrijkste wijzigingen is dat Webpack 5 alles heeft laten vallen dat eerder was verouderd (bijv. NoEmitOnErrorsPlugin
, ModuleConcatenationPlugin
, NamedModulesPlugin
), net zoals IgnorePlugin
en BannerPlugin
.
Ook zijn de Node.js polyfills die eerder automatisch werden geรฏnjecteerd verwijderd; en dat is een van de grootste veranderingen in die release. Die polyfills stonden Webpack aanvankelijk toe om ons modules te laten gebruiken die voor Node.js in de browser waren gemaakt. Dat was gaaf, maar het had een groot nadeel: grotere bundels. Bovendien waren die polyfills steeds minder bruikbaar, omdat er browser-compatibele alternatieven van bibliotheken of specifieke distributies met browserondersteuning waren. Vanaf Webpack 5 kunnen we, aangezien die polyfills niet meer automatisch worden toegevoegd, voor verrassingen komen te staan. Bijvoorbeeld in gevallen waarin we modules gebruiken die gemaakt zijn voor Node.js in de browser zonder te beseffen dat het voorheen werkte dankzij Webpack. Daar kun je meer over leren hier.
Webpack 5 heeft betere ondersteuning geรฏntroduceerd voor caching op lange termijn. In productiemodus bevat het nu standaard nieuwe algoritmen:
chunkIds: "deterministic"
moduleIds: "deterministic"
mangleExports: "deterministic"
Zoals de waarde aangeeft, wijzen die algoritmen deterministische ID's toe aan chunks en modules, en deterministische namen aan exports.
Webpack 5 kan geneste boomschudden uitvoeren door toegang tot geneste eigenschappen van export te volgen (welkom bij de Matrix), wat het schudden van bomen verder zou moeten verbeteren. Het kan nu ook analyseer afhankelijkheden tussen de export en import van een module. Er zijn ook verbeteringen aan CommonJS-boomschudden. En er zijn een ton meer optimalisaties.
Webpack 5 bevat ook een aantal wijzigingen om de ontwikkelaarservaring te verbeteren. Er is bijvoorbeeld een nieuw genoemd chunk-ID-algoritme dat is standaard ingeschakeld in de ontwikkelingsmodus. Dat nieuwe algoritme geeft voor mensen leesbare namen aan chunks. De target
eigendom is ook enorm verbeterd.
Om eerlijk te zijn, ik heb hier niet genoeg ruimte om alles wat nieuw is met Webpack 5 te dekken, er's voor slechts weg ook veel. Dus ik stop hier
Als u Webpack alleen indirect gebruikt via de Angular CLI, dan zou het meeste hiervan "transparant" voor u moeten zijn. Maar als je een aangepaste webpack-build in uw project, dan moet u waarschijnlijk eens kijken naar de migratiegids.
Tot slot, als je nieuwsgierig bent naar wat er gaat komen met Webpack, bekijk dan de routekaart voor 2021 En natuurlijk de laatste release-opmerkingen.
IE11-ondersteuning is verouderd
Hoe triest het ook mag klinken (wie houd ik voor de gek? ), Angular 12 stopt de ondersteuning voor IE11. Internet Explorer is voor de meesten van ons dood, maar helaas gebruiken veel organisaties het nog steeds in productie. IE 11-ondersteuning zal dus worden verwijderd door Angular 13, wat betekent dat die organisaties echt moeten afstappen van IE (wat sowieso een goede zaak is). Geen excuses meer!
Zodra de IE-ondersteuning weg is, zal Angular kleiner, sneller en dus beter zijn voor ons allemaal. En zodra de last van het handhaven van achterwaartse compatibiliteit met oudere browsers is verdwenen (IE11 is de laatste daarvan!), kan Angular gebruikmaken van moderne API's (bijv. CSS-variabelen, Kruispuntwaarnemer, CSS-raster, volmachten, Webanimaties en meer).
Ik kan echt niet wachten tot IE-ondersteuning weg is!
Standaard strikt
JA JA JA . Vanaf Angular 12 is de strikte modus van Angular is standaard ingeschakeld in de CLI. En dit is geweldig.
Zoals je weet, ben ik een grote fan van de strikte modus van TypeScript, maar ook van de strikte modus van Angular. Wil je meer weten, kijk dan op het artikel dat ik vorig jaar schreef en Minko Gechev's artikel waarin de verandering wordt uitgelegd.
Standaard productie build
Tot nu toe draait de ng build
command heeft een ontwikkelingsbuild gemaakt. Vanaf Angular 12, ng build
zal nu standaard naar een productie-build gaan.
Hopelijk zal het sommige teams helpen voorkomen dat ze de fout maken om ontwikkelingsbuilds te bouwen en te implementeren in productieomgevingen. Hoewel, ik vrees dat teams die die fout maken nog andere problemen zullen hebben om mee om te gaan
Sass-ondersteuning voor inline-stijlen
Angular ondersteunt Sass al heel lang, maar tot nu toe konden we Sass alleen in externe stylesheets gebruiken. Met Angular 12 is het nu mogelijk om Sass te gebruiken samen met inline componentstijlen (dwz binnen de styles
eigendom).
Dit moet worden ingeschakeld door de nieuwe inlineStyleLanguage
eigendom aan true
in angular.json
.
Rugwind ondersteuning
Tailwind wordt nu officieel ondersteund door Angular. Eigenlijk is ondersteuning geรฏntroduceerd in de Angular CLI in v11.2.
Wind in de rug is druk bezig de wereld over te nemen, vooral nu het een heeft rad JIT-compiler, en het is geweldig om er ingebouwde ondersteuning voor te hebben in Angular.
Voorheen was het toevoegen van Tailwind aan een Angular-project vereist het aanpassen van de Webpack-build. Niet meer! Nu is het toevoegen van Tailwind net zo eenvoudig als het installeren van het pakket, waardoor de tailwind.config.js
bestand met behulp van npx tailwindcss init
, en zorg ervoor dat u Tailwind's JIT-modus.
Http-verbeteringen
Angular 12 introduceert een aantal verbeteringen rond de HTTP-ondersteuning.
Metadata voor verzoeken en onderscheppers
Ten eerste, de HttpClient
kan nu worden gebruikt om aangepaste metadata voor verzoeken op te slaan en op te halen. Dit is met name handig voor HTTP-onderscheppers. Deze mogelijkheid kan worden gebruikt via de nieuwe HttpContext
.
Voorheen was het ingewikkeld om context te bieden aan interceptors, maar nu zal het veel eenvoudiger zijn. Nu, de verschillende HTTP-methoden die worden geleverd door HttpClient
een nieuwe bevatten context: HttpContext
optie, die we kunnen gebruiken om in een kaart door te geven.
Netanel basaal heeft hier een artikel over geschreven, dus check it out als je meer wilt weten.
appendAll op HttpParams
De HttpParams
klas heeft nu een nieuwe appendAll
methode, die kan worden gebruikt om eenvoudig een set parameters in รฉรฉn keer toe te voegen:
appendAll(params: {[param: string]: string|string[]}): HttpParams
Params kunnen nu worden doorgegeven als getallen en booleans
Voorheen konden getallen en booleans niet direct als HTTP-parameters worden gebruikt. Die moesten we omzetten in snaren. Niet meer!
HttpStatusCode
Angular heeft een eigen lijst met door mensen leesbare namen voor HTTP-statuscodes geรฏntroduceerd, in de vorm van een const enum.
Voorheen moesten we onze eigen oplossing introduceren als we voor mensen leesbare namen wilden hebben. Dankzij deze nieuwe functie kunnen we nu in plaats daarvan HttpStatusCode
.
Bijvoorbeeld:
if (response.status === HttpStatusCode.Ok) { ...
}
Voor degenen die TypeScript op zowel back-end als front-end gebruiken, is dit niet super handig (omdat we waarschijnlijk allemaal al onze eigen abstractie hebben), maar als uw project alleen TypeScript/Angular aan de front-end gebruikt, dan is het een mooie verbetering.
XhrFactory
De XhrFactory
class is verplaatst naar een ander pakket. Het wordt nu onthuld door angular/common
in plaats van angular/common/http
.
Merk op dat er een migratie is opgenomen in de upgrade, dus je merkt het niet eens als je het uitvoert ng update
Routerwijzigingen
De Angular-router is een beetje veranderd in Angular 12.
Ten eerste, de routerLinkActiveOptions
richtlijn is verbeterd. Nu is het mogelijk om aan te geven of we een exacte overeenkomst nodig hebben of niet voor verschillende delen van de URL om een โโCSS-klasse aan een link toe te voegen.
Voorheen konden we alleen een exacte overeenkomst (of niet) eisen voor de hele URL:
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ exact: true }"
> foo
</a>
Nu kunnen we in plaats daarvan fijnmazige overeenkomstenregels bieden voor paden, queryparameters, matrixparameters en fragmenten.
<a routerLink="/products/foo" routerLinkActive="highlight-product" [routerLinkActiveOptions]="{ paths: 'exact', queryParams: 'subset', matrixParams: 'ignored', fragment: 'ignored' }"
> foo
</a>
De ondersteunde waarden zijn: exact
, ignored
en subset
, die kan worden gebruikt voor queryParams
en matrixParams
. Voor paden kunt u naar binnen gaan exact
or subset
en exact
or ignored
voor de fragment
.
Merk op dat de isActive
methode van de router accepteert ook deze nieuwe opties.
fragment is nulleerbaar
Tot nu toe, ActivatedRouteSnapshot.fragment
was niet nulbaar. Dit is veranderd met Angular 12. Maak je echter niet al te veel zorgen; ng update
heeft je gedekt.
Formulieren
Meer controle over uitgezonden gebeurtenissen
De emitEvent
optie is toegevoegd aan verschillende methoden van FormGroup
en FormArray
. Dankzij deze wijziging is het nu mogelijk om in meer gevallen te bepalen of gebeurtenissen wel of niet moeten worden uitgezonden.
Bijvoorbeeld, toen een besturingselement eerder werd verwijderd met behulp van de removeControl
methode van FormGroup
, dan werd er altijd een gebeurtenis uitgezonden. Met deze wijziging kunnen we dergelijke problemen nu voorkomen.
De emitEvent
optie is toegevoegd aan de volgende methoden van: FormGroup
:
addControl
removeControl
setControl
En naar de volgende methoden van: FormArray
:
push
insert
removeAt
setControl
clear
min en max validators ondersteuning voor sjabloongestuurde formulieren
De min
en max
validators van Angular kunnen nu worden gebruikt met sjabloongestuurde formulieren:
<input [(ngModel)]="foo.bar" [min]="min" [max]="42" />
Houd er rekening mee dat dit een belangrijke wijziging is, aangezien deze voorheen genegeerd zouden worden.
i18n
Het i18n-systeem van Angular is met deze release veranderd.
Zoals aangegeven in de aankondigingsblogpost, worden er momenteel een aantal verouderde bericht-ID-indelingen gebruikt. Die zijn kwetsbaar en er kunnen problemen optreden vanwege witruimte, opmaaksjablonen en ICU-uitdrukkingen.
Angular 12 introduceert een nieuw canoniek bericht-ID-formaat (dwz รฉรฉn formaat om ze allemaal te regeren). Dit formaat is veerkrachtiger en intuรฏtiever.
Dit formaat vermindert de onnodige ongeldigverklaring van vertalingen en de bijbehorende hervertalingskosten in toepassingen waar vertalingen niet overeenkomen vanwege bijvoorbeeld wijzigingen in de witruimte.
Sinds v11 worden nieuwe projecten automatisch geconfigureerd om de nieuwe bericht-ID's te gebruiken, en nu is er een tool om bestaande projecten met bestaande vertalingen te migreren. Als u zich zorgen maakt, kunt u de localize-migrate
tool om uw bericht-ID's te migreren:
ng extract-i18n --format=legacy-migrate
npx localize-migrate --files=*.xlf --map-file=messages.json
U kunt meer informatie vinden hier.
Performance verbeteringen
Met deze release zijn er een aantal prestatieverbeteringen. De meest voor de hand liggende komt samen met de upgrade naar Webpack 5, maar er is meer:
Een aantal ongebruikte methoden zijn verwijderd uit DomAdapter
. Het is cool omdat de methoden niet boomschudbaar zijn en zijn opgenomen in alle Angular-toepassingen, zoals uitgelegd in de overeenkomstige PR.
Angular genereert nu minder code voor veilige toegang tot eigendommen; bijvoorbeeld voor sjabloonuitdrukkingen zoals a?.b
en de nieuw ondersteunde null-coalescentie: a ?? b
.
De Angular-compiler ondersteunt nu incrementele compilatie, zelfs in de aanwezigheid van omgeleide bronbestanden. Voorheen kon werk van eerdere compilaties niet opnieuw worden gebruikt wanneer TypeScript bronbestanden dedupliceerde. Daar kun je meer over lezen hier.
De Angular-compiler slaat nu het bestandssysteempad van bronbestanden op in de cache. Voorheen riep het herhaaldelijk fs.resolve()
, wat tijdrovend is.
De getDirectives
functie is verbeterd. Samen met die verandering, de ng
naamruimte is ook uitgebreid met een nieuwe getDirectiveMetadata
utility.
En dat is er wat meer.
ng API-verbeteringen
De ng
debug-API die we kunnen gebruiken vanuit de browserontwikkeltools is verbeterd met Angular 12.
Er is een nieuwe functie genaamd getDirectiveMetadata
, die kan worden gebruikt om informatie over componenten en richtlijnen op te halen. Ik denk niet dat we het vaak nodig zullen hebben, maar toekomstige verbeteringen aan de dev-tooling zullen hier hoogstwaarschijnlijk van afhangen. U kunt meer te weten komen hier.
Een nieuwe profilerfunctie genaamd esetProfiler
is ook geรฏmplementeerd en is ook beschikbaar in productiemodus. Die nieuwe functie kan in een aantal scenario's worden aangeroepen. Het kan bijvoorbeeld worden gebruikt om de duur van het maken van sjablonen, het bijwerken van sjablonen, de verwerking van hooks in de levenscyclus, enz. te traceren. Nogmaals, deze API zal worden benut door aankomende ontwikkelingstools, waardoor we veel meer inzichtelijke informatie krijgen over hoe onze applicaties presteren op looptijd.
Dit is op dit moment nog experimenteel, maar ik denk dat we hier later meer over zullen horen. Ik ben benieuwd of/wanneer tools zoals Sentry ondersteuning zullen integreren voor het verzamelen van dit soort informatie om ons te voorzien van bruikbare prestatiedashboards.
Een paar dagen na de release van Angular 12 heeft het Angular-team team aangekondigd de beschikbaarheid van gloednieuwe Angular Dev Tools voor Google Chrome. Die kun je downloaden hier.
Met die gloednieuwe browserextensie kun je tijdens de ontwikkeling eenvoudig je Angular-applicaties inspecteren. Het ondersteunt:
- De structuur van de applicatie visualiseren (dwz de componentenboom inspecteren)
- Onderdelen verkennen en bewerken
- Profilering van optredens
Met behulp van de ingesloten profiler kunnen we wijzigingsdetectiegebeurtenissen opnemen en een voorbeeld bekijken wanneer ze zich voordoen. Voor elke wijzigingsdetectiecyclus kunnen we kijken hoe lang het duurde, welke componenten het langst duurden, of die cyclus framedrops veroorzaakte.
Angular had eerder semi-officiรซle Dev Tools via de Voorteken project (die de basis vormen van de nieuwe tools!), maar die waren niet compatibel met Ivy. Dit is dus geweldig nieuws voor de Angular-gemeenschap!
En meer ...
Er is een ton meer kleine wijzigingen in deze release. Hier is een snel overzicht.
APP_INITIALIZER ondersteunt nu Observables
Tot nu toe was het niet mogelijk om Observables te gebruiken met APP_INITIALIZER
. Vanaf Angular 12 kunnen we dit nu doen, wat schonere code mogelijk maakt!
Voor het geval je deze functie van Angular nog niet kende, APP_INITIALIZER
is een token die we kunnen gebruiken om functies te definiรซren die moeten worden uitgevoerd tijdens de initialisatie van de applicatie. Als die functie asynchroon is, wordt a . geretourneerd Promise
of Observable
(nieuw :p), dan wacht Angular totdat het is voltooid voordat de toepassing wordt gestart.
Deze wijziging is meer dan welkom, omdat het betekent dat we nog meer code kunnen schrijven met RxJS, in plaats van terug te moeten vallen op de Promise
API.
Daar kun je meer over lezen hier.
Runtimecontrole over animaties
Voorheen was de enige manier om animaties uit te schakelen, de NoopAnimationsModule
. Vanaf Angular 12 is het nu mogelijk om animaties uit te schakelen op basis van runtime-informatie, met behulp van BrowserAnimationModule.withConfig
methode, en het doorgeven van de disableAnimations
booleaanse eigenschap.
Nieuwe historyGo-methode op locatieservice
De LocationService
van Angular bevat nu een historyGo
methode, die kan worden gebruikt om naar een specifieke pagina in de sessiegeschiedenis te navigeren, geรฏdentificeerd door zijn relatieve positie ten opzichte van de huidige pagina. Deze methode komt overeen met de native window.history.go
methode. Bekijk MDN voor enkele voorbeelden.
Verbeteringen in de taalservice
De taalservice, die IDE's alle nuttige inzichten over Angular-code biedt, is ook verbeterd met deze release.
Met Angular 12 is de taalservice standaard ingeschakeld (voorheen moesten we ons hiervoor aanmelden).
Vanaf Angular 12 zal het ook detecteren of: strikte controle van het sjabloontype is niet ingeschakeld, en zal u adviseren om deze in te schakelen.
De taalservice bevat nu ook prestatietraceringmogelijkheden, die kunnen worden gebruikt om prestaties te traceren. Dit kan worden ingeschakeld in VSCode, zoals hier uitgelegd (dit is echter vrij laag niveau).
Als je de taalservice nog niet kent, kijk dan eens de officiรซle documenten, of de leuke blogpost geschreven door Ninja-ploeg, of dit intro video.
Schakel lintregels rechtstreeks vanuit HTML-sjablonen uit
De Angular-sjablooncompiler houdt nu HTML-opmerkingen bij.
Voorheen was het niet mogelijk om linterregels uit HTML-sjablonen uit te schakelen omdat de Angular-sjablooncompiler opmerkingen negeerde. De tijdelijke oplossing was om die regels voor de hele sjabloon uit te schakelen vanaf de controller van de component. Dankzij deze wijziging is het nu mogelijk om dit nauwkeuriger te doen vanuit de sjabloon:
<!-- eslint-disable-next-line @angular-eslint/template/no-any -->
<span>{{ $any(foo).bar }}</span>
Yay voor schonere code!
De DatePipe ondersteunt nu ICU standaard Stand Alone dag van de week
Voorheen was het was niet mogelijk om een โโdatum te formatteren naar Stand Alone dag van de week met behulp van de DatePipe.
Dankzij deze wijziging wordt de Finse datumnotatie nu ondersteund, en ik weet zeker dat dit geweldig nieuws is voor een fractie van de Angular-gemeenschap ๐
Ondersteuning voor forwardRef in verstrektIn velden van Injectable decorateurs
Het is nu mogelijk om te gebruiken forwardRef
in de providedIn
gebied van de @Injectable
decorateur.
Nieuwe transformResource-hook op de ResourceHost-interface
A transformResource
methode is toegevoegd aan de ResourceHost
koppel. Dankzij dit is het nu mogelijk voor tooling om dingen te doen zoals het introduceren van preprocessor-ondersteuning voor inline-stijlen. Dit is wat de nieuwe ondersteuning voor SASS met inline-stijlen mogelijk maakt.
Daar kun je meer over leren hier en hier.
Mogelijk om aangepaste implementaties van routeruitgangen te maken
Tot nu toe was het mogelijk om aangepaste routeruitgangen te maken, maar je moest door een aantal hoepels springen (dat wil zeggen, aangepaste uitgangen registreren met ChildrenOutletContexts
).
Hoek 12 biedt een schonere ondersteuning voor aangepaste routeruitgangen.
Bug fixes
Zoals gewoonlijk zijn er in deze release een ontelbaar aantal bugfixes opgenomen.
Hier is een kopie van de release-opmerkingen:
- animaties: zorg voor een consistente volgorde van naamruimten in de overgang#19854) (01cc995)
- animaties: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (e918250)
- animaties: DOM-elementen opschonen wanneer de rootweergave is verwijderd (#41059) (c49b280)
- animaties: animaties toestaan โโop elementen in de schaduw DOM (#40134) (papa42c8), sluit #25672
- animaties: DOM-elementen opschonen wanneer de rootweergave is verwijderd (#41001) (a31da48)
- bazel: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (8503246)
- bazel: update build-tooling voor de laatste wijzigingen in rules_nodejs (#40710) (696f7bc)
- bazel: update integratietest om te gebruiken regels_nodejs@3.1.0 (#40710) (34of89a)
- bazel: update type castings voor JSON.parse gebruik (#40710) (2c90391)
- bankdrukken: update type castings voor JSON.parse gebruik (#40710) (e721a5d)
- gemeenschappelijk: voeg rechts ContentType toe voor booleaanse waarden met HttpClient-verzoek body(#38924) (#41885) (922a602)
- gemeenschappelijk: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (f2b6fd8)
- gemeenschappelijk: viewport-scroller vindt geen elementen binnen de schaduw-DOM (#41644) (c0f5ba3), sluit #41470
- gemeenschappelijk: tijdelijk opnieuw exporteren en beรซindigen
XhrFactory
(#41393) (7dfa446) - gemeenschappelijk: opschonen locatie luisteraars wijzigen wanneer de root-weergave is verwijderd (#40867) (38524c4), sluit #31546
- gemeenschappelijk: nummer of boolean toestaan โโals http-params (#40663) (91cdc11), sluit #23856
- gemeenschappelijk: vermijd muterend contextobject in NgTemplateOutlet (#40360) (d3705b3), sluit #24515
- compiler: bewaar @page-regels in ingekapselde stijlen (#41915) (3e365ba), sluit #26269
- compiler: strip scoped selectors van
@font-face
reglement (#41815) (2a11cda), sluit #41751 - compiler: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (bae8126)
- compiler: niet-letterlijke inline-sjablonen onjuist verwerkt in gedeeltelijke compilatie (#41583) (ab257b3)
- compiler: genereert geen update-instructies voor ng-template in alternatieve naamruimten (#41669) (2bcbbda), sluit #41308
- compiler: vermijd het ontleden van EmptyExpr met een achterwaartse span (#41581) (e1a2930)
- compiler: hoofdlettergevoelige aangepaste CSS-eigenschappen afhandelen (#41380) (e112e32), sluit #41364
- compiler: gebruikte componenten opnemen tijdens JIT-compilatie van gedeeltelijke componentdeclaratie (#41353) (ff9470b), sluit #41104 #41318
- compiler: ondersteuning meerdere
:host-context()
selecteurs (#40494) (07b7af3), sluit #19199 - compiler: update type castings voor JSON.parse gebruik (#40710) (f728490)
- compiler-cli: gebruik โ voor de bronkaart-URL van indirecte sjablonen (#41973) (7a4d980), sluit #40854
- compiler-cli: stel de linker bloot als een Babel-plug-in (#41918) (8fdac8f)
- compiler-cli: geef de voorkeur aan niet-aliased export in referentie-emitters (#41866) (75bb931), sluit #41443 #41277
- compiler-cli: laat linker toe om verkleinde booleans te verwerken (#41747) (1fb6724), sluit #41655
- compiler-cli: match string geรฏndexeerde gedeeltelijke declaraties (#41747) (f885750), sluit #41655
- compiler-cli: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (5b463f4)
- compiler-cli: autocomplete letterlijke typen in sjablonen. (#41456) (#41645) (8b2b5ef)
- compiler-cli: maak geen fouten met prepocessing als component geen inline-stijlen heeft (#41602) (a5fe8b9)
- compiler-cli: zorg ervoor dat de compilertracks
ts.Program
klopt (#41291) (deac74) - compiler-cli: voorkomen dat standaardimports worden weggelaten in incrementele hercompilaties (#41557) (7f16515), sluit #41377
- compiler-cli: oplossen
rootDirs
naar absoluut (#41359) (3e0fda9), sluit #36290 - compiler-cli: toevoegen
useInlining
optie om check config te typen (#41043) (09aefd2), sluit #40963 - compiler-cli:
readConfiguration
bestaande opties moeten de opties in tsconfig overschrijven (#40694) (b7c4d07) - compiler-cli: verlengen
angularCompilerOptions
in tsconfig van knooppunt (#40694) (5eb1954), sluit #36715 - compiler-cli: update ngcc-integratietests voor de laatste wijzigingen in rules_nodejs (#40710) (d7f5755)
- compiler-cli: update type castings voor JSON.parse gebruik (#40710) (b75d7cb)
- kern: bewaar geen dynamisch gecompileerde componenten en modules (#42003) (1449c5c), sluit #19997
- kern: beroep doen op profiler rond ngOnDestroy lifecycle hooks (#41969) (e9ddc57)
- kern: AsyncPipe nu compatibel met RxJS 7 (#41590) (9759bca)
- kern: meerdere i18n-attributen afhandelen met expressiebindingen (#41882) (73c6c64), sluit #41869
- kern: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (f9c1f08)
- kern: gesynthetiseerde constructors detecteren die zijn gedownleveld met TS 4.2 (#41305) (274dc15), sluit #41298
- kern: Stap over voor slechts
emitDistinctChangesOnlyDefaultValue
naar waar (#41121) (7096246) - kern: verwijder dubbele EMPTY_OBJ constante (#41066) (bf158e7)
- kern: verwijder dubbele EMPTY_ARRAY constante (#40991) (e12d9de)
- kern: toestaan โโdat de EmbeddedViewRef-context wordt bijgewerkt (#40360) (a3e1719), sluit #24515
- kern: make DefaultIterableDiffer behoud de volgorde van duplicaten (#23941) (a826926), sluit #23815
- kern: NgZone-coleascing-opties zouden onStable correct moeten activeren (#40540) (22f9e45)
- elementen: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (4f5d094)
- elementen: update type castings voor JSON.parse gebruik (#40710) (efd4149)
- vormen: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (dc975ba)
- http: voltooi het verzoek bij time-out (#39807) (61a0b6d), sluit #26453
- http: geef fout op XMLHttpRequest abort-gebeurtenis (#40767) (3897265), sluit #22324
- taal-service: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (9b6198c)
- taal-service: gebruik scriptversies voor incrementele compilaties (#41475) (78236bf)
- taal-service: Geef alleen aanvullingen op hoekige eigenschappen in sjablonen (#41278) (0226a11)
- taal-service: Voeg plug-in-optie toe om strictTemplates te forceren (#41062) (e9e7c33)
- taal-service: gebruik รฉรฉn toegangspunt voor Ivy en View Engine (#40967) (e986a97)
- lokaliseren: ontspan fout tot waarschuwing voor ontbrekend doel (#41944) (35ceed2), sluit #21690
- lokaliseren: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (658ed1f)
- lokaliseren: update type castings voor JSON.parse gebruik (#40710) (4b469c9)
- ngcc: gesynthetiseerde constructors detecteren die zijn gedownleveld met TS 4.2 (#41305) (8d3da56), sluit #41298
- platform-browser: geheugenlek van stijlknooppunten voorkomen als schaduw-DOM-inkapseling wordt gebruikt (#42005) (d555555), sluit #36655
- platform-browser: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (ea05cfd)
- platform-browser: configureer
XhrFactory
gebruikenBrowserXhr
(#41313) (e0028e5), sluit #41311 - platform-browser: update type castings voor JSON.parse gebruik (#40710) (7ecfd2d)
- platform-browser-dynamisch: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (bc45029)
- platform-server: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (4b9d4fa)
- router: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (0067ed)
- router: Haal de opgeslagen route alleen op wanneer de hergebruikstrategie aangeeft dat deze opnieuw moet worden gekoppeld (#30263) (a4ff071), sluit #23162
- router: recursief lege padovereenkomsten samenvoegen (#41584) (1179dc8), sluit #41481
- router: fragment kan nul zijn (#37336) (b555160), sluit #23894 #34197
- router: update type castings voor JSON.parse gebruik (#40710) (350 gegeven)
- servicemedewerker: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (6b823d7)
- servicemedewerker: update type castings voor JSON.parse gebruik (#40710) (4f7ff96)
- upgrade: behoud $interval.flush wanneer ngMocks wordt gebruikt (#30229) (87dc851)
- upgrade: update het ondersteunde bereik van knooppuntversies om alleen LTS-versies op te nemen (#41822) (10c4523)
Trouwens, heb je dat gemerkt AsyncPipe
is versteld door Ben Lesh om compatibel te zijn met zowel RxJS 6 als 7? Hoe cool is dat?
Veranderingen doorbreken
Zoals gewoonlijk zijn er een aantal belangrijke wijzigingen in deze release.
As de officiรซle release-aantekeningen zijn vrij duidelijk, ik kopieer en plak die hier:
- Geminimaliseerde UMD-bundels zijn niet langer opgenomen in de gedistribueerde NPM-pakketten.
- en animaties: DOM-elementen worden nu correct verwijderd wanneer de rootweergave wordt verwijderd. Als u SSR gebruikt en de HTML van de app gebruikt voor weergave, moet u ervoor zorgen dat u de HTML opslaat in een variabele voordat u de app vernietigt. Het is ook mogelijk dat tests per ongeluk vertrouwen op het oude gedrag door te proberen een element te vinden dat niet in een eerdere test is verwijderd. Als dit het geval is, moeten de falende tests worden bijgewerkt om ervoor te zorgen dat ze de juiste instellingscode hebben die de elementen initialiseert waarop ze vertrouwen
- gemeenschappelijk: Methoden van de
PlatformLocation
klasse, namelijkonPopState
enonHashChange
, gebruikt om terug te kerenvoid
. Nu retourneren die methoden functies die kunnen worden aangeroepen om gebeurtenishandlers te verwijderen - gemeenschappelijk: de methoden van de
HttpParams
klas accepteert nu nowstring | number | boolean
in plaats vanstring
voor de waarde van een parameter. Als u deze klasse in uw toepassing heeft uitgebreid, moet u de handtekeningen van uw methoden bijwerken om deze wijzigingen weer te geven - compiler-klik: Gelinkte bibliotheken genereren niet langer legacy i18n-bericht-ID's. Elke downstream-toepassing die vertalingen voor deze berichten levert, moet hun bericht-ID's migreren met behulp van de
localize-migrate
command-line tool - kern: Angular biedt geen ondersteuning meer voor node v10, dus als je het nog steeds gebruikt voor je ontwikkelomgeving, is het echt tijd om te upgraden!
- kern: Voorheen de
ng.getDirectives
functie gaf een fout in het geval dat aan een bepaald DOM-knooppunt geen Angular-context was gekoppeld (bijvoorbeeld als een functie werd aangeroepen voor een DOM-element buiten een Angular-app). Dit gedrag was niet consistent met andere hulpprogramma's voor foutopsporing onderng
namespace, die deze situatie afhandelde zonder een uitzondering op te werpen. Nu bellen met deng.getDirectives
functie voor dergelijke DOM-knooppunten zou resulteren in een lege array die wordt geretourneerd door die functiekern: Switching default ofemitDistinctChangesOnlyDefaultValue
die het standaardgedrag verandert en ervoor kan zorgen dat sommige toepassingen die afhankelijk zijn van het onjuiste gedrag mislukken
emitDistinctChangesOnly
vlag is ook verouderd en zal in een toekomstige grote release worden verwijderd
De vorige implementatie zou wijzigingen afvuren QueryList.changes.subscribe
wanneer de QueryList
werd herberekend. Dit resulteerde in een kunstmatig hoog aantal wijzigingsmeldingen, omdat het mogelijk is dat herberekening QueryList
resulteert in dezelfde lijst. Wanneer de QueryList
wordt herberekend is een implementatiedetail, en het zou niet het ding moeten zijn dat bepaalt hoe vaak een wijzigingsgebeurtenis moet worden geactiveerd.
Helaas zorgde het oplossen van het gedrag ervoor dat te veel bestaande applicaties faalden. Om deze reden beschouwt Angular deze fix als een baanbrekende oplossing en heeft het een vlag geรฏntroduceerd in @ContentChildren
en @ViewChildren
, die het gedrag regelt.
export class QueryCompWithStrictChangeEmitParent { @ContentChildren('foo', { // This option is the new default with this change. emitDistinctChangesOnly: true, }) foos!: QueryList<any>;
}
Voor achterwaartse compatibiliteit vรณรณr v12emitDistinctChangesOnlyDefaultValue
was ingesteld op false
. Deze verandering
verandert de standaard in true
.
- kern: Het type van de
APP_INITIALIZER
token is gewijzigd om nauwkeuriger de typen retourwaarden weer te geven die door Angular worden afgehandeld. Voorheen werd elke initialisatie-callback getypt om terug te kerenany
, dit is nuPromise<unknown> | Observable<unknown> | void
. In het onwaarschijnlijke geval dat uw toepassing deInjector.get
orTestBed.inject
API om de . te injecterenAPP_INITIALIZER
token, moet u mogelijk de code bijwerken om rekening te houden met het strengere type.
Bovendien kan TypeScript de TS2742-fout rapporteren als de APP_INITIALIZER
token wordt gebruikt in een expressie waarvan het afgeleide type moet worden verzonden naar een .d.ts-bestand. Om dit te omzeilen, is een expliciete typeannotatie nodig, wat meestal is: Provider
or Provider[]
.
-
kern: Minimaal ondersteund
zone.js
versie0.11.4
. Het betekent dus dat als je een oudere versie gebruikt, het ook tijd is om zone.js in je project te upgraden! -
vormen: De
emitEvent
optie is toegevoegd aan het volgende:FormArray
enFormGroup
methoden: -
FormGroup.addControl
-
FormGroup.removeControl
-
FormGroup.setControl
-
FormArray.push
-
FormArray.insert
-
FormArray.removeAt
-
FormArray.setControl
-
FormArray.clear
Als je app aangepaste lessen heeft die langer duren FormArray
or FormGroup
klassen en overschrijven de
bovengenoemde methoden, moet u mogelijk uw implementatie bijwerken om de nieuwe opties in te voeren
account en zorg ervoor dat overschrijvingen compatibel zijn vanuit het perspectief van een type.
- vormen: Eerder
min
enmax
attributen gedefinieerd op de<input type="number">
werden genegeerd door de module Formulieren. Nu zou de aanwezigheid van deze attributen
trigger min/max validatielogica (in gevalformControl
,formControlName
orngModel
richtlijnen zijn ook aanwezig op een bepaalde ingang) en
overeenkomstige formuliercontrolestatus zou dat weerspiegelen. - platform-browser:
XhrFactory
is verplaatst van@angular/common/http
naar@angular/common
.
Voor
import { XhrFactory } from '@angular/common/http';
Na
import { XhrFactory } from '@angular/common';
- router: Strikte nulcontroles zullen rapporteren dat een fragment mogelijk nul is.
Migratiepad: null check toevoegen. - router: Het type van de
RouterLinkActive.routerLinkActiveOptions
invoer was
uitgebreid om een โโmeer verfijnde controle mogelijk te maken. Code die eerder werd gelezen
deze eigenschap moet mogelijk worden bijgewerkt om rekening te houden met het nieuwe type.
Bijgewerkt stappenplan
Volgens de huidige Angular roadmap, is het team nu bezig met de volgende verbeteringen:
- Verbetering van de ervaring van ontwikkelaars tijdens het debuggen en profileren. Dit zou ons moeten helpen de componentstructuur te begrijpen (ik stel me voor dat React Dev Tools React mogelijk maakt) en veranderingsdetectie
- Testtijden verbeteren en debuggen met automatische demontage: dit moet de isolatie tussen tests en testtijden verbeteren. De Proefbank zal ook worden gewijzigd om de testomgeving automatisch op te schonen en af โโte breken nadat elke test is uitgevoerd
- ES2017+ gebruiken als standaarduitvoer: ze identificeren wegversperringen en verwijderen deze zodat de standaarduitvoertaal kan worden geรผpgraded
- MDC Web integreren in hoekig materiaal
- Verbetering van de toegankelijkheid van Angular Material-componenten
- Handleidingen publiceren over geavanceerde concepten zoals wijzigingsdetectie, prestatieprofilering, interacties met Zone.js, enz.
- De e2e-teststrategie bijwerken (zie hierboven)
- De upgrade naar RxJS v7+ voorbereiden. Zoals je misschien weet, is RxJS 7 onlangs vrijgegeven. Hopelijk kunnen we binnenkort upgraden
In de toekomst is het Angular-team van plan om:
- Kijk naar micro-frontend-architectuur: ze kunnen middelen voor ons introduceren om eenvoudig micro-frontends te maken met behulp van Angular
- Verbeter de ontwikkelaarservaring met strikt typen voor Angular-formulieren (we hebben dit zo hard nodig)
- Maak Zone.js optioneel, wat het framework moet vereenvoudigen, debugging moet verbeteren, bundelgroottes moet verkleinen en zelfs moet profiteren van de native async/wait-syntaxis
- Verbeter de bouwprestaties door de Angular-compiler te integreren (
ngc
) als een TypeScript-compiler-plug-in - Sta het toevoegen van richtlijnen toe om elementen te hosten. Hier wordt ook al heel lang om gevraagd door de community!
- Maak NgModules optioneel om de leercurve te vergemakkelijken
- Geef ons eenvoudigere middelen om code-splitsing op componentniveau te implementeren
Hoekig materiaal en hoekige CDK
Sass-migratie
Intern zijn zowel Angular Material als de CDK gemigreerd naar de nieuw Sass-modulesysteem.
Als uw toepassing een van beide gebruikt, moet u ervoor zorgen dat u deze hebt vervangen node-sass
by sass
: https://www.npmjs.com/package/sass. De node-sass
pakket wordt niet meer onderhouden!
Met deze migratie is de Sass-thema-API verbeterd en kunnen we nu profiteren van Sass's @use
utility.
Er is nu รฉรฉn toegangspunt voor @angular/material
en @angular/cdk
.
Ten slotte zijn de API's voor de duidelijkheid ook gewijzigd. Veel functies, mixins en variabelen zijn onderweg hernoemd.
U kunt meer informatie over deze wijzigingen vinden in de nieuwe themagids: https://github.com/angular/components/blob/master/guides/theming.md. Houd er bovendien rekening mee dat de handleidingen op https://material.angular.io zijn herschreven om de nieuwe API te demonstreren en uitleg bevatten.
Het upgradeproces migreert automatisch code naar de nieuwe Sass API. U kunt voor/na voorbeelden vinden hier.
Hoekige CDK-wijzigingen
Versie 12 bevat een aantal: veranderingen naar de Angular CDK.
Hier zal ik alleen de nieuwe functies vermelden, maar je kunt de release-opmerkingen bekijken als je details wilt over de bugfixes en prestatieverbeteringen:
- Slepen, laten vallen: Het verwijderde evenement bevat nu een
dropPoint
eigenschap, het bepalen van het exacte punt waar de muis wees toen het item werd neergezet. Meer informatie hier - Slepen, laten vallen: De voorbeeldcontainer kan nu worden aangepast
- tafel: Een nieuwe richtlijn maakt het mogelijk om schakel de herhaalweergave voor recyclen in, die verwijderde rijen in de cache opslaat en opnieuw gebruikt wanneer de gegevensset verandert. Dit kan de prestaties helpen verbeteren (latentie verminderen)
- tafel: Toegevoegd de verschuivingen van kleverige elementen naar de
StickyUpdate
interface - stepper: Wanneer een gebruiker probeert weg te lopen van een trede,
interacted
evenement zal nu zijn geรซmitteerd - stepper: De oriรซntatie kan nu zijn veranderd
- Toegankelijkheid: A
FocusOptions
object kan nu worden doorgegeven in de verschillende focus trap methoden - Testen: Nieuwe WebDriver-harnasomgeving. Ik heb me er nog niet in verdiept, dus meer kan ik je niet vertellen. Uitchecken de PR
Hoekige materiaalveranderingen
Er zijn ook een aantal wijzigingen voor hoekig materiaal. Bekijk nogmaals de release-opmerkingen voor de volledige lijst met bugfixes.
Nieuwe functies:
- Datumkiezer: Niet langer afhankelijk op dialoog
- stepper: De oriรซntatie kan nu dynamisch worden gewijzigd (cfr soortgelijke wijziging in de CDK)
- stepper: toestaan โโdat inhoud wordt lui weergegeven
- Menu: Updaten van de menupositie toestaan programmatisch
- Mat fout: Nu gebruikt Now
aria-live="polite"
in plaats vanrole="alert"
. Meer details hier - Tabs: methode toevoegen aan programmatisch de focus instellen op een specifiek tabblad
- Lijst: retourneert nu een array met gewijzigde opties uit de
selectAll
endeselectAll
methoden. Uitchecken de PR voor details - Schuifschakelaar: Toestaan โโom een standaardkleur globaal configureren via een provider
- Tooltip: onthult nu de effectieve positie van de tooltip via een klasse op de component the
- Radio, checkbox en Slider: Neem de achtergrondkleur van die componenten op in de stylesheets afdrukken
Er zijn ook een aantal wijzigingen in de experimentele versie: https://github.com/angular/components/blob/master/CHANGELOG.md#material-experimental.
Hoekig universeel
Angular Universal 12 is ook: vers uit de oven.
Met deze release, Universal nu standaard kritische CSS inline, dat is best gaaf.
Universal bevat nu een nieuwe proxyConfig
optie om aangepaste proxyconfiguraties te bieden aan de ssr-dev-server
bouwer.
In deze versie is er een nieuwe (experimentele) SSR-engine genaamd Klaver (doet me denken aan een kwaliteitstool in het Java-ecosysteem). Deze nieuwe motor lijkt veelbelovend. Het is bedoeld om dingen te vereenvoudigen, ons te ontdoen van de Window is undefined
fout, verwijder de noodzaak van meerdere builds voor SSR/prerender, genereer applicatieshells zonder een extra build en meer. Waarschijnlijk horen we er later meer over. Nieuwsgierig geworden, kijk dan eens de PR.
Deze versie bevat een bouwer die kunnen worden gebruikt om statische pagina's (dwz pre-rendering) te genereren met behulp van de nieuwe Universal Clover-benadering.
Ten slotte bevat deze versie ook: TLS-ondersteuning voor de dev-server.
Google Maps
Zoals u weet, bevat Angular componenten voor Google Maps en YouTube. Versie 12 brengt een paar verbeteringen voor de Google Maps-component:
- Nu inclusief een
icon
invoer om de markering eenvoudig aan te passen - zendt nu een . uit
clusterClick
gebeurtenis wanneer een cluster is geklikt - Inclusief een wikkel rond de Google Maps Geocoder API, en export
MapDirectionsResponse
, die niet eerder was blootgesteld - Introduceert ondersteuning voor: heatmaps renderen
- Toegevoegd
MapDirectionsRenderer
, waarmee u routebeschrijvingen op een kaart kunt weergeven, enMapDirectionsService
, die wikkeltgoogle.maps.DirectionsService
berekenen routes tussen twee punten. - New
options
invoer op de markercluster, vergelijkbaar met de andere richtlijnen.
Upgrading
Zoals gewoonlijk is er een complete upgradegids beschikbaar, en ng update
zal je helpen: https://update.angular.io/?l=3&v=11.0-12.0
Als u gebruik maakt Nrwl NX (dat zou je echt moeten doen), merk op dat Nx 12.3 al ondersteuning biedt voor Angular 12! Leer daar meer over hier. Als bijkomend voordeel zal Nx je ook helpen migreren van TSLint naar ESLint (en het is tijd!)
Conclusie
In dit artikel heb ik de nieuwe functies van Angular 12 onderzocht.
Zoals gewoonlijk is dit release is heldhaftig (wat kan het anders zijn?! ).
Ivy gaat vooruit, en hopelijk zullen we "binnenkort" minder geรฏrriteerd zijn door ngcc
, terwijl het ecosysteem migreert. Er zijn een aantal geweldige veranderingen met deze release, dus bekijk het en upgrade nu!.
Dat is het voor vandaag!
PS: Als je nog veel meer leuke dingen wilt leren over product/software/webontwikkeling, bekijk dan de Ontwikkelingsconcepten serie, (https://mailchi.mp/fb661753d54a/developassion-newsletter) [abonneer je op mijn nieuwsbrief], en kom hallo zeggen op Twitter!
- Door SEO aangedreven content en PR-distributie. Word vandaag nog versterkt.
- Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. Toegang hier.
- Bron: https://www.codementor.io/dsebastien/angular-12-in-depth-1j62geeq5n
- 1
- 11
- 2018
- 2020
- 2022
- 7
- 9
- a
- in staat
- Over
- over het
- boven
- absoluut
- ACCEPTEREN
- Accepteert
- toegang
- de toegankelijkheid
- Account
- nauwkeurig
- werkelijk
- toegevoegd
- toevoeging
- vergevorderd
- Voordeel
- Na
- wil
- Alarm
- algoritme
- algoritmen
- Alles
- Het toestaan
- toestaat
- alleen
- al
- alternatief
- alternatieven
- Hoewel
- altijd
- onder
- en
- Angular
- en animaties
- aangekondigd
- Aankondiging
- Nog een
- overal
- api
- APIs
- gebruiken
- verschijnen
- Aanvraag
- toepassingen
- nadering
- April
- architectuur
- rond
- reeks
- dit artikel
- artikelen
- geassocieerd
- attributen
- auteurs
- Automatisch
- webmaster.
- beschikbaarheid
- Beschikbaar
- Babel
- terug
- Back-end
- achtergrond
- bars
- gebaseerde
- basis
- omdat
- vaardigheden
- wezen
- voordeel
- Betere
- tussen
- Groot
- Grootste
- Beetje
- Blog
- merk
- Brand New
- Breaking
- Brengt
- bracht
- browser
- browsers
- Bug
- bouw
- bouwer
- Gebouw
- bouwt
- ingebouwd
- Bundel
- last
- Dit betekent dat we onszelf en onze geliefden praktisch vergiftigen.
- bellen
- mogelijkheden
- geval
- gevallen
- Veroorzaken
- veroorzaakt
- verandering
- Wijzigingen
- controle
- Controles
- Chrome
- helderheid
- klasse
- klassen
- duidelijk
- duidelijk
- Sluit
- TROS
- code
- Het verzamelen van
- kleur
- komst
- opmerkingen
- gemeenschap
- verenigbaarheid
- verenigbaar
- compleet
- ingewikkeld
- bestanddeel
- componenten
- concepten
- betrokken
- conclusie
- gekoppeld blijven
- beschouwt
- consequent
- constante
- consumeren
- Containers
- content
- verband
- voortzetten
- onder controle te houden
- controleur
- controles
- Coole
- Kern
- komt overeen
- Kosten
- kon
- cursus
- deksel
- bedekt
- en je merk te creรซren
- aangemaakt
- Wij creรซren
- het aanmaken
- kritisch
- cross-browser
- cruciaal
- CSS
- nieuwsgierig
- Actueel
- Op dit moment
- gewoonte
- aangepaste eigenschappen
- aan te passen
- Datum
- dag
- dagen
- dood
- transactie
- diepere
- Standaard
- afhankelijk
- het inzetten
- diepte
- detail
- gegevens
- Opsporing
- bepaalt
- bepalen
- Dev
- Ontwikkelaar
- Ontwikkeling
- DEED
- anders
- DIG
- richtlijnen
- direct
- verdeeld
- Uitkeringen
- doen
- ARREST
- beneden
- Download
- keerzijde
- liet vallen
- Drops
- duplicaten
- gedurende
- elk
- gemakkelijker
- gemakkelijk
- ecosysteem
- effectief
- inspanning
- beide
- geeft je de mogelijkheid
- ingebed
- in staat stellen
- maakt
- ingekapseld
- eind tot eind
- energie-niveau
- Motor
- verbeterde
- genoeg
- verzekeren
- toegang
- Milieu
- omgevingen
- fout
- fouten
- vooral
- etc
- Ether (ETH)
- schatten
- Zelfs
- Event
- EVENTS
- iedereen
- alles
- evolueerde
- evoluerende
- voorbeeld
- voorbeelden
- uitstekend
- uitzondering
- uitvoeren
- uitvoering
- bestaand
- uitgebreid
- verwacht
- ervaring
- Verklaren
- uitgelegd
- uitleggen
- Verklaart
- uitleg
- Nagegaan
- ontdekkingsreiziger
- export
- blootgestelde
- uitdrukkingen
- verlengen
- uitbreiding
- extern
- extra
- vergemakkelijken
- FAIL
- tamelijk
- Vallen
- ventilator
- SNELLE
- sneller
- angst
- Kenmerk
- Voordelen
- Federatie
- feedback
- weinig
- veld-
- Velden
- Dien in
- Bestanden
- Tot slot
- VIND DE PLEK DIE PERFECT VOOR JOU IS
- het vinden van
- Brand
- Bepalen
- stroom
- Focus
- richt
- volgend
- Dwingen
- formulier
- formaat
- formulieren
- Naar voren
- gevonden
- Stichtingen
- fractie
- FRAME
- Achtergrond
- oppompen van
- Frontend
- vol
- functie
- functies
- verder
- toekomst
- voortbrengen
- genereert
- het genereren van
- krijgen
- GitHub
- Geven
- gegeven
- geeft
- Vrijgevigheid
- Go
- gaan
- goed
- Kopen Google Reviews
- Google Chrome
- Google Maps
- diagram
- groot
- gids
- Guides
- handvat
- Hard
- met
- gehoord
- hulp
- hier
- hi
- Hoge
- Markeer
- geschiedenis
- haken
- Hopelijk
- gastheer
- Hoe
- HTML
- HTTPS
- reusachtig
- leesbare
- ZIEK
- idee
- geรฏdentificeerd
- identificeren
- Impact
- uitvoeren
- uitvoering
- geรฏmplementeerd
- importeren
- belangrijk
- invoer
- verbeteren
- verbeterd
- verbetering
- verbeteringen
- in
- omvatten
- inclusief
- omvat
- onjuist
- geeft aan
- indirect
- info
- informatie
- eerste
- innovatieve
- invoer
- inzichten
- installeren
- installeren
- instantie
- verkrijgen in plaats daarvan
- instructies
- integreren
- Integreren
- integratie
- interacties
- interessant
- Interface
- intern
- Internet
- voorstellen
- geรฏntroduceerd
- Introduceert
- de invoering
- intuรฏtief
- investeerde
- isolatie
- problemen
- IT
- Java
- JIT
- Jobomschrijving:
- mee
- json
- Houden
- Soort
- blijven
- taal
- groter
- Achternaam*
- Wachttijd
- laatste
- Competitie
- lekken
- LEARN
- leren
- Nalatenschap
- Niveau
- Hefboomwerking
- bibliotheken
- Bibliotheek
- Lijn
- LINK
- gekoppeld
- Lijst
- plaats
- lang
- lange tijd
- langdurig
- langer
- Kijk
- keek
- op zoek
- lot
- Laag
- gemaakt
- onderhouden
- onderhoudt
- groot
- Meerderheid
- maken
- MERKEN
- maken
- veel
- kaart
- Maps
- Match
- matching
- materiaal
- Matrix
- max
- middel
- Geheugen
- Menu
- gaan
- Bericht
- berichten
- Metadata
- methode
- methoden
- Microsoft
- macht
- trekken
- migratie
- minimum
- minder
- vermist
- fout
- Mode
- Modern
- module
- Modules
- meer
- meest
- beweging
- bewegend
- mozilla
- meervoudig
- Genoemd
- namelijk
- namen
- inheemse
- OP DEZE WEBSITE VIND JE
- noodzakelijk
- Noodzaak
- behoeften
- negatief
- netto
- New
- Nieuwe mogelijkheden
- nieuws
- Nieuwsbrief
- volgende
- Next.js
- knooppunt
- Node.js
- knooppunten
- Opmerkingen
- opmerkelijk
- meldingen
- aantal
- nummers
- object
- Voor de hand liggend
- opgetreden
- oktober
- officieel
- Officieel
- Oud
- EEN
- operator
- Keuze
- Opties
- bestellen
- organisaties
- oorspronkelijk
- Overige
- Verkooppunten
- buiten
- overzicht
- het te bezitten.
- pakket
- Paketten
- parameter
- parameters
- vooral
- onderdelen
- voorbij
- Voorbijgaand
- pad
- uitvoeren
- prestatie
- optredens
- uitvoerend
- perspectief
- stuk
- pijpleiding
- plaats
- plannen
- Plato
- Plato gegevensintelligentie
- PlatoData
- inpluggen
- punt
- populariteit
- positie
- mogelijk
- Post
- mogelijk
- krachtige
- Precies
- de voorkeur geven
- aanwezigheid
- presenteren
- mooi
- voorkomen
- Voorbeschouwing
- vorig
- die eerder
- Voorafgaand
- waarschijnlijk
- problemen
- verwerking
- productie
- profilering
- Programma
- project
- projecten
- veelbelovend
- gepast
- vastgoed
- eigendom
- zorgen voor
- mits
- biedt
- volmacht
- gepubliceerde
- Duwen
- puzzel
- kwaliteit
- Quick
- het verhogen van
- reeks
- Rauw
- RE
- Reageren
- Lees
- realiseren
- reden
- redenen
- bevelen
- record
- verminderen
- reflecteren
- registreren
- verwant
- los
- uitgebracht
- vanop
- verwijderen
- verwijderd
- weergave
- HERHAALDELIJK
- vervangen
- verslag
- te vragen
- verzoeken
- vereisen
- nodig
- veerkrachtig
- antwoord
- REST
- resultaat
- Resultaten
- terugkeer
- terugkerende
- Retourneren
- bevrijden
- wegversperringen
- Rol
- wortel
- weg
- router
- Regel
- reglement
- lopen
- lopend
- veilig
- dezelfde
- Sass
- Bespaar
- scenario's
- omvang
- Tweede
- lijkt
- zin
- -Series
- service
- Sessie
- reeks
- het instellen van
- setup
- Shadow
- Bermuda's
- moet
- showcase
- handtekeningen
- gelijk
- Eenvoudig
- vereenvoudigen
- sinds
- single
- situatie
- Maat
- maten
- Langzaam
- Klein
- kleinere
- So
- dusver
- oplossing
- Oplossingen
- sommige
- iets
- Geluid
- bron
- Tussenruimte
- specifiek
- stabiel
- staan
- standaard
- normen
- begin
- Start
- Status
- blijven
- Stap voor
- Still
- stop
- shop
- opgeslagen
- Verhaal
- Strategie
- streng
- striktere
- structuur
- stijl
- abonneren
- dergelijk
- Super
- ondersteuning
- ondersteunde
- steunen
- verrassingen
- Stap over voor slechts
- system
- Tailwind
- Wind in de rug
- Nemen
- neemt
- het nemen
- doelwit
- team
- teams
- sjabloon
- templates
- proef
- Testen
- testen
- De
- De Bron
- hun
- ding
- spullen
- dit jaar
- Door
- niet de tijd of
- tijdrovend
- tijdlijn
- keer
- naar
- samen
- teken
- Toon
- ton
- ook
- tools
- tools
- hoogste niveau
- in de richting van
- opsporen
- Tracing
- spoor
- Tracking
- Transformeren
- overgang
- Vertaling
- transparant
- leiden
- waar
- types
- getypte tekst
- typisch
- voor
- begrijpen
- Universeel
- ongebruikt
- komende
- bijwerken
- bijgewerkt
- updates
- bijwerken
- upgrade
- URL
- us
- Gebruik
- .
- Gebruiker
- gebruikers
- utilities
- utility
- bevestiging
- validatoren
- waardevol
- waarde
- Values
- divers
- Ve
- versie
- Bekijk
- W3
- wachten
- gezocht
- waarschuwing
- web
- webpack
- week
- weken
- welkom
- Wat
- of
- welke
- en
- WIE
- wil
- binnen
- zonder
- Won
- prachtig
- Mijn werk
- werkte
- werkzaam
- zou
- schrijven
- het schrijven van
- geschreven
- X
- jaar
- Your
- youtube
- zephyrnet