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:
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:
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 entryComponent. And 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 , ngFor, ng-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)// anyTestBedChangeDetectorRef
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 :
?.) similar to the safe navigation operator for Angular templates??)
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"
},...
})
...