What exactly are the new Angular 12 features?
Angular 12 – the latest version of Google’s popular TypeScript-based web framework – was released on May 12 this year. The Angular development team announced that they have worked hard to provide a service which serves the community in a diverse range of areas. After releasing more than 10 beta versions of the software, the Angular team have finally released the complete version of the update. The JavaScript framework aims to be more efficient through a differently structured compilation mode as well as multiple additional features and patches. Continue reading on and discover the principal features of the Angular 12 update.
A new approach: Ivy Everywhere
A faster and simpler compilation software
Ivy is the name of Angular’s next-gen compilation and rendering pipeline: introduced as early as version 6 (beta), today, it is expected that the newest version will not require users to depend on old compiler software View Engine, in order for the update to function properly. According to Angular’s development teams, Ivy is “smaller, simpler and faster”. According to Google, using the new compiler will enable individuals to reduce bundle sizes by 40%. Ivy has been structured on the principle of locality: in other words, it means that with the new software, only one file is compiled at any one time. In addition to this, it has also been structured based on a process called “tree shaking” – this term is well known in JavaScript for removing pieces of code which are considered inactive or “dead”. For the new compiler, only source code, which is necessary for Angular to run properly, will be implemented.
Ivy equally offers an AOT compilation version (Ahead of Time or “in advance”) which converts Angular HTML and TypeScript code into a JavaScript compatible version during the construction phase. This translation/conversion takes place before the browser runs the script. Once completed, a precompiled version of the application is downloaded which provides the user with a much faster rendering of the application.
Simpler debugging
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.
However, Protactor was created by Angular in 2013. At the time, WebDriver APIs were not yet standardised and E2E tests were complex for users to be able to implement them. The multitude of call-back functions in JavaScript made it difficult for users to manage and write asynchronous operations. Protactor eventually solved this issue by coordinating the planning and execution of commands which were operating in a queue, by using an object called Control Flow.
But since then, the JavaScript standards tools have evolved over time – making Protactor even more redundant. From ES2017 (the standard on which JavaScript is structured on), the implementation of async/await has facilitated the management of promises: objects which represent the completion or failure of an asynchronous operation. The problem that arises, is that async/await is fundamentally incompatible with Control Flow. In addition, the majority of Protactor features only work with AngularJS. With the removal of Control Flow, the testing framework loses a significant amount of its relevance within the Angular community.
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:
Cypress
WebdriverIO
TestCafe
Format improvements/developments for Angular 12
This new version of the JavaScript framework also includes many alterations to syntax and its functionality.
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:
Have you already installed and tested Angular 12 on your devices? If so, what do you think about the newest developments and features of the JavaScript framework? Don’t hesitate to leave us your thoughts and feedback on the section of our IT forum which is dedicated to IT languages.
Useful sources and links:
Complete list of new features in Angular 12 (GitHub): https://github.com/angular/angular/blob/master/CHANGELOG.md
Comment
Log in or create your account to react to the article.