MCQ

Angular 9 Features

The Angular 9 preview post takes you through all the features coming in the latest version of Angular, which will soon come out of beta.

Angular, Google's JavaScript (TypeScript) framework for building web applications, mobile or desktop, has over 55,000 stars on GitHub. The Angular team at Google and a host of community members and organizations, Angular version 9 was recently released into beta (RC).

A release candidate (RC) is a beta version with the potential to be a stable product, ready to be released until critical bugs are revealed. In this article, we'll take an overview of the new features in version 9 changes and updates now available for use.

Spoiler alert: Angular 9 is now in beta and the Ivy renderer is no longer an opt-in but the default rendering engine for Angular.

Welcome Default Ivy

If you used Angular 8, you would remember that the Ivy renderer was already available to you but at an opt-in level. To use it, you had to go to your tsconfig.json file and add the line below to it:

JavaScript

Now, with Angular 9, the Ivy renderer is the default Angular compiler, so you do not need to do anything new to your tsconfig file to enjoy Ivy.

Angular Core Type-Safe Changes

One of the APIs for testing Angular apps is called TestBed. Previously, the new version had a function called testbed.get(), which stopped taking string values after version 8. It was a braking change, which the team decided to roll back in this new version as it was a very impressive braking change. To solve the security issue, the team came up with a solution called testbed.inject() and removed the get function.

TestBed.get(ChangeDetectorRef) // any

TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef

JavaScript

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.

ModuleWithProviders Support

This is mostly for library owners. If you've used ModuleWithProviders prior to Angular 9, you might or may not be using it as strongly-typed. However, now in this version, you must always use the generic ModuleWithProvider<T> type to show your module type. Your declaration might look like this:

@NgModule({ ...}) export class MyModule { static forRoot(config: SomeConfig): ModuleWithProviders {  
   return {  
         ngModule: SomeModule,  
         providers: [{ provide: SomeConfig, useValue: config }]  
   };  
 }  
}
JavaScript
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 }]  
   };  
 }  
}

JavaScript

After you update to version 9, your codebase will be automatically migrated. This also applies to all migration schematics as soon as you update with the command:

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

Changes with Angular Forms

There are some form changes in this new Angular version that you should be aware of. The first is that <ngForm></ngForm> is no longer a valid selector to use when referencing Angular Forms. You can use <ng-form></ng-form> instead. Also, the warning of using the deprecated form tag has been removed. Secondly, FormsModule.withConfig has been deprecated, and you can now use FormsModule directly.

Dependency Injection Changes in Core

For dependency injection, the new version of Angular also comes with little improvements. It's not a big change, but some support has been added for the given value section of Dependency Injection.

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

Enhancement of Language Service

Language service support for integrated development environments such as VS Code and WebStorm is further improved with this new version. Link definitions will become more consistent, and even style URL definitions will now be tested as template URLs. Even URLs that don't point to actual project files will now be diagnosed.

Also, diagnostic improvements such as TypeScriptHost will now differentiate logging of severity by debug methods and errors. A convenience script has now been added to this new version to help build and test scripts.

Service Worker Updates

In this new version, the obsolete versioned files option in the service worker asset group configuration has been removed for service workers. This means that your ngsw-config.json file looks like this:

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

JSON

Would now look like this:

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

JSON i18n Improvements

Angular as a JavaScript framework has long supported internationalization. With Angular CLI, you can generate standard code that will help you create translator files to publish your application in multiple languages. The Angular team has further refactored this process on Ivy to make it easier to add compile-time inlining.

API Extractor Update

Angular is a holistic framework and therefore depends on many other services and libraries to function effectively. However, there is the problem of maintaining updates to all of these libraries and services, offerings, and new features. In this new version of Angular, these libraries will be tracked and the API Extractor will be updated to the latest version, where it will be able to trace the API landscape of these libraries, generate reports and detect missing updates or new features every time. would be able. Uses bezel at the time of manufacture. And document it in such a way that they can communicate with you easily. This makes it easier to handle maintenance and keep everything up to date.

Angular component update

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

JavaScript

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

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

Updating to Angular Version 9

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

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`

Conclusion

This is a quick analysis of most of the features and updates on the latest beta version of Angular. You should play with it and report any bugs or issues you find in the project so that changes can be made.

Next TopicAngular Http Interceptor

← prev next →