Exciting Times Ahead — Be Ready For Angular 9

Santosh Yadav
Nov 5, 2019 · 8 min read

The Angular 9 RC is out, what an exciting time to be Angular developer, no I am not saying this because of Angular 9 RC release. It's because Ivy is here, Ivy is now the default rendering engine in Angular.

India’s biggest Angular conference is scheduled for 29th Feb 2020, we have speakers from Angular Core team, 2019 was a huge success, and we hope you will join us this year as well. The tickets are going on sell from 7th November 7 pm visit ng-india website for more details.

And believe me, if you are still not excited, see this tweet from Mathias Raacke. 7 KB for a Hello World app

Now let’s go ahead and see what we have more apart from Ivy.

New Features

Add Migration Support for Undecorated Classes

export class BasePlain {
constructor(private vcr: ViewContainerRef) {}
}

@Directive({selector: '[blah]'})
export class DerivedDir extends BasePlain {}

With Ivy such classes require decorators as well, to take care of such cases once you migrate using ng update the decorators will be added as a part of the migration. Read this for more details, there are few cases that will not be taken care of.

FormControlName Accept Number as Input

<div formArrayName="tags">
<div *ngFor="let tag of tagsArray.controls; index as i">
<input [formControlName]="i">
</div>
</div>

Replace TestBed.get with TestBed.inject

TestBed.get(ChangeDetectorRef) // returns any

TestBed.inject(ChangeDetectorRef) // returns ChangeDetectorRef

Default Value for Static Flag in ViewChild

@ViewChild(ChildDirective) child: ChildDirective;@ViewChild(ChildDirective, { static: false }) child: ChildDirective; // similar to above code

ng-add Support for @angular/localize

FullTemplateTypeCheck for Template

  • Basic Mode: To enable set fullTemplateTypeCheck: false
  • Full Mode: To enable set fullTemplateTypeCheck: true
  • Strict Mode: To enable set fullTemplateTypeCheck: true and strictTemplates: true

Refer to this document for more details.

Typescript 3.6 support

Angular CLI, Angular, Node.js and TypeScript compatibility table. Click to open in new tab.

Generic Support for ModuleWithProviders

A migration schematic is already added, so ng update will take care of this migration.

Previous code:

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

After migration:

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

Apply Schematics to Libraries

No more entryComponents

Breaking Changes

Removed tslib Dependency

Forms

  • NgFromSelectorWarning: It was deprecated in Angular 6 and now removed the purpose of this directive was to display warnings when the deprecated ngForm selector is used.
  • FormsModule.withConfig: FormsModule.withConfig has been removed. we need to useFormsModule directly, withConfig used to take below options.

opts: { warnOnDeprecatedNgFormSelector?: "never" | "once" | "always"; }

  • The deprecated type RenderComponentType has been removed. Use RendererType2 instead.
  • The deprecated type RootRenderer has been removed. Use RendererFactory2 instead.

Angular Translation

  • To attach the $localize function to the global scope import from @angular/localize/init. Previously it was @angular/localize .
  • To access the loadTranslations() and clearTranslations() functions, import from @angular/localize. Previously it was @angular/localize/run_time.

Service Worker

Before

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

After

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

Angular Bazel

  • If you are using protractor_web_test_suite from @angular/bazel now switch to the @bazel/protractor package.

Deprecations

For a complete guide refer to Official docs. Also, nothing is covered related to Ivy as it is a really big topic and we will be writing a blog post soon to cover all features of Ivy.

Angular CLI

Support to verify CLI Version

Support to Mix Multiple Configuration

Now it is possible to use ng build --configuration=prod,testing so in testing configuration we can only pass the configuration which needs to be overwritten.

Specify options for ng-add

You can specify below option in package.json

ng-add : { 
"save": false | true | 'dependencies' | 'devDependencies'
}

Type options for component schematic

Schematics Support to Generate Interceptor

Change to app-shell schematic

Skip Test While using Generate Schematics

Autodiscover multiSelect schema prompt

test: {
type: 'array',
'x-prompt': {
'type': 'list',
'multiselect': false,
'items': [
{
'value': 'one',
'label': 'one'
},
{
'value': 'two',
'label': 'two'
},
],
'message': 'test-message',
},
}

Support to provide npmrc file path

Breaking Change

Angular Component

New Clipboard Module

If you want to read more on how to implement do read below blog post from Tim Deschryver.

hammerjs is now optional

New Package for Google Maps

Breaking Changes

  • MAT_CHECKBOX_CLICK_ACTION is deprecated, use MAT_CHECKBOX_DEFAULT_OPTIONS

Conclusion

Thanks to the community for translating the article in Japanese:

Angular In Depth

The place where advanced Angular concepts are explained

Santosh Yadav

Written by

Santosh is GDE for Angular and Web Technologies, he is open source contributor for Angular, NgRx and Writer at AngularInDepth and DotNetTricks.

Angular In Depth

The place where advanced Angular concepts are explained

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade