Let's Welcome Angular 9 With its New Features Debasis Saha

 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  

 New Date Range Picker

Angular Material now includes a new date range picker.

Image of the new date range picker

To use the new date range picker, you can use the mat-date-range-input and mat-date-range-picker components.

See this example on StackBlitz.

Learn more about date range selection.

Warnings about CommonJS imports

When you use a dependency that is packaged with CommonJS, it can result in larger slower applications.

Starting with version 10, we now warn you when your build pulls in one of these bundles. If you’ve started seeing these warnings for your dependencies, let your dependency know that you’d prefer an ECMAScript module (ESM) bundle.

CommonJS or AMD dependencies can cause optimization bailouts

Optional Stricter Settings

Version 10 offers a more strict project setup when you create a new workspace with ng new.

ng new --strict

Enabling this flag initializes your new project with a few new settings that improve maintainability, help you catch bugs ahead of time, and allow the CLI to perform advanced optimizations on your app. Specifically, the strict flag does the following:

• Enables strict mode in TypeScript
• Turns template type checking to Strict
• Default bundle budgets have been reduced by ~75%
• Configures linting rules to prevent declarations of type any
• Configures your app as side-effect free to enable more advanced tree-shaking

Keeping Up to Date with the Ecosystem

As usual, we have made a few updates to the dependencies of Angular to stay synchronized with the JavaScript ecosystem.

• TypeScript bumped to TypeScript 3.9
• TSLib has been updated to v2.0
• TSLint has been updated to v6

We’ve also updated our project layout. Starting with version 10 you will see a new tsconfig.base.json. This additional tsconfig.json file better supports the way that IDEs and build tooling resolve type and package configurations.

New Default Browser Configuration

We’ve updated the browser configuration for new projects to exclude older and less used browsers.

v9 Defaults

v10 Defaults

This has the side effect of disabling ES5 builds by default for new projects. To enable ES5 builds and differential loading for browsers that require it (such as IE or UC Browser), simply add the browsers you need to support in the .browserslistrc file.

Angular Team Fixit

We’ve dramatically increased our investment in working with the community. In the last three weeks our open issue count has decreased by over 700 issues across framework, tooling, and components. We’ve touched over 2,000 issues, and we plan to make large investments over the next few months, working with the community to do even more.

Deprecations and Removals

We’ve made several new deprecations and removals from Angular.

The Angular Package Format no longer includes ESM5 or FESM5 bundles, saving you 119MB of download and install time when running yarn or npm install for Angular packages and libraries. These formats are no longer needed as any downleveling to support ES5 is done at the end of the build process.

Based on heavy consultation with the community, we are deprecating support for older browsers including IE 9, 10, and Internet Explorer Mobile.

You can read more about our deprecations and removals.

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.