5 Revere Drive, Northbrook, Illinois, 60062-150, United States of America          +1-312-436-0278          [email protected]

Angular 9

First time angular was Launched in 2009, Angular has finally released its latest version, Angular 9 on February 7th, 2020. Angular is the most popular Javascript  framework, mainly responsible for developing front-end desktop web apps or single-page applications.

What’s is angular ?

A framework for building web and mobile client-side apps with super-language of JavaScript called TypeScript.

what’s new in Angular 9?

In this new update all the existing drawbacks have been modified. Lot of factors have affected the previous versions of Angular. For example, large bundle files that have negatively impacted download times, application performance and user experience.So in angular 9 they have solve large size of bundler and introduce lvy.

New Features of Angular 9

Default lvy compiler:

Angular 9 compilling and rendering engine is known as lvy.

Benefits of Using lvy:

  • Smaller bundle size
  • Very helpful when it come to debugging
  • Brings faster compilations

In the old version of angular view engine was used and  bundle size reduced by very larged but  this ivy remark able used helping angular overcome with bundle size.In old versions of Angular, we had to opt-in to Ivy. In version 9, we instead have to opt-out of Ivy if we want to fall back to View Engine.

// tsconfig.json
{

  “angularCompilerOptions “: {

    “enableIvy “: false

  }

}// polyfills.ts

// Only  used in multilingual Ivy applications

// import ‘@angular/localize/ init’;

Opting out of Ivy to fall back to View Engine.

Angular 9 AOT:

Angular AOT compiles your code’s HTML and Typescript into JavaScript before the browser downloads and executes it

Benefits of  AOT:

  • Rendering becomes faster
  • AOT inline all the external HTML and CSS
  • Helps in rendering the size of the angular framework
  • Help you find templates error during the build process
  • Reductions in injection attacks

Enables The AOT compiler On By default:

In the new IVY architecture, we see a change in the compiler’s performance. This means that the AOT builds will be faster. The change in the compiler and runtime , would no longer require entryComponentAnd ng serve. These components in Angular 9 will compile automatically depending on their usage.

Improved Internationalization (i18n):

Internationalization is an important Angular 9 feature. The new solution appears with Angular 9 which balances most of the drawbacks without losing performance. Initially, the latest @angular / localize produced one building, followed by a translation of texts consolidated in a copy and Ivy makes it easier to carry out the whole process. 

Improved type checking:

The Angular compiler can check more of the types of your application, and it can apply more strict rules and is accessed by setting the strictTemplates flag to true.  Note that strict mode is only available if using Ivy.

We support two main flags for additional type checks in addition to the default:

  • fullTemplateTypeCheck — Activating this flag tells the compiler to check everything within your template (ngIf ngForng-template, etc.)
  • strictTemplates — Activating this flag will apply the strictest Type System rules for type checking.

Improved Build Error:

The new compiler Ivy is not only efficient but also provides safety. Ivy speeds up our build times significantly. It gives less time for the builds to complete. This enables all the error messages easier to read.

Testing:

The implementation of the TestBed in Ivy, makes it more efficient to arrange the components between tests. This avoids recompilation between the grand majority of tests. With this change, the framework’s core acceptance tests are about 40% faster. User’s own application test speeds will be around 40–50% faster.

TestBed.get(ChangeDetectorRef) // any
TestBedChangeDetectorRef

Selectors-less Directives:

One feature missing from the Angular 8 Ivy preview that had been available in ViewEngine was the ability to use selector-less directives as base classes.With Angular 9, this feature has been added to Ivy so that developers get the advantages of Ivy compilation, but don’t miss previous functionality

Latest  TypeScript Versions:

TypeScript versions 3.6 and 3.7 are supported in Angular version 9. Previous TypeScript versions are no longer supported.

TypeScript  version 3.7 :

  • Optional chaining operator (?.) similar to the safe navigation operator for Angular templates
  • Nullish coalescing operator (??)
  • Assertion functions
  • Improved recursive type aliases

Changes with Angular Forms:

The first is that the  is no longer a valid selector to use while referencing an Angular form. You can use the  instead. Also the warning for using the removed form tag has been removed too. Secondly, the FormsModule.withConfig has been removed and you can now use the FormsModule directly.

Improved styling experience:

Styling in Angular Ivy has been reworked. Combining static HTML classes with NgStyle and NgClass directives is now fully supported

Improved CSS And Style binding:

The Ivy compiler and runtime handles style in a predictable manner. In the old versions, if an application contained competing definitions for a style, those styles would replace each other. With this Angular 9 feature, one can manage styles through a clear, consistent order of precedence which is not dependent on timing.

[style.color]="myColor"
 [style]="{color: myOtherColor}" myDirective>
 @Component({
  host: {
     style: "color:blue"
  },...})
...
@Directive({
  host: {
    style: "color:black",
    "[style.color]": "property"
  },...
})
...

Leave a Reply

Close Menu