Wat is er nieuw in Angular 14 – functies, updates en meer!

In juni 2022 kwam de nieuwste versie van Angular uit – Angular v14. Het wordt geprezen als een van de meest goed geplande upgrades die Google heeft uitgerold. Deze nieuwe release brengt verschillende nieuwe functies en updates, waaronder een nieuwe rendering pipeline, een eenvoudigere API voor het laden van lazily inhoud, verbeterde WebAssembly ondersteuning, en nog veel meer. Met deze verbeteringen kunnen Angular-ontwikkelaars sneller en schaalbaarder applicaties bouwen.

De toevoegingen en verbeteringen van de functies hebben het nog krachtiger gemaakt. Deze release bevat ook bug fixes zoals tree-shakable foutmeldingen en router strong typing, die direct is bijgedragen door leden van de community.

Sinds de vorige release heeft het team twee grote verzoeken om commentaar (RFC) voltooid, waarmee enkele van de grootste problemen op GitHub zijn opgelost. Laten we eens kijken waarom deze nieuwe release voor een betere ontwikkelaarservaring zal zorgen.

ANGULAR 14 NIEUWE UPDATES EN FUNCTIES:

1. Getypte Angular Formulieren

Formulieren zijn een essentieel onderdeel van elke webapplicatie, en ervoor zorgen dat de waarden erin type veilig zijn is cruciaal voor het onderhouden van een goed draaiende app. Deze functie maakt veiligere formulieren mogelijk, vooral voor diep geneste complexe gevallen, door ervoor te zorgen dat de waarden in formulierelementen, groepen en arrays over het gehele API-oppervlak typeveilig zijn.

Deze functie is gemaakt in antwoord op verzoeken om commentaar en ontwerpbeoordelingen vanuit de Angular-gemeenschap.

2. Standalone-onderdelen

Ontwikkelaars zijn altijd op zoek naar manieren om hun werk te stroomlijnen, en de nieuwe standalone componenten van Angular 14 zijn een geweldige manier om precies dat te doen. Met deze componenten is er geen behoefte aan NgModules, wat veel tijd en moeite kan besparen. Deze componenten zijn nog in ontwikkeling maar zullen binnenkort klaar zijn voor gebruik in uw toepassingen. De mogelijkheid bestaat echter dat de API niet stabiel is en buiten het normale beleid inzake achterwaartse compatibiliteit om kan veranderen. Zij bieden echter een geweldige manier om toepassingen te verkennen en te ontwikkelen.

3. Tree-Shakable Foutmeldingen

Angular 14 introduceert nieuwe runtime error codes die het debuggen van fouten snel en eenvoudig maken. Met robuuste foutcodes kunt u gemakkelijk informatie opzoeken over hoe u het probleem kunt oplossen. Deze optimizer houdt foutcodes en boom-shaking foutmeldingen (lange strings) uit productie bundels, waardoor het bouwen van een efficiënter systeem eenvoudiger wordt.

Om een productiefout te debuggen, reproduceer de fout in een ontwikkelomgeving, en bekijk de volledige string. Raadpleeg de foutcodes hier –
Angular – Foutenlijst
.

4. “Banaan in een doos” Fout

Een veel voorkomende fout van ontwikkelaars is het schrijven van ([]) in plaats van [()] in twee-weg binding. Deze fout wordt de “banaan in een doos” fout genoemd omdat de banaan in de doos moet.

Omdat deze fout technisch gezien een geldige syntax is, kan de CLI van het framework dit erkennen en een unieke versie schrijven. De laatste versie geeft echter gedetailleerde berichtgeving over deze fout en hoe het kan worden afgehandeld met CLI en code editor. Dus nu is het makkelijk om de fout te vinden bij twee-weg data bindings.

Nu we het toch over fouten hebben, laten we eens kijken naar de


veel voorkomende fouten die een Angular JS ontwikkelaar moet vermijden.

5. Angular CLI Verbetering

Argument parsing is cruciaal voor elke command line interface (CLI). Het stelt gebruikers in staat gegevens en vlaggen in een consistent formaat in te voeren. In Angular 14 is de afgeschreven camel case arguments ondersteuning verwijderd en vervangen door ondersteuning voor gecombineerde aliassen. Deze verandering zal de algehele consistentie van Angular CLI verbeteren.

6. Real-Time auto-aanvullen met Ng Completion

Angular 14 heeft de opdrachtregel interface sterk verbeterd – met de introductie van real-time autocompletion voor commando’s zoals ng serve. Dit zou het aantal fouten als gevolg van typefouten moeten helpen verminderen, aangezien u nu suggesties te zien krijgt over hoe u het commando moet voltooien terwijl u het typt.

Om er zeker van te zijn dat alle Angular ontwikkelaars op de hoogte zijn van deze verandering, zal de CLI u vragen om autocomplete in te schakelen tijdens de eerste opdrachtuitvoering in Angular 14.

7. Ng Analytics

Het analytics commando van de CLI is een krachtig hulpmiddel waarmee u de analytics instellingen kunt controleren en gedetailleerde informatie kunt afdrukken. Met dit hulpmiddel kunt u uw configuraties effectief communiceren en uw team voorzien van de gegevens die zij nodig hebben om weloverwogen beslissingen te nemen over prioritering.

Ga naar deze link voor meer details –
https://angular.io/cli/analytics

8. Nieuwste primitieven in Angular CDK

De Angular CDK, ook bekend als de Component Dev Kit, biedt een uitgebreide set van tools voor het ontwikkelen van Angular componenten. Met de recente stabiele release van Angular 14, zijn de Dialog en CDK Menu nu beschikbaar. De nieuwe CDK-primitieven maken echter de creatie van meer toegankelijke aangepaste componenten mogelijk.

9. Verbeterde sjabloondiagnose

Angular 13 en eerdere versies hadden geen sjabloondiagnose om ontwikkelaars te waarschuwen voor basisfouten. Als er een probleem zou zijn waardoor de compiler niet zou werken, zou er geen waarschuwing worden gegenereerd en zou de ontwikkeling mislukken. In Angular 14 zijn echter verbeterde templatediagnoses geïntroduceerd om ontwikkelaars te beschermen tegen dergelijke fouten. Als er nu een probleem is, genereert de compiler een waarschuwing, zodat ontwikkelaars het probleem kunnen oplossen voordat het een groter probleem wordt.

10. Angular DevTools is offline en in Firefox beschikbaar

Als u problemen heeft met het debuggen van de Angular applicatie, probeer dan de Angular DevTools extensie in offline modus te gebruiken. De uitbreiding is te vinden onder
Mozilla’s invoegtoepassingen
voor Firefox-gebruikers.

11. Optionele injectoren

Bij het maken van een inbedding view in Angularv14 kun je een optionele injector vermelden via ViewContainerRef.createEmbeddedView en TemplateRef.createEmbeddedView.

12. Ingebouwde verbeteringen

Standaard ondersteunt Angular 14 TypeScript 4.7 en ES2020. Het stelt de CLI in staat korte stukken code in te zetten zonder waarde te verliezen. Men kan direct vanuit de Angular templates linken naar beschermde component leden, dankzij een andere handige Angular 14 feature. Hiermee heeft men meer controle over het publieke API-oppervlak van de herbruikbare componenten.

13. Uitgebreide Ontwikkelaars Diagnostiek

Met behulp van deze functie uit Angular v14 kunt u dieper inzicht krijgen in uw sjablonen en aanbevelingen ontvangen voor mogelijke verbeteringen.

14. Toegankelijkheid paginatitel

Bij het maken van een pagina, testen ontwikkelaars het toevoegen van een paginatitel om de afzonderlijke inhoud te beschrijven. Om het toevoegen van paginatitels gemakkelijker te maken, werd Route.title toegevoegd aan de Angular router in versie 13.2 van het framework.

Met de upgrade van Angular 14 is deze import echter niet meer nodig. Ontwikkelaar Marko Stanimirovi’s bijdrage aan de gemeenschap zal ontwikkelaars helpen bij het configureren van geavanceerde titel logica door het creëren van een unieke “TitleStrategy”. Sterk getypte paginatitels zijn nu eenvoudiger te schrijven dan voorheen!

Hoe installeer je Angular 14?

Door de volgende vlag te gebruiken, kan Angular v14 gemakkelijk worden geïnstalleerd met NPM. Start vervolgens een nieuwe opdrachtregelinterface en voer het volgende commando uit om de meest recente Angular-release te installeren.

-global npm install @angular/cli@next

Met dit commando kunt u snel de Angular CLI versie installeren op uw ontwikkelmachine.

Hoe kunt u upgraden naar Angular 14?

Om uw Angular-versie bij te werken, gaat u naar deze link –
https://update.angular.io/

Afrondend:

De nieuwste Angular-versie zit boordevol functies en verbeteringen die een snelle detectie van fouten en een verbeterde reis voor ontwikkelaars beloven. De voortdurende inspanningen van de gemeenschap om deze ervaring verder te vereenvoudigen maken het een opwindend platform om naar uit te kijken. Met de laatste technologische updates maakt Angular v14 front-end ontwikkeling dynamischer en vloeiender.

Als u als bedrijf van plan bent om dit platform te verkennen voor uw behoeften, kunt u contact met ons opnemen
e
re
om een team van bekwame ontwikkelaars in te huren.