Angular has finally released its latest version, Angular 9, on 7th February 2020. This release is a major update of angular, which switches application that adds the new and improved Ivy compiler and runtime by default, faster testing, better debugging, and many more improvements.
Versions Supported
Versions 4x, 5x and 6x are no longer supported. However, Angular 7x supported till the 18th of April 2020 whereas version 8x will have support until 20th November 2020.
First, update to the latest version of 8
How to update the Angular version 9 from Angular version 8
- ng update @angular/cli@8 @angular/core@8
- Then, update to the latest version on Angular 9
- ng update @angular/cli @angular/core
In a nutshell these are the new features of Angular 9:
- Smaller bundles and better performance.
- The Ivy compiler: The default use of the Ivy compiler is the most important feature of Angular 9, Ivy is designed to solve the major problems of Angular i.e. the performance and large file size.
- Selector-less bindings support for Angular Ivy.
- Internationalization support for Angular Ivy.
- Your Angular application is compiled Ahead-of-Time (AOT). This means the Angular’s AOT compiler will compile all the HTML and TypeScript present in your code into JavaScript before your browser downloads and runs it. This conversion takes place.
- Support for TypeScript *Diagnostics Format.
- Support for more scopes in providedIn.
- A New Type-Safe TestBed.inject().
- Method Instead of TestBed.get().
IVY ENABLED BY DEFAULT
IVy is enabled by default means if you want to fall back to view engine, we have to opt-out of IVy.The angular compatibility compiler will upgrade view engine-compatible libraries to Ivy when installed in an Ivy application project
For instance:
// tsconfig.json
{
"angularCompilerOptions": {
"enableIvy": false
}
} // polyfills.ts
// Only used in multilingual Ivy applications
// import '@angular/localize/init';
Modified CSS Custom Binding
The new version of Angular 9 supports binding CSS properties as part of the IVY styling rewrite:
[style.color] = "myColor" [style] = "{color: myOtherColor}"
myDirective & gt;
@Component({
host: {
style: "color:blue"
},
…
})…
@Directive({
host: {
style: "color:black",
"[style.color]": "property"
},
…
})
…Better Debugging
Angular 9 introduces ways to debug the code or components in the development mode, esteem techniques, and tools to develop is application are:
- one can Trigger change detection with(apply directives)
- one can ask angular for access to instances of the component and directives
- one can manually call methods and update the state
Improved Type Checking
Angular 9 introduces three modes for checking the expression and binding within the template of your application and can report any types of errors it finds:
- Basicmode-angular validates only top-level expressions in a template.
- fullTemplateTypeCheck — By activating this flag, the compiler will check everything within your template (ngIf, ngFor, ng-template, etc)
- strictTemplates — By activating this flag, the compiler will apply the strictest Type System rules for type checking
Service Worker Update
The expostulated versioned files option in the service worker assist group config has been removed. Thus, ngsw-config.json file will look like
"assetGroups": [{"name": "test", "resources": {"files": [ "/*/.txt"]}}]Typescript 3.7
The Nullish coalescing and optional chaining feature of the Typescript 3.7 helps to stay in sync with the environment. To top it all, Angular 9 will support usage of the same TypeScript Diagnostics format for the TypeScript Compiler diagnostics, which will generate a more descriptive error message.
Swift Mobile Apps
Ivy opens a platform for developers to speed up the application by reducing the size of JavaScript bundles. Hence, it is important for Angular 9 developers to redesign and decrease the size of downloadable files, to increase the mobile user experience.
A New Type-Safe TestBed.inject() Method Instead of TestBed.get()
Angular 9 provides a new TestBed.inject() instead of the deprecated TestBed.get() method:
- TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef
- The TestBed.get() method is not type-safe so was replaced with the new TestBed.inject()
ModuleWithproviders Support
This one is mostly for library users. Your codebase will be automatically migrated after you have updated to version 9. In this version, you have to always use the generic ModuleWithProviders<T> type to show your module type. Your declaration might have been looking like this
@NgModule({
…}) export class MyModule {
static forRoot(config: SomeConfig): ModuleWithProviders {
return {
ngModule: SomeModule,
providers: [{
provide: SomeConfig,
useValue: config
}]
};
}
}
But this is how they should look now.
@NgModule({
…}) export class MyModule {
static forRoot(config: SomeConfig): ModuleWithProviders & lt;* SomeModule * & gt; {
return {
ngModule: SomeModule,
providers: [{
provide: SomeConfig,
useValue: config
}]
};
}
Language Service Improvements
The Angular 9 Language Service for Visual Studio Code and WebStorm will benefit from some improvements. For example, URL definition will become more consistent. Style URLs will be checked in the same way as template URLs. Diagnostics will also be improved in the Angular Language Service. For example, TypeScriptHost will be able to differentiate severity logging by log, error, and debug methods. Plus, template URLs and style URLs that do not point to actual files will now be diagnosed as such by the Language Service.
API Extractor Improvements
Angular 9 will update API Extractor to the newest version. Angular uses Bazel, an open-source tool that enables building automation and software testing. Angular users can miss out as potential bugs are resolved and new features are implemented in software libraries.
AOT and Ivy
AOT, along with Ivy speeds up the creation of applications. To activate AOT for your project, open the angular.json file, and set aot to true.
“options”: {
“outputPath”: “dist / project”,
“index”: “src / index.html”,
“main”: “src / main.ts”,
“polyfills”: “src / polyfills.ts”,
“tscongif”: “tsconfig.app.json”,
“aot”: true
Conclusion
In the end, we can understand very clearly that the new update of Angular 9 has challenged drawback factors such as large bundle files which irritated and impacted download times, application performance and User experience have been modified so you should play around with it and get into the new room of update.
Angular 9 makes it easy to use Google Maps and YouTube in your front-end apps. Angular 9 added support for TypeScript 3.7 and improved the IDE and language service extension, which will increase the productivity of Angular developers and help them spot errors when developing apps. Many bugs have been fixed, along with stability and performance issues.
The post Angular 9 features with examples appeared first on Java Beginners Tutorial.
Leave a Reply