Angular 12.2 promises a speed boost

Angular 12.2 is out with some exciting new features. The team released this version on the 5th of August 2021. Looking at the features of Angular 12 earlier this year we can say that v12.2  is a smaller version with less but significant new releases. Version 12.2 has brought major changes to the core and compiler of the framework. Let's see what those are.

Feature of Angular v12.2

Forms

Among the new features of Angular 12.2, there are some updates in the core of the framework, like the form. The form in Angular version 12.2 has attracted a lot of attention with the addition of the addValidators, hasValidator, and removeValidators methods. As you can expect, they permit adding and eliminating a validator or a variety of validators to/from a structure control, group, or array.

As of now, you needed to eliminate all validators and reset them when you needed to add/eliminate one, which was not great for genuinely normal use-cases like making a field required relying upon a condition:

// if auto-refresh is enabled, then the frequency is required

{
  if (isAutoRefreshEnabled) {
    this.autoRefreshFrequencyCtrl.setValidators([frequencyValidator, Validators.required]);
  } else {
    this.autoRefreshFrequencyCtrl.setValidators(frequencyValidator);
  }
  this.autoRefreshFrequencyCtrl.updateValueAndValidity();
});

With Angular new version 12.2, you can simplify such code:

{
  if (isAutoRefreshEnabled) {
    this.autoRefreshFrequencyCtrl.addValidators(Validators.required);
  } else {
    this.autoRefreshFrequencyCtrl.removeValidators(Validators.required);
  }
  this.autoRefreshFrequencyCtrl.updateValueAndValidity();
});

These techniques have a form for offbeat validators with hasAsyncValidator, addAsyncValidators and removeAsyncValidators. Note that the hasValidator/hasAsyncValidator techniques works just with a reference to the specific validator function, so this doesn't work for instance:

this.autoRefreshFrequencyCtrl = new FormControl(10, Validators.min(5));
this.autoRefreshFrequencyCtrl.hasValidator(Validators.min(5)) 
// returns false

whereas this works:

const frequencyValidator = Validators.min(5);
this.autoRefreshFrequencyCtrl = new FormControl(10, frequencyValidator);
this.autoRefreshFrequencyCtrl.hasValidator(frequencyValidator) 
// returns true

The same goes for removeValidators/removeAsyncValidators as they utilize hasValidator/hasAsyncValidator within the structure.

Templates

In the new Angular 12.2 the compiler supports underscore as separator for numbers in format, as ES2021 is considered in JavaScript. You would now be able to write:

{{ 1_000_000 }}

Router

With Angular version 12.2 you can possibly provide a RouteReuseStrategy through the DI to test the module of the router. Initially before this release you could only use imperative instantiation.

You  would now be able to write: 

TestBed.configureTestingModule({
  imports: [RouterTestingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy }]
});

Split two-way binding checks

Another Angular 12.2 feature is that by using strictTemplates, regular two-way data-binding does not pass type-check anymore. From Angular 12.2 onwards we don't need to retain the data the sort of the value alloted through (xyzChange)="prop = assignedValue and rather believe it to be the generic Event type.

Angular CLI 12.2

Faster ng build with esbuild

One of the new features of Angular 12.2 is the new CLI that leverages esbuild that speeds up your compilation and builds your angular application. The Angular CLI 12.2 uses esbuild for optimizing built code, in collaboration with terser. However fast esbuild is, it does not cover all the optimization like terser. Now that the CLI is optimized, the code runs in two phases, one on esbuild and the other on terser on the optimized code from esbuild.

The esbuild is also used for optimizing the CSS of component stylesheets. Since esbuild is faster than CSSNano, it generates smaller outputs. Although the global stylesheets continue to be optimized, it might migrate to esbuild in the future as well if it is supported by sourcecap.

Sass deprecation warnings

In case you're utilizing the scss style, you might have seen that dart-sass (that the CLI utilizes in the engine) presently shows alerts for Sass documents that are utilizing the deprecated/operator. 

Furthermore, it does yield a ton of alerts.The community is using Font Awesome in certain projects, and the CLI is logging so many lines. Another good news is that CLI v12.2  shrouds the warning for third party stylesheets. You can in any case see them with the - verbose flag.

Upgrades to angular 12.2

If you want to upgrade to 12.2.0 without hassle (or to any other version, by the way), I have created a Github project to help: angular-cli-diff. Pick the version you're presently utilizing (12.0.0 for instance), and the objective adaptation (12.2.0 for instance), and it gives you a diff of all records made by the CLI: angular-cli-diff/compare/12.0.0…12.2.0. It tends to be incredible assistance alongside the official ng update @angular/core @angular/CLI command.

Conclusion:

The angular development team is expecting the release of version 13 near the end of the year and is supposed to include a few things that every Angular developer has been waiting for like: typed forms, pre-compiled for Ivy, Angular packages and so much more. Stick around for some more time!