Post
Ask Question

Let's Welcome Angular 9 With its New Features

As we all of us know that Google has just released its new version of Angular i.e. 9.0 just a week ago. Angular developers and the community members eagerly wait for the release of this version for a long time. Because, as announced by Google at the time of Angular 8 release, Angular 9 will be released with the features of the IVY renderer engine. So, the expectation is actually is very high for the IVY. Angular 9 is the first major release from Google in the year 2020 which is mainly focused on the toolchain and also making angular easier for the user to create different types of applications along with performance improvements. Except for this, this major version release also contains some new features and upgradation in respect of the previous versions including framework, Angular Material, Angular CLI, etc. Also, Angular 9 supports the typescript version 3.7. So with the help of a new typescript version, it is very much easy to code with faster subsequent build with the incremental flag, type checking for global this and generic type arguments.
 

New Features of Angular 9 

 
Now it’s time to discuss the major changes made in the Angular 9.
 

TypeScript 3.7.x Support

 
Angular 9 supports the Typescript 3.7 or above version. So, if we want to use Angular 9 for our application, then we need to first upgrade the Typescript version to 3.7 or above.
 

Ivy Rendering Engine

 
The most important and expected features of Angular 9 is IVY render compiler engine. Ivy is the new Angular Compiler as well as will act as a new rendering pipeline. Ivy is the code name of Angulars’s next-generation compilation and rendering pipeline. The benefit of Ivy is that it will generate considerably small-sized bundles, also can perform incremental compilation easily. So, Ivy is the basis of future innovations in the Angular world. 
  1. Ivy compiler and runtime offer many benefits over the previous compiler engine i.e. View Engine –
  2. It will provide a faster compilation.
  3. It will provide a smaller bundle size.
  4. With the help of Ivy, we can perform much faster testing operations.
  5. Provides improved CSS and style bindings
  6. Much more improved type checking in templates so that we can catch more errors at the build time and prevent the user to face those errors at runtime.
  7. Smaller bundle size compared to the current compiled bundled size.
  8. Also, the code generated by the Angular compiler is now much easier human to read and understand.
  9. The last but most favorite feature of me is that we can debug the templates.
  10. It provides improved build time and enables AOT mode for building by default.
In Angular 9, IVY is the default compiler engine for the build. If any reason, if we want to opt-out the IVY for the build process and want to continue with the previous compiler, View Engine, then we have to make the make changes in the TypeScript Configuration files as below -
  1. {  
  2.   "extends": "./tsconfig.json",  
  3.   "compilerOptions": {  
  4.     "outDir": "./out-tsc/app",  
  5.     "types": []  
  6.   },  
  7.   "files": [  
  8.     "src/main.ts",  
  9.     "src/polyfills.ts"  
  10.   ],  
  11.   "include": [  
  12.     "src/**/*.d.ts"  
  13.   ],  
  14.   "angularCompilerOptions": {  
  15.     "enableIvy": false  
  16.   }  
  17. }   

Smaller Bundle Size

 
In Angular 9, the Ivy Compiler has been designed in such a way so that it can remove the unnecessary parts of the Angular which are not being used via tree-shaking structure and as a result, it will generate less code for each Angular component in compared to the previous versions. With these improvements, small-size applications and large applications can see the most dramatic changes in the application size.
  1. The small application which does not use many Angular features can be benefited mostly from the tree-shaking structure.
  2. The Large application with a large number of components can also be benefitted from the reduced factory size.

     

Angular Core Type-Safe Changes

 
In Angular 9, we can implement faster testing with the help of the Ivy renderer engine. The TestBed is one of the APIs used for testing any angular application. In the previous Angular version, it had defined as a get function called TestBed.get() which does not accept string value after Angular 8. This is one of the breaking changes in Angular 9. Since the Angular team dedicated to rollback in this new version as it always has a very powerful impact. To solve the type of safety problem, the Angular team provide a solution called TestBed.inject() and deprecated the get function. 
  1. TestBed.get(ChangeDetectorRef) // any  
  2.   
  3. TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef  
Now this improved TestBed API, inject function will perform the same type of work that the get function does earlier with the type-safe at the same time.
 

Modules with Providers Support

 
This option is mainly for library owners. If we have used ModuleWithProvider before Angular 9, at that time we may or may not have been strongly typing it. But now, from this version, we have to always use the generic ModuleWithProviders<T> type to show our module type. In the earlier version, our declaration might be looks like as below -
  1. @NgModule({ ...})   
  2. export class MyModule { static forRoot(config: SomeConfig): ModuleWithProviders {    
  3.   return {    
  4.         ngModule: SomeModule,    
  5.         providers: [{ provide: SomeConfig, useValue: config }]    
  6.   };    
  7.   }    
  8. }  
But, now in Angular 9, this will look like as below -
  1. @NgModule({ ...})    
  2. export class MyModule {    
  3.   static forRoot(config: SomeConfig): ModuleWithProviders<**SomeModule**>    
  4. {    
  5.    return {    
  6.          ngModule: SomeModule,    
  7.          providers: [{ provide: SomeConfig, useValue: config }]    
  8.    };    
  9.  }    
  10. }   

Changes in Angular Forms

 
In Angular 9, there are some changes also make in the Angular Form Version. First of all, In Angular 9 <ngForm> is no longer exists as a form selector to use Angular Form. We need to use <ng-form> to access the Angular Form in our component. Secondly, FormsModule.withConfig has been removed and now we can use FormsModule directly.
 

Dependency Injection Changes in Core

 
In the case of dependency injection, Angular 9 comes with much more improvement and functionalities. So, when we will create an @Injectable service in Angular 9, we must choose whether it should be added to the injector. In addition to the previous root and module options, now we have two more additional options –
  • platform – Mentioning providedIn: ‘platform’ option makes the service available in a special singleton platform injector which will be shared by all applications on the page.
  • any - Mentioning providedIn: ‘any’ option provides a unique instance in every module (including lazy modules) that injects the token. 

i18n Improvements

 
Angular as a JavaScript framework has been now totally supported by the internationalization and with the help of the Angular CLI, we can produce basis codes that will help us to create converter files so that we can develop an application in multiple languages. This method also further refactored by the Angular team on the Ivy engine to make it easier to implement compile-time inline.
 

Need for Faster Mobile Apps

 
As mobile usage is growing strongly around the world and the quarter of the website traffic is made up of smartphones and other mobile devices. A significant percentage of these mobile devices have access to web pages from slow internet connections. It's important to decrease downloadable resources and increase mobile user experience, but such improvements can be difficult. Ivy helps in speed application startup by reducing the size of JavaScript classes.
 

Service Worker Updates

 
In this Angular 9 version, for service workers, the deprecated versioned files option in the service worker asset group config has been removed. This means that your ngsw-config.json file that looked like this:
  1. "assetGroups": [    
  2.   {    
  3.     "name": "test",    
  4.     "resources": {    
  5.       "versionedFiles": [    
  6.         "/**/*.txt"    
  7.       ]    
  8.     }    
  9.   }    
  10. ]  
Now, in Angular 9 it looks like as below -
  1. "assetGroups": [    
  2.   {    
  3.     "name": "test",    
  4.     "resources": {    
  5.       "files": [    
  6.         "/**/*.txt"    
  7.       ]    
  8.     }    
  9.   }    
  10. ]  

How to Upgrade in Angular 9

 
To upgrade any existing Angular 8 or previous application to Angular 9, we need to perform the below steps –
  1. Angular 9 use TypeScript 3.7 so install TypeScript 3.7
  2. You need to use Node 12 or Later
  3. Now execute the upgrade command of Angular CLI -> ng update @angular/cli @angular/core 
For getting better update experience, Angular recommended updating first to the latest version of Angular 8 with the below command -
  1. ng update @angular/cli@8 @angular/core@8  
Then, we can run the update command of Angular 9 -
  1. ng update @angular/cli @angular/core
Or, alternatively, you can check your upgrade process from the below URL links - https://update.angular.io/
 
After a successful update, check the Angular version with the below command –
  1. ng version  
 

Conclusion

 
In this article, we discuss the new features of Angular 9. We also discussed some breaking changes in Angular 9 means which has been changed in comparison to the previous version of angular. Also, we discussed some new features about Angular 9. I hope, this article will help you. Any feedback or query related to this article is most welcome.


Similar Articles