This content originally appeared on Telerik Blogs and was authored by Nwose Lotanna Victor
Let’s take a look at some of the new features of Angular in its version 12 release.
Angular, Google’s JavaScript (TypeScript) framework for building web applications for mobile or desktop, has over 73,000 stars on GitHub and is maintained by the Angular team at Google and a host of community members and organizations. Angular Version 12 was released on the 12th of May 2021—how cool is that?
This update focuses on solidifying Ivy with the Ivy Everywhere mandate and most of the new features are geared toward that.
Ivy Everywhere
The first thing to note is that the View Engine, which was Angular’s default renderer before Ivy, is now being deprecated officially. This makes the Ivy the new Angular renderer for all new Angular projects starting from version 9.
What this means is that in the next major release of Angular the View Engine will be removed from Angular. Current libraries using the View Engine still work with Ivy apps seamlessly, but authors who own these libraries are advised to start making transition plans.
In v12, we’ll deprecate our legacy compilation and rendering pipeline called View Engine. This change will not require any action by developers. Libraries dependent on View Engine will continue to work as expected via our compatibility compiler
ngcc. – Angular
How Do I Upgrade to Angular Version 12?
As always, the best way to upgrade your project from one version to another version is to check the official Angular update guide in the link here. If you already use version 11, you can just use this command in your terminal to update a project to 12:
ng update @angular/cli @angular/core
and globally you can run this command:
npm install -g @angular/cli
Goodbye Protractor
An RFC was shared by Angular to determine what the future of Protractor should be moving forward as a testing tool. Angular, as you might know already, works well with other tools like Cypress, WebdriverIO and TestCafe, and the team is still reviewing thoughts and comments from the Angular community.
However, a decision has been made in the meantime not to include Protractor in new Angular projects as you generate them moving forward. The team is still going through reviews, and more news on the final decision on Protractor is expected soon, probably in the next update.
Learning Angular is Even Easier
One of the things the Angular team does is to ensure that, with every version, learning Angular is easier and easier as you go. The developer learning experience for Angular is a top priority for them, and so the Angular docs are always being worked on. There is a content projection guide added to the docs now, available here, with cool examples and even more content in the docs coming soon.
The team is also making sure communication is a two-way street, ensuring that members of the Angular community can be part of this easy learning curve path. To that end, there is now a contributor’s guide on the docs so that anyone in the Angular community—like you reading this—can suggest improvements to the docs. You can have a look here, and, if you do have any suggestions, this is an easy way to reach the team.
One of the innovations that has come from the docs improvement is the new guides and videos section of the docs. This is super cool and you’ll have to see for yourself—the error references show error messages and the video breakdown of what to do to solve them. This is a first for a framework doc that I have seen personally, and it is pretty cool.
Deprecating Support for IE11
Internet Explorer as we know it is in its last days, and support for IE has not been easy while building for the web. Earlier in the year, we saw Microsoft 365 apps like Teams discontinue support for IE11 and how the Microsoft team is pulling IE entirely out of its ecosystem one year from now.
Angular is also leaning the same direction of removing support for legacy browsers like Internet Explorer. A new deprecation warning message will now be included for IE11 starting from this new version of Angular. Support will be removed entirely by version 13.
Improvements Around Styles
A few key improvements were made around styling in Angular. One of them is that Angular now supports inline SASS in the styles field of your component decorator without having to add any inlineStyleLanguage option to your angular.json file.
Support for Tailwind CSS also shipped with this version. Seeing how popular the Tailwind community is getting, this is a brilliant move by the Angular team. You can start by downloading the package from npm here and then initializing the file in your project.
Nullish Coalescing Is Here Now!
This new version finally gives us the nullish coalescing operator (??) so we can write cleaner code for conditionals. A good example is something like this:
{{age !== null && age !== undefined ? age : calculateAge() }}Which turns into something much cleaner:
{{ age ?? calculateAge() }}Update your Angular app and you can start using this operator right away to simplify your conditional statements. This TypeScript operator has been out for a while now, and getting it into Angular makes it even more fun and usable for thousands of developers who already use Angular.
Transitioning From Legacy i18n Message IDs
This new version of Angular ships with migrating from legacy i8n message ID formats to new ones. The old ones have had issues repeatedly around white spacing, ICU expressions and formatting templates. The new one is way more intuitive and canonical, and so reduces invalidations that come from wrong translations or retranslations that do not match things like white spaces. These changes have taken effect from version 11, and now tooling has been built to migrate existing projects too.
Conclusion
This has been an overview of the new features that shipped with the latest version of Angular, 12.0. For me, the nullish operator is my favorite feature, and the cool videos now available in the Angular docs are a close second. What are yours?
This content originally appeared on Telerik Blogs and was authored by Nwose Lotanna Victor
Nwose Lotanna Victor | Sciencx (2021-06-02T09:30:02+00:00) What’s New in Angular 12. Retrieved from https://www.scien.cx/2021/06/02/whats-new-in-angular-12/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.