Angular App Development

What’s new in Angular 9

Angular is the most prominent open-source framework for building web and mobile applications. It is developed by Google and has been evolving over the years into an ideal frontend development framework comprising of all the tools and components required to build a web app.

Usually, Angular releases a new major version with the latest best practices and latest features supported by TypeScript or JavaScript. A new version of Angular is released almost every six months, so that the API doesn’t need to change drastically as it did from Angular 1 to 2.

New Features in Angular 9

  1. Added undecorated classes migration schematic in the core.
  2. The form ControlName also accepts a number in the form
  3. Now allow selector-less directives as base classes in View Engine in the compiler.
  4. Added support selector-less directive as base classes in Ivy and also made the Ivy compiler the default for ngc.
  5. Convert all ngtsc diagnostics to ts.Diagnostics

DEPRECATIONS 

core: TestBed.get function is marked as deprecated, use TestBed.inject instead. 

Performance Improvements :

  1. Binding update benchmark and also convert all node-based benchmark to use a testing harness.
  2. Avoid megamorphic reads during property binding.
  3. Avoid repeated lview reads in pipe instructions.
  4. Avoid repeated LView reads in property instructions.
  5. Avoid unnecessary DOM reads in styling instructions.
  6. Initialise TNode inputs/outputs on the first creation pass for the Ivy.
  7. limit TNode.outputs reads for the Ivy.
  8. The language-service, keep analyzedModules cache when source files don’t change. 

Here’s how it looks like,

describe('TypeScriptServiceHost', () => {

  it('should not clear caches when external template changes', () => {

    const tsLSHost = new MockTypescriptHost(['/app/main.ts'], toh);

    const tsLS = ts.createLanguageService(tsLSHost);

    const ngLSHost = new TypeScriptServiceHost(tsLSHost, tsLS);

    const oldModules = ngLSHost.getAnalyzedModules();

    tsLSHost.override('/app/test.ng', '<div></div>');

    const newModules = ngLSHost.getAnalyzedModules();

    expect(newModules).toBe(oldModules);

   }); 

}); 

Angular 9 Breaking Changes –

1) Ivy applications:

Previously, in Ivy applications, Hammer providers were included by default. With this commit, apps that want Hammer support must import HammerModule in their root module i.e. 

import {HAMMER_PROVIDERS} from ‘./dom/events/hammer_gestures’ 

2) ServiceWorker: 

Remove deprecated option versionedFiles from service worker asset group configuration in ngsw-config.json

Before
"assetGroups": [

  {

    "name": "test",

    "resources": {

      "versionedFiles": [

        "/**/*.txt"

      ]
    }}]

After

 "assetGroups": [
  {
    "name": "test",

    "resources": {

      "files": [

        "/**/*.txt"

      ]

    } }]

Angular 9 Bug Fixes –

common: update $locationShim to notify onChange listeners before emitting AngularJS events.

compiler: return enableIvy true when using readConfiguration

Ivy –

1. Get name directly from nativeNode

2. Handle empty bindings in template type checker

3. In ngcc, handle inline exports in commonjs code

4. The ngcc should only index .d.ts exports within the package

5. The ngTemplateOutlet error when switching between null and template value

 Language-service 

1. Instantiate MetadataResolver once

2. Remove ‘context’ used for module resolution

ngcc 

1. Handle deep imports that already have an extension

2. Ignore format properties that exist but are undefined

Did you like this blog? Are you looking to create a mobile application?

Fast Forward Innovation with Perfomatix. 

Talk to our experts now and let us be your innovation partner!