What exactly are the new Angular 12 features?
A new approach: Ivy Everywhere
A faster and simpler compilation software
Ivy’s model enables the application to process only one component at any time, without having to manage or deal with dependencies when generating an output. The compilation process is once again much faster, and debugging has been significantly simplified for the user – which is now even more significant considering that this compiler provides many features on the global object ng. When the application is run in debug mode, developers are able to “call” various methods, access instances as well as update the status of different components. In the case a user receives an error message in Ivy, they are able to obtain a more in-depth stack trace with precise links to defective or non-functioning parts within the source code.
Following the launch of this new compiler, users will be advised to delete its predecessor View Engine, as soon as Angular 13 is released. Current View Engine-based libraries are being maintained however, authors are being encouraged to begin their transition towards using the new Ivy software.
Developer’s expected features for Angular 12
Community contributions to Angular 12
Angular 12 comprises many features which have been designed by developers over a long period of time. Some of them have been added by the development community, such as:
The consideration of minimum and maximum attributes within reactive forms.
The implementation of a “context” option so that users are able to configure interceptors in the http client.
Better use of NgZone in order to avoid unnecessary navigational error warnings.
Modification of the APP_INITIALISER injection token so that it works with observables.
Alternative solutions to Protactor software
Protactor is an end-to-end testing framework (E2E or in French – from end to end) developed by Angular and AngularJS. It functions as a solution integrator which combines technologies such as Selenium, WebPilot, Jasmine etc. The objective of the framework is not only to test applications, but also to enable automated regression tests.
Development teams working on Angular 12 therefore have decided to no longer implement Protactor into their newly developed projects – instead, they ae offering alternative solutions/software which can be integrated into the Angular CLI such as:
Format improvements/developments for Angular 12
The null coalescence operator
The Angular 12 null coalescence operator (finally) is replacing syntax present in TypeScript since version 3.7. The “null coalescing operator” defines a default value in the case a variable is null or undefined. Previously in other versions of Angular, users would have had to type something similar to:
let x = test ! == null && test! == undefined? toto : true
The syntax has now been significantly simplified:
let x = test ?? true;
Sass compatibility for modifying stylesheets online
Previously, Angular had supported Sass (the dynamic stylesheet generation language) for a very long period of time however, the programming language was only compatible with external stylesheets. With Angular 12, users are now able to operate Sass with online component styles. The use of Sass on a single size component enables users/developers to design and produce all components within a single file as is already the case in React JS. In order to enable this feature, simply add this instruction to existing applications:
“inlineStyleLanguage” : “scss”
Implementation of WebPack 5
Angular 11 had also previously introduced experimental support for WebPack 5. With the new version, this additional feature has been implemented and enables users to take advantage of all bundler improvements in terms of:
Building performance thanks to continuous and persistent caching.
Bundle sizes with better tree shaking capabilities and improved code generation.
Web platform compatibility for internal structure cleaning.
Integration of TypeScript 4.2
The support of TypeScript 4.2 in the Angular 12 CLI also now enables developers to implement all of its new features, such as:
· Smarter storage for type aliases.
· Stricter controls for the ln operator.
· Improved checks on unsigned functions.
· Better tuple management.
All of these developments and innovations are accompanied by appropriate documentation, guides and tutorials to assist developers. Updating to Angular 12 is done very simply by entering the following instruction into the command line:
ng update @angular/core@12 @angular/cli@12
Angular also provides users with a complete guide for updates. This can be accessed by clicking on the following link:
Useful sources and links:
Complete list of new features in Angular 12 (GitHub): https://github.com/angular/angular/blob/master/CHANGELOG.md