Angular v12- New updates

Anil Verma's photo
Anil Verma

Before going in deep, let's start with some breakfast like things-

Ivy- makes Angular simpler, faster, and easier to maintain(fine-tuning the balance between static checks and dynamic constructs to ensure Angular continues to provide type checking, efficient build-time optimizations, and fast change detection)

View Engine- Compilation and rendering pipeline.

Ivy Everywhere- The approach of converging the Angular ecosystem on Ivy.

Angular v12- New updates In Detail-

Moving Closer to Ivy Everywhere:
1. View Engine has been deprecated
2. Current libraries using View Engine will still work with Ivy apps (no work is required by developers)
How it works—
1. Deprecate View Engine and disable the functionality for creating new applications with it
2. Enable the Ivy library distribution by default for new library projects

Transitioning from Legacy i18n Message IDs-

Currently, there are multiple legacy message id formats being used in our i18n system. These legacy message ids are fragile as problems can arise based on whitespace and the formatting templates and ICU expressions. The new canonical message id format is much more resilient and intuitive.
1. New projects are automatically configured to use the new message ids.
2. Migrate existing projects with existing translations.

Nullish Coalescing-

The nullish coalescing operator (??) has been helping developers write cleaner code in TypeScript classes

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

Has Become

{{ age ?? calculateAge() }}

Style Improvements-

  1. Will now support inline Sass in the styles field of the @Component decorator. Previously, Sass was only available in external resources due to the Angular compiler. To enable this feature in your existing applications add “inlineStyleLanguage”: “scss” to angular.json. Otherwise, it will be available to new projects using SCSS.
  2. Added support for Tailwind CSS(install the tailwindcss package from npm and then initialize Tailwind to create the tailwind.config.js in your project.)
  3. Sass’s new module system- The node-sass package is unmaintained and no longer keeps up with new feature additions to the Sass language.
    Angular CDK and Angular Material have internally adopted Sass’s new module system. If your application uses Angular CDK or Angular Material, you’ll need to make sure you’ve switched from node-sass to the sass npm package.
    Note- When updating to v12 your app will automatically switch to the new Sass API by updating your application with ng update. This command will refactor any Sass @import statements for Angular CDK and Angular Material code over to the new @use API.
Before-

[@import](http://twitter.com/import "Twitter profile for @import") ‘~[@angular/material](http://twitter.com/angular/material "Twitter profile for @angular/material")/theming;  
[@include](http://twitter.com/include "Twitter profile for @include") mat-core();  
$primary: mat-palette($mat-indigo);  
$accent: mat-palette($mat-pink);  
$theme: mat-light-theme((  
 color: (  
 primary: $primary,  
 accent: $accent  
 )  
));  
[@include](http://twitter.com/include "Twitter profile for @include") angular-material-theme($theme);


// AFTER


[@use](http://twitter.com/use "Twitter profile for @use") ‘~[@angular/material](http://twitter.com/angular/material "Twitter profile for @angular/material")’ as mat;  
[@include](http://twitter.com/include "Twitter profile for @include") mat.core();  
$primary: mat.define-palette(palette.$indigo-palette);  
$accent: mat.define-palette(palette.$pink-palette);  
$theme: mat.define-light-theme((  
 color: (  
 primary: $primary,  
 accent: $accent  
 )  
));

The Future of Protractor-

1. Angular team still figuring out the best future for Protractor.
2. Angular Team opted to not include it in new projects and, instead, provide options with popular 3rd party solutions in the Angular CLI

Other Introduced Features-

  1. Running ng build now defaults to production for new v12 projects. It is important to note that this is only for new projects.
  2. Strict mode is enabled by default in the CLI. Strict mode helps catch errors earlier in the development cycle.
  3. The production-ready version of Webpack 5 supports Angular.
    We’re also updating the supported TypeScript version to 4.2
  4. Deprecating support for IE11-Removing support for legacy browsers allows us to focus our efforts on providing modern solutions.
    We are going to start including a new deprecation warning message in Angular v12 — and remove support for IE11 in Angular v13.

Breaking changes in Angular 12

Animation- In Angular version 12 features the DOM components that are presently accurately eliminated when the root view is taken out. If you are utilizing SSR and utilize the application’s HTML for delivery, you will be required to guarantee that you save the HTML to a variable prior to destroying the application.

Common: One of the main Angular 12 improvements is that the strategies for the HttpParams class currently acknowledged string | number | boolean rather than string for the value of a parameter. If you expanded this class in your application, you’ll need to update the signatures of your strategies to mirror these changes.

Form: Previously min and max attributes defined on the
were ignored by Forms module. the presence of these attributes would
trigger min/max validation logic (in case formControl, formControlName
or ngModel directives are also present on a given input) and
corresponding form control status would reflect that.

Platform browser:

XhrFactory has been moved from @angular/normal/http to @angular/normal. 

/// Before  
import {XhrFactory} from ‘[@angular/common](http://twitter.com/angular/common "Twitter profile for @angular/common")/http’;  
/// After  
import {XhrFactory} from ‘[@angular/common](http://twitter.com/angular/common "Twitter profile for @angular/common")’;

Thanks, happy learning…👏👏

AngularJavaScriptReactReact NativeVue.js