The newest version of Google’s famous TypeScript-based web framework Angular v12 was published on May 12th, 2021, and is now available for production use. The upgrade replaces the earlier View Engine assemblage and delivery pipeline with the more contemporary Ivy technology.
After several beta releases, Angular version 12 is now available on GitHub. Angular 12 gets closer to realising the structure’s “Ivy all over” concept. Ivy is a cutting-edge data collection and delivery pipeline that enables for speedier AOT compilation, according to the company. According to the Angular team, View Engine will be removed in a future version. Current View Engine libraries will function with Ivy apps in any situation. Library creators, on the other hand, are advised to consider transitioning to Ivy. You can always hire dedicated developers to work on your single page applications developed in angular to get all the benefits offered in the latest development of Angular 12.
On November 11, the legacy version of Angular 11 was released, including improvements to regular line composition and bug fixes to ensure TestBed doesn’t start up after the override provider; it also includes revisions to the stage’s structure, CLI, and components. Similar improvements are made in the newest version of angular, with the addition of stricter types and improved router efficiency.
Aside from the router performance improvements, there are a few other new enhancements in the system, such as stricter sorting for DatePipe and number lines to prevent misuses such as passing an array at an accumulated time. Let’s take a look at what’s new in Angular 12 together.
In Angular version 12, the View Engine has been discontinued. The community has been collaborating on merging the Angular ecosystem atop Ivy throughout the course of regular releases naming this method as “Ivy Everywhere”. Since the View Engine is slowly phasing out, it will be eliminated in future significant releases as well.
Although current libraries use View Engine, which will work with Ivy apps (no work from designers is required), library authors should consider making the switch to Ivy. A custom web application development company can help you in modifying your current web applications or even develop new ones based on the latest developments in the Angular framework.
Migrating from legacy i18n message IDs
In the i18n framework, there are currently many historical message-id designs in use. These old message-ids are delicate because whitespace, organising formats, and ICU expressions might cause problems. The Angular team is shifting away from them to address this issue. The new standard message-id design is far more durable and organic. In applications whose translations don’t synchronise owing to whitespace changes, for example, this option will reduce unnecessary translation invalidation and retranslation costs.
New tasks are naturally intended to use the new message ids with Angular version 11, and they now have the ability to migrate previous initiatives with existing translations.
Protractor?
The team has been collaborating with the community to determine the Protractor’s ultimate fate. They are now examining the input provided in the RFC and determining Protractor’s best future. The team has decided to remove it from new tasks and in the Angular CLI, provide alternatives with well-known third-party solutions.
Nullish Coalescing
For a long time, the nullish coalescing operator (??) has aided developers in writing cleaner code in TypeScript classes. Developers can now use nullish coalescing in Angular templates in version 12!
Engineers may now use the improved syntax structure in templates to enhance complicated conditionals.
Improvements in styling
Components available in Angular v12 will now allow inline Sass in the @Component decorator’s styles field. Because of the Angular compiler, Sass was exclusively available in external resources. Simply add “inlineStyleLanguage”: “scss” to angular.json to enable this component in your existing apps. Otherwise, new SCSS-based tasks will be able to use it.
Internally, Angular CDK and Angular Material are using Sass’ new module framework. Make sure you’ve switched from node-sass to the sass npm package, If you’re using Angular Material or Angular CDK in your applications. The node-sass package is no longer updated, and therefore is no longer aware of new Sass language features.
By refreshing applications using ng update, it will shift to the new Sass API while upgrading your application to the most recent version of Angular.
Support from the Community
The Angular team has been working aggressively making improvements to the structure to improve the Angular experience for everyone from Angular versions 6,7,8, and 9. The angular team is also working hard to improve the learning experience for developers. They’ve made some big enhancements to their documentation as part of Angular 12’s new features. They’ve also revised the angular.io contributor’s guide, which will aid anyone looking to enhance the documentation.
Strict by default
As part of Angular 12, the strict mode of Angular has now been enabled by default in the CLI. Strict mode enhances maintainability and helps you detect flaws early in the development process. Furthermore, strict mode apps are easier to statically analyse, and they can aid the ng update command in refactoring code more safely and precisely when upgrading to the newest Angular versions.
Production build by default
Using the ng build command has gotten us closer to a development build up until this point. ng build will default to a production build in Angular version 12. It should, in theory, let a few groups avoid needlessly developing and transporting development builds to production environments.
ng API improvements
An upgraded aspect of Angular 12 is the ng troubleshooting API, which we can employ from the program’s dev tool. A few functions, such as getDirectiveMetadata and esetProfiler for debugging APIs for structural analysis of applications, have been introduced. To retrieve data about components and directives, just use getDirectiveMetadata . Template creation durations, lifecycle hooks processing, and template modifications may all be tracked with the esetProfiler. The API can also provide information about how applications work in real time.
Angular Universal
Inline essential CSS, which is by default in the nguniversal/common directory, is one of the primary enhancements of the Angular 12 feature. In the ssr-dev-server builder, the Angular universal now supports proxy configuration. The schematics have also been changed to use defaultConfiguration. This version includes Clover, an SSR engine, as well as a new engine that appears to be promising. The new engine aims to make things easier by generating application shells without requiring an additional build and eliminating the need for multiple builds for SSR/prerender. TLS is also supported for the dev-server in this version.
Typescript 4.2
The support for Typescript 4.2 is one of the most significant new features in Angular 12. On February 23rd, the stable version was released. This edition includes several new and interesting features as well as some significant modifications.
Webpack 5.37 support
Webpack 5 functionality, which was introduced in Angular 11, has been made production-ready in Angular 12. Webpack is an important aspect of the Angular CLI, since it affects bundle size, build execution, and so on. Webpack 5 is a major release, which is exactly what it should be. It includes a number of game-changing updates and features. Webpack 5 helps in improving build performance, Web platform compatibility, long-term caching, and improved code generation.
Other minor updates in Angular 12
Component style resource transformation is supported by the compiler.
When starting an application with ng serve —hmr, Angular 11 features allow HMR, however Angular 12 has improved support for Hot Module Replacement (HMR)
Fonts will automatically inline, this performance update improves the performance of the first contentful paint (FCP), which is enabled by default in applications created with version 12.
Ng package no longer generates minified UMDs.
Component tests harnesses for testing Angular Material components were improved in Angular 9. Harnesses for all of the components have now been added by the team!
As a result of improved CLI readability, logging and reporting have improved.
The roadmap for Angular 12 has been revised to bring developers up to date on the Angular team’s current objectives.
The default Ivy-based Language Service is being phased out in favour of an opt-in service.
TypeScript support has been updated to version 4.2, and angular 12.x now requires nodejs v12. 14.1 or above, or nodejs 14.0.
The compiler-cli now has a context option that allows you to give arbitrary data in a type-safe manner.
In the router, additional fine-tuned control has been added.
LinkActiveOptions
Permission to implement custom router outlets
By deleting legacy code, we may reduce the amount of framework overhead.
Conclusion:
Angular 12 brings with it a number of enhancements for performance, language service, form validation and much more. The deprecation of the View engine and adoption of the Ivy ecosystem is one of the major enhancements in version 12. Additionally Angular 12 also offers Nullish Coalescing, improved styling, and a move away from Legacy i18n Message IDs, among other essential improvements that make this version reliable. Angular 12 also includes a number of bug fixes for the compiler, core, router, language service, and other components. The latest stable version of Angular appears to be here to stay for a long time, but we have great expectations for what new the Angular team may surprise us in the coming days.
If you are a business looking to develop single page applications that are fast and reliable, hire angular developers to get in touch with us.
Responsible for developing and managing web presence, Sarah has been associated with eLuminous Technologies for 7+ years. Strategic and innovative with a passion for Content Marketing and enhancing brand awareness. Administered all business marketing operations and advertisement campaigns that eventually increased web traffic. She works under the motto “Think like a Publisher, not a Marketer.”
