What is New in Angular 12

Hello All, in this quarter (Q3 2022), I set my learning goal to learn Angular 12 because of the project requirement. I completed the course with an assignment and then I also checked the Angular official blog site to understand what is new in Angular 12. I previously worked on older versions of angular and hence I could understand them easily. I am writing this blog based on the official angular blog details and with my analysis on related areas, so that it will be easy to understand the changes in simple words. So, let's start. I have added the details pointwise as per my understanding below,

• Big Step in Shifting from View Engine -> Ivy Ivy and View Engine are basically the compilers. In Angular, the compiler compiles the Angular code into JavaScript (The Browser understanding scripting language). Ivy Compiler was introduced in Angular from Angular version 9 with default Engine and before that, only View Engine was used. To make the system faster, Angular has deprecated the View Engine, and this will be completely removed in future major releases. Now, what is Depreciation? So, there are two similar words ‘Deprecate’ and ‘Sunset’. Deprecation means the things will work with it, but you will get the warning for it. And Sunset means it is no longer available and you cannot use it. So, View Engine is now deprecated, and they are moving closer to the Ivy compiler. The advantage of Ivy is, it doesn’t compile the previously compiled code again & again unless there is any change and it also reduces the bundle size, so it reduces the compilation time and run time as well due to less bundle size. Also, AOT (ahead of time) compiler is enabled in Ivy by default which helps fixing the errors on time.

• Improvement in Styling The major improvement in the styling in Angular 12 is Support of inline Sass. Earlier if you wanted to use Sass, you needed to use it externally, but now it is available in @component decorator. Sass is Syntactically Awesome Style Sheet and it is an extension to the normal CSS. Also, the latest version of Angular now supports Tailwind CSS. Tailwind CSS makes it quicker to write and maintain the code of your application and it uses the utility-first framework, which means it provides a low-level utility classes to build the design for example ‘bg-yellow-200’ will replace ‘background-color: rgba(229, 231, 235, 1);’, ‘m-4’ is replacement for ‘margin: 1rem;’ and so on.

• Protector – Yes or No This is not an actual change, but this is just a thought process Angular has kept in front of the community about whether the Protector (which is an end-to-end testing framework) should be available in future or not because of it’s less use. So, after review and analysis Angular will take decision in upcoming versions whether to keep or remove the Protector framework

• Nullish Coalescing operator support The Nullish Coalescing operator (??) was widely used in Typescript and it was very helpful to the developer to minimize the code to check null/undefined/blank values. Now the same operator is available in Angular Version 12. For Example,

Old Code
{{age !== null && age !== undefined ? age : calculateAge() }}

New Code
{{ age ?? calculateAge() }}

• Transition from old i18n Message IDs I18n or Internationalization is the process of making your web application compatible with rendering text in multiple different languages. There were some problems using this i18n message ids and hence Angular is replacing it with the new canonical message ids which are more reliable and error free and this format will reduce the unnecessary translation invalidation.

• Deprecating support of IE 11 Angular keeps themselves up to date. Hence removing support for old browsers, allow Angular to focus on providing modern solutions and better support to users. So, in Angular 12 the deprecated warning message is included, and the complete support is removed in Angular 13

So, these are some major changes along with some other changes in Documentation, Strict Mode in CLI, Webpack5 Support, ng build command for production etc. are available now in Angular 12 and there are more available in current latest versions of Angular. Many more changes are on the way in upcoming versions so that the development is more and more exciting!

Happy Reading!