Angular 9 : Top New Features and How to Upgrade

Angular is one of the most prominent open-source frameworks for building web and mobile applications. Developed by Google, Angular has evolved over the years into a comprehensive development framework that includes all of the tools and components required to build a web app. Angular follows a clear roadmap, with a new major version of Angular released every six months.

For months now we have been watching the Angular development team closely, waiting for updates and counting down to the big release. Now, the wait is finally over. Angular version 9.0.0 is officially here. Angular 9 is a major release that adds a number of changes to the ecosystem.

The most notable change is Ivy. With the release of Angular 9, Ivy is now the default compiler and runtime. Ivy improves bundle size, allows for better debugging, adds improved type checking, faster testing, enables the AOT compiler on by default, and improves CSS class and style binding.

With Ivy, both small apps and large apps will see largely improved bundle size savings thanks to Ivy’s tree-shaking feature, which will eliminate dead-code.

In this article, we will learn new features of Angular 9? And the changes that Ivy brings.

New Feature in Angular 9

1. Ivy By Default

One of the biggest improvements to Angular coming in 9.0 is that Ivy is enabled by default. Ivy is Angular’s new renderer. A super high level overview is that Ivy enables apps to only require pieces of the render that they actually need, instead of the whole thing. This means that our final output will be smaller, which is always better for performance. It’s important to note, that Ivy won’t make your components/app significantly smaller if you’re using every feature available to Angular. But there are noticeable improvements to the main.js chunk of an app.

For comparison, let’s look at the build output from Star Track with Ivy enabled and with it disabled. We’ll compare the size of the main.js file, which is mostly going to be Angular specific code.

# Ivy disabled
$ ng build --prod
...
chunk {10} main-es2015.d03d9cadf1579320f520.js (main) 537 kB [initial] [rendered]
chunk {10} main-es5.d03d9cadf1579320f520.js (main) 628 kB [initial] [rendered]
...


# Ivy enabled
$ ng build --prod
...
chunk {10} main-es2015.bfc9e260b847bc2b02fc.js (main) 465 kB [initial] [rendered]
chunk {10} main-es5.bfc9e260b847bc2b02fc.js (main) 551 kB [initial] [rendered]
..

From 537kb/628kb without Ivy, to 465kb/551kb with it! Note that Star Track is using almost every feature available from Angular, so delta is a bit smaller, but still a welcomed improvement!

Now Ivy has been around for sometime in earlier release, but always as an opt-in feature. With 9.0, however, Ivy is enabled by default and developers need to opt-out manually. If Ivy is so great, why would developers need to opt-out of it? Well, as this is part of a new major version, there are bound to be some breaking changes here and there. Most of these are not change that app developers need to worry themselves with, but something that component authors would need to deal with. If you’re using third-party components/packages that have not updated, you’ll want to opt-out of Ivy for now, and open an issue (or better yet, a pull request) against the repo.

Ionic itself will be ready for Ivy when Angular 9.0 is shipped. I’ve been following along and making the necessary updates needed. We recently have merged a pull request and have been testing a build of Ionic and Angular 9.0.

2. Angular Core Type-Safe Changes

One of the APIs for testing Angular apps is called TestBed. Before this new version, it had a get function called TestBed.get() that stopped taking string values after version 8. This was a breaking change, which the team decided to rollback in this new version as it was a very impactful breaking change. To solve the type safety problem, the team came up with a solution called TestBed.inject() and deprecated the get function.

TestBed.get(ChangeDetectorRef) // any

TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef

Now the TestBed API has been improved so that the inject function does exactly what the get does, while being type-safe at the same time.

3. ModuleWithProviders Support

This is mostly for library owners. If you have used ModuleWithProviders before Angular 9, you may or may not have been strongly typing it, but now in this version you have to always use the generic ModuleWithProviders<T> type to show your module type. Your declaration might have been looking thus:

	
@NgModule({ ...}) export class MyModule { static forRoot(config: SomeConfig): ModuleWithProviders {  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  
   };  
 }  
}	
	

Now, this is how they should look:

@NgModule({ ...})  
export class MyModule {  
  static forRoot(config: SomeConfig): ModuleWithProviders<**SomeModule**>  
{  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  
   };  
 }  
}

Do not worry about migrating the code yourself. After you have updated to version 9, your codebase will be automatically migrated. This also applies to all migration schematics, as soon as you update with the command:

ng update

All of your code becomes in sync with the latest changes.

4. Changes with Angular Forms

There are a few form changes you should be aware of in this new Angular version. The first is that the <ngForm></ngForm> is no longer a valid selector to use while referencing an Angular form. You can use the <ng-form></ng-form> 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.

5. Dependency Injection Changes in Core

For dependency injection, the new version of Angular also comes with a little improvement. This is not such a big change, but some support has been added for the providedIn value section of dependency injections.

@Injectable({    providedIn: 'platform'  })  class MyService {...}

Scopes like platform and any have been added to the library of values for the providedIn property.

6. Enhancement of Language Service

The language service support for integrated development environments like VS Code and WebStorm has been further improved with this new version. Now, definition of links will become more consistent, and even definition for style URLs will now be checked as template URLs. Even the URLs that do not point to actual project files will now be diagnosed.

Also Diagnostics improvements like TypeScriptHost will now be able to differentiate severity logging by debug methods and errors. A convenience script has now been added to this new version too to help with building and testing scripts.

7. Service Worker Updates

In this new 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:

"assetGroups": [  
  {  
    "name": "test",  
    "resources": {  
      "versionedFiles": [  
        "/**/*.txt"  
      ]  
    }  
  }  
]

Would now look like this:

"assetGroups": [  
  {  
    "name": "test",  
    "resources": {  
      "files": [  
        "/**/*.txt"  
      ]  
    }  
  }  
]

8. i18n Improvements

Angular as a JavaScript framework has long supported internationalization, and with the Angular CLI you can generate standard codes that would help create translator files so that your application can be published in multiple languages. This process has been even further refactored by the Angular team on Ivy to make it easier to add compile-time inlining.

9. API Extractor Updates

Angular is a holistic framework and so depends on many other services and libraries to function effectively. There is, however, the problem of keeping up with updates for all these libraries and services, resolutions and new features. In this new version of Angular, these libraries will be tracked and update the API Extractor to the newest version, where it uses Bazel at every build time to detect the API landscape of these libraries, produce reports and fish out missing updates or new features and documents in such a way that they would be communicated to you easily. This makes it easier to handle maintenance and keep everything up to date.

10. Angular Component Updates

For the CDK, there is an update about Hammer.js, which helps to add gesture support and was required if you wanted to use the CDK. Now it is optional. You can import it though optionally with this command:

import `HammerModule` from [@angular/platform-browser]

There is a clipboard module that shipped with this new version too, available in the CDK family. There is also a new Google Maps package finally available in this new Angular version, called the @angular/google-maps package.

From Angular 9, no component can be imported through @angular/material. You are to use the individual secondary entry-points, such as @angular/material/button.

11. Updating to Angular Version 9

For step-by-step instructions on how to update to the latest Angular release, use the interactive update guide at update.angular.io.

12. Updating CLI Apps

If your application uses the CLI, you can update to version 9 automatically with the help of the ng update script:

ng update @angular/core@8 @angular/cli@8  
git add .  
git commit --all -m "build: update Angular packages to latest 8.x version"  
ng update @angular/cli @angular/core --next`

This article is the end, that’s all the new features in Angular 9 I want to share with you. If you find the article useful, please share it with everyone.
Thanks for reading !

#angular #angular9 #web-development