Angular v12 is released on 12th May 2021. So we are going to learn how we can update our previous CLI version to v12 and some important features of angular v12.
Lets see how to update the old CLI version into v12
For checking the previous version open the command prompt and type –
so It will give the details like below –
Now update the angular version by below command –
It will give the below detail.
After this you are ready to create angular v12 application. Now we will look into some important updates of angular v12 and what are features provided.
Features of Angular V12 :
Lets see each feature one by one.
1. Nullish coalescing operator : One of the main feature of anuglar v12 is nullish coalescing operator (??) can be used in the templates. Previously it was used only in typescript classes.
Instead of checking multiple conditions(for null & undefined) , you can write the code in concise form using ?? Nullish coalescing operator.
2. Inline Saas : Previously, Sass was only available in external resources due to the Angular compiler. But now in v12 , Angular components will now support inline Sass in the stylesfield of the @Component decorator. This feature will be available to new projects using SCSS.
If you want to enable this feature for existing project then you need to add below flag in angular.json file.
3. Strict Mode : Now Strict mode of angular is enabled by default in the CLI. Strict mode helps catch errors earlier in the development cycle and improves maintainability and assists you with catching the bugs easily.
Run the following command when you want to create a new app within an existing non-strict workspace in the strict mode:
4. Styling Improvement : In the v11.2 release, added support for Tailwind CSS. To get started using it in projects: install the tailwindcss package from npm and then initialize Tailwind to create the tailwind.config.js in your project. Now, teams are ready to start using Tailwind in Angular.
Angular CDK and Angular Material have internally using Saas’s new mdoule now. If your application uses Angular CDK or Angular Material, you’ll need to make sure you’ve switched from node-sass to the sass pacakge. The node-sass package is unmaintained and no longer keeps up with new feature additions to the Sass language.
5. Transitioning from i18n legecy message id’s : In i18n system there are multiple legacy message id formats being used.These legacy message ids are fragile as problems can arise based on whitespace and the formatting templates and ICU expressions.To solve this problem new canonical message id format is much more resilient and intuitive. This format will reduce the unnecessary translation invalidation and associated retranslation cost in applications where translations do not match due to whitespace changes.
6. Deprecating support for IE11 : Eliminating support for legacy browsers permits us to focus on giving modern solutions and better help to engineers and clients. The team has also included a new deprecation warning message as another Angular 12 feature — and eliminate support for IE11 in Angular v13.
7. View Engine is Deprecated : In angular view engine is deprecated and it will be removed in any major release. Eliminating support for legacy browsers permits us to focus on giving modern solutions and better help to engineers and clients. The team has also included a new deprecation warning message as another Angular v12 feature and eliminate support for IE11 in Angular v13.
8. Protractor framework will not longer available in new project : The Angular team has been working with the community to determine the future of Protractor. They have opted to not include it in new projects and instead, provide options with popular 3rd party solutions in the Angular CLI.
Conclusion : Angular v12 is released with lots of improvement to its performance, compiler, forms , view engine deprecation, Nullish coalescing operator and many more. There are many more features and bug fixes are done in angular v12.
