Today from e-commerce to online banking, from social media to healthcare, billions of people globally utilize mobile and web applications for nearly everything.
These apps are useful and help us with our daily experiences, providing seamless interfaces and user experiences. However, we never thought that how are these apps created to produce such reliability and security?
A major portion of this credit belongs to extensively used frameworks like Angular, which makes it simple and easy to develop these types of robust apps.
Angular is a development platform established on TypeScript, it is a component-based framework for developing scalable web applications.
It is a set of well-integrated libraries that comprise a broad variety of features, including forms management, client-server communication, routing, and more. Equipped with a set of developer tools to help you build, test, and update your code.
The main purpose of Angular is to make updating as simple as possible so that you can take the advantage of the most advanced developments with fewer efforts.
Angular gives the productivity including scalable infrastructure that supports Google’s largest applications.
The latest awaited upgrade to Google’s popular TypeScript-based web framework is now here and available as a production release i.e. Angular 12.
This upgrade defies the rendering pipeline and legacy View Engine compilation in support of the newer Ivy technology along with other major improvements.
Angular v12 advances the language closer to “Ivy Everywhere,” an approach to transform the Angular ecosystem to the Ivy compiler.
Ivy is defined as a next-generation compilation providing a more accelerated AOT (ahead of time) compilation.
Current libraries utilizing View Engine will however work with Ivy apps, but library authors are recommended to begin transitioning to Ivy.
Considering this release, View Engine is formally deprecated and will be completely excluded in future releases.
Another added change in Angular 12 is the transition away from legacy i18n message IDs. This new message ID format will be more flexible and spontaneous and will minimize any undesirable translation invalidation and retranslation costs in applications where translations do not match.
What’s New in Angular 12 Release?
1) Goodbye to Protractor
This new release of Angular 12 offers new things to learn and preferred to not incorporate protractors in new projects and, rather, give options with modern 3rd party solutions in the Angular CLI.
The angular team is currently working with WebdriverIO, TestCafe, and Cypress to help users choose alternative solutions.
2) Going Closer to IVY Engine
Angular v12 has certainly deprecated the View Engine, it will be removed in a future major release.
Current libraries utilizing View Engine will however work with Ivy apps, although library authors should start focusing to make the transition to Ivy.
This release is focused on the approach “Ivy Everywhere”, to converge the Angular ecosystem on Ivy.
Also, Read – 10 Technology Trends Shaping eCommerce in 2021
3) Nullish Coalescing
This nullish coalescing operator (??) has been supporting developers to write cleaner code in TypeScript classes for a while.
Now with the origin of the Angular 12 version, you can add the power of nullish coalescing to Angular templates, by using nullish coalescing in angular components.
4) Stylish Improvements
Angular components will now support inline Sass in the styles field of the @Component decorator. Earlier, Sass was simply available in external resources because of the Angular compiler.
To allow this feature in your existing applications, add “inlineStyleLanguage”: “scss” to angular.json. Otherwise, it will be available to new projects using SCSS.
If your application utilizes Angular Material or Angular CDK, then you need to make it certain that you have moved from node-sass to the sass npm package.
While updating your app to v12, it will automatically change to the new Sass API by updating your application with ng update.
5) Support Added for Tailwind CSS
You need to install the tailwindcss package from npm. For this, initialize Tailwind to build the tailwind.config.jsin your project. Now, teams will be ready and set to start utilizing Tailwind in Angular.
6) Bye Bye IE11
This update of Angular 12 will now include a new deprecation warning message in Angular v12 and will finally remove support for IE11 in Angular v13.
7) Compilation and Build Updates
Running ng build will now set the production environment as defaults. Now Strict mode will be enabled by default in the CLI. The Ivy-based Language Service is shifting from opt-in to on by default.
This Language Service serves to increase your productivity while developing apps by presenting excellent features like navigation inside Angular templates, code completion, errors, and hints.
A production-ready variant of Webpack 5 now supports Angular v12.
Some Extra Features and Improvements in the Version 12 Release
- Strict mode is approved by default in the CLI. It assists in catching errors earlier in the developing cycle.
- The Ivy-based Language Service is shifting from choose-in to on by default. This enhances productivity while developing apps.
- Earlier experimental support was added for Webpack 5. Presently, they have announced the release of a production-ready version of Webpack 5.
- It is also updating the supported TypeScript version to 4.2.
Also, Read – 10 YouTube Stats Every Video Marketer Should Know in 2021
Conclusion
In this article, we have explored some new impressive features of Angular 12. Ivy is moving forward, and positively, you will be now less annoyed by ngcc, as the ecosystem migrates.
The Angular team has been working hard to serve the community in many areas.
This release also highlights a production-ready version of Webpack 5 support. And there are several other remarkable changes with this release, so check it out and update it now. That’s it for now. Keep developing great apps and enjoy!
