This Angular 9 preview post takes you through all the features coming in the latest version of Angular, which will be coming out of beta soon.
Angular, Google’s JavaScript (TypeScript) framework for building web applications, mobile or desktop has over 55,000 stars on GitHub. Maintained by the Angular Team at Google and a host of community members and organizations, Angular Version 9 was released recently in beta (RC). A release candidate (RC) is a beta version with potential to be a stable product, which is ready to release unless significant bugs emerge. In this article, we shall take an overview of the new features in the version 9 changes and updates available for use now.
Spoiler Alert: Angular 9 is out now in beta and the Ivy renderer is no longer an opt-in but the default rendering engine for Angular.
So 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 your tsconfig.json file and add the line below to it:
"angularCompilerOptions": { "enableIvy": true }
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.
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.
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.
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.
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.
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.
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"
]
}
}
]
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.
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.
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
.
For step-by-step instructions on how to update to the latest Angular release, use the interactive update guide at update.angular.io.
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 is a quick breakdown of most of the features and updates on the newest beta version of Angular. You should play around with it and report all bugs or issues you find on the project so that changes can be made. Ivy as default renderer is for me the most exciting feature of this update. Which is yours?
Nwose Lotanna Victor is a web technology enthusiast who documents his learning process with technical articles and tutorials. He is a freelance frontend web developer based in Lagos, Nigeria. Passionate about inclusion, community-building and movies in Africa, he enjoys learning new things and traveling.