Skip to main content

What's New in Angular 9? Angular 9 New Features

Angular 9 is the smaller, faster, and easier to use and it will be making Angular developers life easier. The fully version of Angular 9 will be released in the month of October/November 2019.

Explore this: Angular 9 vs. Angular 8 vs. Angular 7 vs. Angular 6, 5, 4, 2

Added Angular 9 Features -
1.      Added undecorated classes migration schematic in the core.
2.      The formControlName 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 make the Ivy compiler the default for ngc.
5.      Convert all ngtsc diagnostics to ts.Diagnostics
6.      bazel: support ts_library targets as entry-points for ng_package.
7.      core: add dynamic queries schematic.
8.      core: Mark TestBed.get as deprecated.
9.      ivy: expose window.ng.getDebugNode helper and also support ng-add in localize package.
10.  ivy: i18n – add syntax support for $localize metadata block.
11.  ivy: i18n – reorganize entry-points for better reuse.
12.  language-service: enable logging on TypeScriptHost.
13.  language-service: provide diagnostic for invalid templateUrls.
14.  language-service: provide diagnostics for invalid styleUrls.

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.

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

Reference link - https://github.com/angular/angular/blob/master/CHANGELOG.md


Compatibility note: The primary goal of the backward compatibility promise is to ensure that changes in the core framework and tooling don't break the existing ecosystem of components and applications and don't put undue upgrade/migration burden on Angular application and component authors.

Note: Angular versions ^4.0.0 and ^5.0.0 are no longer under support.
By Anil Singh | Rating of this article (*****)

Popular posts from this blog

List of Countries, Nationalities and their Code In Excel File

Download JSON file for this List - Click on JSON file    Countries List, Nationalities and Code Excel ID Country Country Code Nationality Person 1 UNITED KINGDOM GB British a Briton 2 ARGENTINA AR Argentinian an Argentinian 3 AUSTRALIA AU Australian an Australian 4 BAHAMAS BS Bahamian a Bahamian 5 BELGIUM BE Belgian a Belgian 6 BRAZIL BR Brazilian a Brazilian 7 CANADA CA Canadian a Canadian 8 CHINA CN Chinese a Chinese 9 COLOMBIA CO Colombian a Colombian 10 CUBA CU Cuban a Cuban 11 DOMINICAN REPUBLIC DO Dominican a Dominican 12 ECUADOR EC Ecuadorean an Ecuadorean 13 EL SALVA...

nullinjectorerror no provider for httpclient angular 17

In Angular 17 where the standalone true option is set by default, the app.config.ts file is generated in src/app/ and provideHttpClient(). We can be added to the list of providers in app.config.ts Step 1:   To provide HttpClient in a standalone app we could do this in the app.config.ts file, app.config.ts: import { ApplicationConfig } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; import { provideClientHydration } from '@angular/platform-browser'; //This (provideHttpClient) will help us to resolve the issue  import {provideHttpClient} from '@angular/common/http'; export const appConfig: ApplicationConfig = {   providers: [ provideRouter(routes),  provideClientHydration(), provideHttpClient ()      ] }; The appConfig const is used in the main.ts file, see the code, main.ts : import { bootstrapApplication } from '@angular/platform-browser'; import { appConfig } from ...

39 Best Yii2 Interview Questions and Answers - PHP Frameworks

1: What Is Yii framework? 2: Why Yii Is So Fast? 3: Yii Versions? 4: What Are the Prerequisites Yii? 5: Why Use Yii 2.0 Framework? 6: What Are the Benefits of Yii over other Frameworks? 7: What's New in Yii Release 2.0? 8: What Is The First File That Gets Loaded When You Run A Application Using Yii? 9: What Is The First Function That Gets Loaded From A Controller? 10: What Are the core components of Yii2 framework? 11: What Are the great feature of Yii Framework? 12: What Are The Application Structure of Yii 2.0 Framework? 13: What Are the Naming Convention in Yii 2.0 Framework? 14: What Is Request Life-Cycle of Yii 2.0 framework? 15: What Are Yii helpers? 16: What Are the Core Helper Classes in Yii Framework? 17: What Are The Server Requirements to Install Yii 2.0 Framework? 18: How To Customizing Helper Classes in Yii Framework? 19: What Are The Directory Structure of Yii 2.0 Framework? 20: How To Create Directory Structure of Yii Framewor...

PHP Frameworks Interview Questions - Yii, Slim, Zend, PHPixie, F3, Aura Frameworks

» Yii 1.0/2.0 Interview Questions The Yii is a pure OOP based framework, free, open source, high-performance, component-based PHP framework for rapidly developing modern Web Applications and the name Yii is pronounced as Yee or [ji:]).... Posted In Yii » Slim Framework Interview Questions Slim Framework is a PHP micro framework that helps PHP developers to write quickly and easily a powerful web applications and APIs. Posted In Slim PHP » PHPixie Framework Interview Questions PHPixie is a Modern, open-source, fast, secure and a lightweight MVC PHP framework designed for speed and simplicity. Posted In PHPixie PHP » Fat Free Framework (F3) Interview Questions A powerful yet easy-to-use PHP micro-framework designed to help you build dynamic and robust web applications - fast! Posted In Fat Free Framework PHP » Aura PHP Framework Interview Questions Aura Framework is a collection of High-quality, well-tested, standards-compliant, decoupled libraries that can be used in any...

39 Best Object Oriented JavaScript Interview Questions and Answers

Most Popular 37 Key Questions for JavaScript Interviews. What is Object in JavaScript? What is the Prototype object in JavaScript and how it is used? What is "this"? What is its value? Explain why "self" is needed instead of "this". What is a Closure and why are they so useful to us? Explain how to write class methods vs. instance methods. Can you explain the difference between == and ===? Can you explain the difference between call and apply? Explain why Asynchronous code is important in JavaScript? Can you please tell me a story about JavaScript performance problems? Tell me your JavaScript Naming Convention? How do you define a class and its constructor? What is Hoisted in JavaScript? What is function overloadin...