Updates in Angular 9

Angular is one of the leading open-source frameworks for web and mobile application development. Throughout the years, Angular has developed into a robust development platform that includes all the resources and components needed to build a web app. Angular follows a clear roadmap, and every six months a new major version of Angular is released. Angular 9 has some interesting features that are described below

Overall Updates

JavaScript Bundles and Performance

One of the ongoing issues with previous versions of Angular is the app's relatively large file size — more specifically, the file size of the JavaScript bundles that were produced. When you equate Angular with other libraries like React or Vue.js, the Angular app is much larger.

You probably won't feel the difference at runtime. While the output of Angular runtime is nice, loading might take longer because even a simple Angular app can be relatively big.

The size of the JavaScript bundles also hints at another problem: there's more to learn with Angular because Angular is a complete framework with many built-in developer tools, while other JavaScript libraries are more focused on components.

Angular 9 comes with a smaller bundle so it would impact on better performance.

Ivy Compiler

In Angular 9, Ivy is now the default rendering engine. it solves some of the problems with large bundles and application performance.

FormControlName Accept Number as Input

You may have used below code several times, but one thing we never thought of is how [formControlName]="i" works because it takes values of type string, this was fine there was no fullTemplateTypeCheck but in Ivy, this will fail, to make sure the below syntax still works formControlName can accept value of type string | number.

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

Default Value for Static Flag in ViewChild

Another major change introduced in Angular 8 was the static flag required for ViewChild. The static property is still there but for using false value. Now we no longer need to pass this property. Once you update to Angular 9 using ng update the migration will remove wherever we are using { static: false }.

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

Typescript 3.6 support

Typescript version 3.6 is required now.

Apply Schematics to Libraries

ng update takes care of all code migration, but it was not applied to Angular libraries. In Angular 9, ng update will apply all migration schematics to library projects as well. This is important if you are an Angular library author, so your code is in sync with the latest changes.

No more entryComponents

If you have worked with a popup in Angular, you must have used this property. It was required so you can dynamically load the component without referring it to the template. With Ivy, this is not required anymore.

Angular CLI Related Updates

Support to Mix Multiple Configuration

Earlier with ng build we can pass configuration by using --configuration. But there is one problem if I want to override some configuration, I have to copy the entire configuration and make a new entry to use it.

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

Type options for component schematic

As of now, when we use ng g c user it will generate a file with the component class UserComponent the type option lets you define which type of component you are creating, for example, ng g c user --type="dialog" it will create a component with the class name UserDialog.

Schematics Support to Generate Interceptor

Adding an interceptor was manual till now, with Angular 9 we will be able to use ng g i custom to create a CustomInterceptor class.

Skip Test While using Generate Schematics

If we create an application with --minimal=true it skips the e2e and unit testing configuration. But when we use ng g to generate a component/pipe/service it adds a spec.ts file. Starting from Angular CLI 9, this will be taken care of.

Autodiscover multiSelect schema prompt

To create a prompt that can have multiSelect we have to provide a lot of other options, with Angular 9 it can be simplified like below configuration.

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

Breaking Changes

Forms

• ngForm: Earlier was a valid selector, if you are using it move to .
• 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

• Translations (loaded via the loadTranslations() function) must now use MessageId for the translation key rather than the previous SourceMessage string.
• 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

• versionedFiles property is removed in ngsw-config.json.

Before

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

After

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

In summary Angular 9 is coming with some good upgrades and you should start prepping to adapt. We at Third Rock Techkno have already begun the process. If you are looking to get your project updated and leverage these Angular 9 upgrades connect with us right away.

Third Rock Techkno is a leading IT services company. We are a top-ranked web, voice and mobile app development company with over 10 years of experience. Client success forms the core of our value system.

We have expertise in the latest technologies including angular, react native, iOs, Android and more. Third Rock Techkno has developed smart, scalable and innovative solutions for clients across a host of industries.

Our team of dedicated developers combine their knowledge and skills to develop and deliver web and mobile apps that boost business and increase output for our clients.