Wat is er nieuw in Angular 12?

Onlangs werd de nieuwste versie van Angular gereleased; Angular 12. Wij geven je even de belangrijkste zaken mee die je moet weten voor je overschakelt op versie 12.

Zoals je wellicht al weet werd Angular Ivy voor het eerst geïntroduceerd bij versie 9 en het werd meteen een game-changer. Angular zet deze reis dus voort met deze next-generation compilatie- en renderingspipeline. Bovendien zetten ze een nieuwe grote stap door View Engine af te schaffen.

View Engine was de compilatie pipeline die gebruikt werd in eerdere versies van Angular en deze zal zelfs volledig verwijderd worden bij de volgende grote release.  Als developers hoef je je hier echter niet veel zorgen over te maken, aangezien libraries die afhankelijk zijn van View Engine door Ivy worden ondersteund. Zo niet, dan kan je ook de compatibiliteitscompiler ngcc van Angular gebruiken. Maar als je een beheerder bent van libraries is het hoog tijd om naar Ivy over te schakelen.

Protractor werd in 2013 geïntroduceerd en werd veel gebruikt voor E2E-testdoeleinden. Maar naarmate de tijd verstreek, veranderde het JavaScript-ecosysteem aanzienlijk en werden verschillende alternatieven voor E2E-testen geïntroduceerd met interessante functies.

In april van dit jaar opende het Angular-team een ​​GitHub-forum om van de ontwikkelaars te horen over de E2E-frameworks die ze gebruiken. Met die feedback heeft het Angular-team besloten om de ondersteuning voor Protractor stop te zetten en over te stappen op oplossingen van derden in de Angular CLI. Volgens de release notes werkt Angular momenteel samen met Cypress, WebdriverIO en TestCafe met betrekking tot de migraties.

Dus als je Protractor gebruikt voor E2E-testen in je project, moet je overstappen op een nieuw E2E-framework. Maar er is geen reden tot paniek aangezien Angular alle migratiehandleidingen voorziet die je hiervoor nodig hebt.

Nulish Coalescing, die de ?? operator gebruikt, wordt veel toegepast in Typescript. Het helpt om propere en nettere code te schrijven.

“Met de versie 12-update ondersteunt Angular null-coalescing wat je kan gebruiken om voorwaardelijke instructies in Angular-templates te vereenvoudigen 👇”

{{total !== null && total!== undefined ? total: calculateHeight() }}//bocomes{{}total ?? calculateTotal()}

Er zijn een heel pak boeiende stijlverbeteringen geïntroduceerd in Angular 12:

• Angular componenten ondersteunen nu inline Sass. Voorheen was Sass alleen beschikbaar in externe resources. Je kan deze functie inschakelen door "inlineStyleLanguage": "scss" toe te voegen aan het angular.json-bestand.

• Tailwind CSS wordt ondersteund (vanaf v11.2)

• Angular CDK en Angular Material hebben intern het nieuwe modulesysteem van Sass overgenomen.

• Angular CDK en Angular Material leggen een nieuw Sass API surface bloot dat is ontworpen voor gebruik met de nieuwe @use syntax.

• Als je upgrade van een vorige versie, zal ng update jouw project automatisch overschakelen naar de nieuwe Sass API.

Los van bovenstaande verbeteringen zijn er in Angular 12 nog tal van interessante veranderingen die de algehele gebruikservaring voor de developer verbetert:

• de ng build opdracht is nu standaard ingesteld op productie. Dit zal zeker helpen om onbedoelde implementaties te voorkomen.

• Ondersteuning voor Internet Explorer 11 is verouderd en wordt verwijderd in Angular 13. Zo kunnen ze betere oplossingen bieden voor nieuwe browsers.

• In eerdere versies was de op Ivy gebaseerde codetaal nog een opt-in-functie. Met v12 is dit nu de standaard. Het Angular-team is ervan overtuigd dat deze upgrade de productiviteit van de developers zal verbeteren door hints en fouten te aan te geven in Angular-templates.

• Production-ready ondersteuning voor Webpack 5.

• Ondersteuningvoor TypeScript 4.2

• Strict mode wordt nu standaard ingeschakeld.

Hiermee heb je al een mooi overzicht van de belangrijkste veranderingen in Angular. Maar dit is uiteraard slechts een klein deel van de functies die je in Angular 12 hebt, Voor meer details verdiep je je best zelf in hun hun blog.

Nog even dit: Als je je projecten wilt bijwerken naar Angular 12, dan moet je slechts de volgende opdracht uit te voeren:

ng update @angular/cli @angular/core

vertaling en adaptatie van een post op Medium door Chameera Dulanga