Learn about all the new features of Angular 9

Learn about all the new features of Angular 9

Google-driven Java Script has added to its glory yet another framework that is set to embolden the developer’s efforts to create applications. The Angular 9 Beta version was stated to release between the October and November 2019 time frame, but...

Google-driven Java Script has added to its glory yet another framework that is set to embolden the developer’s efforts to create applications. The Angular 9 Beta version was stated to release between the October and November 2019 time frame, but the beta stage has been released and has given a unique tool to improvise further before the actual Angular 9 hits the market.

Do you know what the best part about this successor is? Yes, you guessed it right! Here, Ivy generation compilation and rendering pipeline have become the default feature. Earlier it had to be enforced by the developers but now with Ivy Compiler becoming a default factor, it is all set to make things easier for developers.

Angular and Angular-based applications have become one of the most popular frameworks of Google which has given an all-new meaning to the web, mobile, and desktop applications. It has more than 55,000 stars on Github and has always been under the supervision and scrutiny of Google’s team of community members. The RC version or the release candidate version has all the qualities of making it big.

Let us discover its prime offerings.

Angular Ivy

Many users access web pages from their mobiles even when there is poor connectivity. This could be due to the size of downloadable assets. Developers provide incessant efforts to reduce the size of downloadable assets but it can prove to be an expensive affair. Now with smaller sizes of JavaScript bundles, Ivy is a welcome permanent addition to the family of Angular 9.

Angular based applications built with Ivy will be agile and adept considering Ivy compiler was discretionary in the previous versions. he new Ivy compiler will finally be the default, so Angular apps built with Ivy will be faster and more efficient.tsconfig.json file in the project folder as seen earlier.

Once it had been added, Angular developers had to run the compiler by performing the NGC command in the project folder as given below


But now in the new version implementing the enable ivy option in the tsconfig.json file, is not required as Ivy renderer has become the default.

Safer than the previous versions

In the previous versions of Angular development, for testing of API’s a function called TestBed.get() had to be provided. After version 8 the intake of string values also ceases. This led to the Angular developer community extricate the safety issue. In this new version now, the team came up with TestBed.inject() and remonstrate the get function.

TestBed.get(ChangeDetectorRef) // any
TestBed.inject(ChangeDetectorRef) // ChangeDetectorRef

With the improvements in TestBed API, the inject function will do what the get does along with being type-safe concurrently.

Module with Providers

Again another enriching feature is the Module with providers that makes immense sense and value to library owners. In the previous versions if you have used ModuleWithProviders then Angular developers would type it stringently or will not type at all. But with the new version Angular developers have to constantly adopt the across-the-board ModuleWithProviders type to display the module type. Initially, the declaration would look like the below-given illustration:

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

After the changes, the declaration would look like

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

In the new version, the codebase will be migrated axiomatically after you give the command

Ng update

Advancement in Angular Forms

For prime Angular based applications, the 9th version of Angular has arrived with few form changes. The is not a functional selector now for referencing an Angular form. Now with the new version** **is used. The warning that was given for using removed form tags has been removed in the new version. In this version, you can also utilize FormsModule rather than **FormsModule.withConfig. **

Selector-less Decrees

You will not find this in the Angular 8 Ivy display. The capability to use selector-less directives as base-class is the new feature of Angular 9. It has been added so as to ensure that Angular developers can benefit from Angular compilation.


Angular CLI can be utilized to accomplish the standard code which is important to create files for translators. This is done to ensure that publishing in the Angular based application happens in varied languages.

For instance, take into consideration an application with the mentioned HTML title in the English language.

Hello Good morning!

You can add the i18n attribute to mark “Hello Good morning!” as a translatable text. I18b is the short form of internalization here. The addition would appear like:

Hello Good morning!

Once the angular developers have configured Angular based applications you can run the xi18n command to derive localizable text into a file.

You can see a smidgen of generated messages. xlffile below:

Hello Good Morning!

You can then copy the messages.xlf files to the messages.es.xlf file as given below and reframe it to construct the app for Spanish accepting locations along with the translated composition.

Hello Good morning!
¿Hola Buenos Dias?

Dependency Injection changes

Angular Core has some aggressive upgradations that will allure a major chunk of Angular developers. In order to see how Angular 9 adds dependency interjection support for PorvidedIn value, we need to this illustration below:

providedIn: 'platform'
class MyService {...}

Language service improvements

Thanks to the new version, service support for infused ecosystems like the VS Code and WebStorm has gone a complete rejuvenation. The definition of links with the new version will become more stable. The interpretation of style-based URLs will now be checked-off as template URLs. URLs that do not refer to the actual project file will also be distinguished.

TypeScriptHost enhancements also will be able to make out severity logging by debugging various mistakes and methods. For better testing of scripts a convenience script also has been added to the Angular V9.

Updates of the Angular components

For the CDK, there is an update about Hammer.js, which aids in supplementing gesture support and was essential to use CDK. In the new version, it is optional. If you want to import it you can do so with the given command:

import HammerModule from [@angular/platform-browser]

Parting words

Angular 9 Beta version is a great way to understand it thoroughly and provide preferred changes so that the actual version will come with the updated changes. The feedback gives and takes are going to be the most aggressive during this phase.

Towards to Angular v9: 9.0.0-rc 0 and a Update Guide

Towards to Angular v9: 9.0.0-rc 0 and a Update Guide

Now that Angular v8 is here, it’s time to embark on a new journey: towards the next release! It’s never too soon to look forward to the future, and we are already watching for Angular v9\. What’s new? We are almost there! The latest update has moved up to a release candidate and a guide on how to update to version 9.

Now that Angular v8 is here, it’s time to embark on a new journey: towards the next release! It’s never too soon to look forward to the future, and we are already watching for Angular v9. What’s new? We are almost there! The latest update has moved up to a release candidate and a guide on how to update to version 9.

The new journey begins

Road to Angular v9: 9.0.0-rc 0 and a v9 update guide

Angular updated their changelog on GitHub and now we are one step closer to the release of Angular 9. The time has come and we are officially in the release candidate stage!

Check out the Updating to Angular Version 9 guide.

From the updating guide, be aware of the breaking changes and deprecations that come with v9.

Breaking changes

  • Angular v9 will compile with Ivy as the default rendering engine. View the Ivy compatibility guide for information on debugging errors, and some potential changes you may see. Ivy is (mostly) backward-compatible with the previous rendering engine, however, some applications will need to be manually updated.
  • If you are using Typescript 3.4 or 3.5, you must update to Typescript 3.6.
  • tslib now listed as a peer dependency rather than a direct dependency. If you do not use the CLI, you will have to manually install tslib via  yarn


The following APIs are deprecated in v9.

Removals of deprecated APIs

Update October 31, 2019

Angular 9.0.0-next.15

Bug Fixes

  • compiler: i18n – ignore alt-trans tags in XLIFF 1.2 (#33450) (936700a), closes #33161
  • ivy: descend into ICU containers when collecting rootNodes (#33493) (563a507)
  • ivy: descend into view containers on elements when collecting rootNodes (#33493) (87743f1)
  • ivy: descend into view containers on ng-container when collecting rootNodes (#33493) (a5167bd)
  • ivy: descend into view containers on ng-template when collecting rootNodes (#33493) (502fb7e)
  • ivy: ensure overrides for ‘multi: true’ only appear once in final providers (#33104) (e483aca)
  • ivy: handle elements with local refs in i18n blocks (#33415) (bd40c89)
  • ivy: i18n – support setting locales for each translation file (#33381) (62b2840), closes #33323
  • ivy: i18n – update localize-translate to accept target-locales (#33381) (41979d6)
  • language-service: Improve signature selection for pipes with args (#33456) (1de7579)


Performance Improvements

  • ivy: avoid generating selectors array for directives without a selector (#33431) (c3e9356)

Update October 31, 2019

Angular 9.0.0-next.14

Bug Fixes

  • core: missing-injectable migration should handle forwardRef (#33286) (eeecbf2)
  • core: missing-injectable migration should not migrate providers with “useExisting” (#33286) (4d23b60)
  • core: missing-injectable migration should not update type definitions (#33286) (335854f)
  • ivy: allow abstract directives to have an invalid constructor (#32987) (8d15bfa), closes #32981
  • ivy: fix broken typechecking test on Windows (#33376) (63f0ded)
  • ivy: split checkTypeOfReferences into DOM and non-DOM flags. (#33365) (113411c)
  • ivy: support abstract directives in template type checking (#33131) (a42057d), closes #30080
  • language-service: Do not show HTML elements and attrs for ext template (#33388) (a78b701)
  • ngcc: prevent reflected decorators from being clobbered (#33362) (0de2dbf)


  • ivy: add a runtime feature to copy cmp/dir definitions (#33362) (818c514)
  • ivy: add flag to disable checking of text attributes (#33365) (d8ce212)
  • ivy: allow the locale to be set via a global property (#33314) (fde8363)
  • ivy: i18n – inline current locale at compile-time (#33314) (fb84ea7)
  • ivy: input type coercion for template type-checking (#33243) (f1269d9)
  • ivy: strictness flags for template type checking (#33365) (0d9be22)
  • ivy: verify whether TypeScript version is supported (#33377) (4aa51b7)
  • ngcc: add a migration for undecorated child classes (#33362) (b381497)
  • ngcc: enable migrations to apply schematics to libraries (#33362) (6b26748)
  • ngcc: migrate services that are missing @Injectable() (#33362) (31b9492)

Performance Improvements

  • ivy: apply [style]/[class] bindings directly to style/className (#33336) (dcdb433)
  • ivy: apply static styles/classes directly to an element’s style/className properties (#33364) (5607ad8)
  • ivy: improve styling performance (#33326) (d40ee6a)

Update October 28, 2019

Angular 9.0.0-next.13

Bug Fixes


  • core: add ModuleWithProviders generic type migration (#33217) (56731f6)
  • ivy: enable re-export of the compilation scope of NgModules privately (#33177) (c4733c1), closes #29361
  • ivy: give shim generation its own compiler options (#33256) (d4db746)
  • ngcc: enable private NgModule re-exports in ngcc on request (#33177) (e030375)

Performance Improvements

  • ivy: avoid unnecessary i18n pass while processing a template (#33284) (7f7dc7c)


  • bazel: @angular/bazel ng_setup_workspace() is no longer needed and has been removed. We assume you will fetch rules_nodejs in your WORKSPACE file, and no other dependencies remain here. Simply remove any calls to this function and the corresponding load statement.

Update October 24, 2019

Angular 9.0.0-next.12

Bug Fixes


  • add a flag in bootstrap to enable coalesce event change detection to improve performance (#30533) (21c1e14)
  • ivy: improve debugging experience for styles/classes (#33179) (724707c)
  • typescript 3.6 support (#32946) (86e1e6c), closes #32380
  • ivy: type checking of event bindings (#33125) (6958d11)
  • language-service: add Angular pseudo elements into completions (#31248) (7c64b8d)
  • ngcc: support –async flag (defaults to true) (#33192) (2196114)
  • ngcc: support ignoreMissingDependencies in ngcc config (#33192) (4da2dda)

Performance Improvements

  • ivy: initialise inputs from static attrs on the first template pass only (#33195) (aef7dca)
  • ivy: limit global state read / write in host bindings (#33195) (3e14c2d)



  • typescript 3.4 and 3.5 are no longer supported, please update to typescript 3.6

Update October 21, 2019

Angular 9.0.0-next.11

Bug Fixes

  • compiler-cli: produce diagnostic messages in expression of PrefixNot node. (#33087) (2ddc851)
  • compiler-cli: resolve type of exported *ngIf variable. (#33016) (39587ad)
  • ivy: avoid DOM element assertions if procedural renderer is used (#33156) (11e04b1)
  • ivy: do not always accept undefined for directive inputs (#33066) (50bf17a), closes #32690
  • ivy: ensure sanitizer is not used when direct class application occurs (#33154) (1cda80e)
  • ivy: i18n – add XLIFF aliases for legacy message id support (#33160) (ad72c90)
  • ivy: i18n – strip meta blocks from untranslated messages (#33097) (1845faa)
  • ivy: i18n – support lazy-load template string helpers (#33097) (83425fa)
  • ivy: i18n – turn on legacy message-id support by default (#33053) (f640a4a)
  • language-service: Use index.d.ts for typings (#33043) (728cd84)
  • google3 sync which requires type hints (#33108) (0c69ec2)
  • ngcc: rename the executable from ivy-ngcc to ngcc (#33140) (1a34fbc)
  • service-worker: continue serving api requests on cache failure (#32996) (52483bf), closes #21412

Code Refactoring


  • compiler: record absolute span of template expressions in parser (#31897) (b04488d), closes #31898
  • core: add postinstall ngcc migration (#32999) (30d25f6)
  • ivy: better error messages for unknown components (#33064) (d8249d1)
  • ivy: check regular attributes that correspond with directive inputs (#33066) (cd7b199)
  • ivy: disable strict null checks for input bindings (#33066) (ece0b2d)
  • ivy: i18n – support source locale inlining (#33101) (f433d66)
  • change tslib from direct dependency to peerDependency (#32167) (e2d5bc2)
  • language-service: directive info when looking up attribute’s symbol (#33127) (ce7f934)
  • language-service: hover information for component NgModules (#33118) (e409ed0), closes #32565
  • ngcc: support fallback to a default configuration (#33008) (9167624)
  • ngcc: support version ranges in project/default configurations (#33008) (90007e9)

Performance Improvements

  • ivy: guard host binding execution with a TNode flag (#33102) (d4d0723)
  • ivy: introduce micro-benchmark for directive instantiation (#33082) (22d4efb)
  • ivy: limit memory reads in getOrCreateNodeInjectorForNode (#33102) (dcca80b)
  • ivy: speed up bindings when no directives are present (#32919) (b2decf0)
  • ivy: stricter null checks in setInputsFromAttrs (#33102) (b800b88)
  • ivy: use instanceof operator to check for NodeInjectorFactory instances (#33082) (8d111da)


  • We no longer directly have a direct depedency on tslib. Instead it is now listed a peerDependency.

Users not using the CLI will need to manually install tslib via;

yarn add tslib


npm install tslib --save

  • forms: *  can no longer be used as a selector. Use  instead.
  • The NgFromSelectorWarning directive has been removed.
  • FormsModule.withConfig has been removed. Use the FormsModule directly.

Update October 14, 2019

Bug Fixes

  • common: expand type for “ngForOf” input to work with strict null checks (#31371) (c1bb886), closes #16373
  • core: ngNoopZone should have the same signature with ngZone (#32068) (3a53e2c), closes #32063
  • core: set migration schematic versions to valid semver versions (#32991) (0119f46)
  • core: update migration descriptions with links to AIO documentation (#32991) (f8eca84)
  • ivy: avoid exposing ng with Closure Compiler enhanced optimizations (#33010) (bad3434)
  • ivy: generate ng-reflect properties for i18n attributes (#32989) (90fb5d9)
  • ivy: i18n – better translation warnings (#32867) (97d5700)
  • ivy: i18n – do not render message ids unnecessarily (#32867) (9188751)
  • ivy: i18n – support colons in $localize metadata (#32867) (d24ade9)
  • ivy: i18n – throw an error if a translation contains an invalid placeholder (#32867) (601f87c)
  • ivy: missing schematics field in localize package (#33025) (d18289f), closes #32791
  • ivy: process nested animation metadata (#32818) (c61e4d7), closes #32794
  • ivy: unable to bind style zero (#32994) (3efb060), closes #32984
  • language-service: create StaticReflector once only (#32543) (adb562b)

Code Refactoring


Performance Improvements

  • ivy: add static attributes to the element_text_create benchmark (#32997) (affae99)
  • ivy: attempt rendering initial styling only if present (#32979) (6004703)
  • ivy: avoid memory allocation in the isAnimationProp check (#32997) (9f0c549)
  • ivy: increase number of created views in the element_text_create benchmark (#32979) (8593d0d)
  • ivy: limit TNode.inputs reads on first template pass (#32979) (e6881b5)
  • ivy: move attributes array into component def (#32798) (d5b87d3)
  • language-service: improve Language service performance (#32098) (65297cd)


  • core: The deprecated type Renderer has been removed. Use Renderer2 instead.
  • core: The deprecated type RenderComponentType has been removed. Use RendererType2 instead.
  • core: The deprecated type RootRenderer has been removed. Use RendererFactory2 instead.

Update September 20, 2019

Bug Fixes

  • bazel: ng_package(data) should support non-text files (#32721) (df1c456)
  • compiler-cli: fix typo in diagnostic template info. (#32684) (f6d6667), closes #32662
  • core: initialize global ngDevMode without toplevel side effects (#32079) (5f095a5), closes #31595
  • core: make injector.get() return default value with InjectFlags.Self flag on (#27739) (0477bfc), closes #27729
  • ivy: avoid unnecessary i18n instructions generation for with structural directives (#32623) (5328bb2)
  • ivy: correct debug array names (#32691) (52a6da0)
  • ivy: DebugNode throws exceptions when querying some properties (#32622) (bfb3995)
  • ivy: ensure that window.ng utilities are published when NgModules are used (#32725) (a0d04c6)
  • ivy: i18n – start generated placeholder name at PH (#32493) (f1b1de9)
  • ivy: i18n – update the compiler to output MessageIds (#32594) (b741a1c)
  • ivy: i18n – use MessageId for matching translations (#32594) (357aa4a)
  • language-service: Lazily instantiate MetadataResolver (#32631) (1771d6f)
  • language-service: Use tsLSHost.fileExists() to resolve modules (#32642) (bbb2798)
  • ngcc: consistently use outer declaration for classes (#32539) (373e133), closes #32078
  • ngcc: correctly read static properties for aliased classes (#32619) (c4e039a), closes #32539 #31791
  • ngcc: resolve imports in .d.ts files for UMD/CommonJS bundles (#32619) (3c7da76), closes #31791
  • ngcc: support UMD global factory in comma lists (#32709) (e5a3de5)


  • bazel: support ts_library targets as entry-points for ng_package (#32610) (217db9b)
  • core: add dynamic queries schematic (#32231) (f5982fd)
  • core: Mark TestBed.get as deprecated (#32406) (a85eccd), closes #32200 #26491
  • ivy: expose window.ng.getDebugNode helper (#32727) (4726ac2)
  • ivy: i18n – add syntax support for $localize metadata block (#32594) (c7abb7d)
  • ivy: i18n – reorganize entry-points for better reuse (#32488) (2bf5606)
  • language-service: enable logging on TypeScriptHost (#32645) (e82f56b)
  • language-service: provide diagnostic for invalid templateUrls (#32586) (adeee0f), closes #32564
  • language-service: provide diagnostics for invalid styleUrls (#32674) (4c168ed), closes #32564

Performance Improvements

  • ivy: avoid megamorphic reads during property binding (#32574) (fcdd068)
  • ivy: avoid repeated lview reads in pipe instructions (#32633) (73cb581)
  • ivy: avoid repeated LView reads in property instructions (#32681) (e6ed4a2)
  • ivy: avoid unnecessary DOM reads in styling instructions (#32716) (05e1b3b)
  • ivy: binding update benchmark (#32574) (ea378a9)
  • ivy: convert all node-based benchmark to use a testing harness (#32699) (1748aeb)
  • ivy: guard listening to outputs with isDirectiveHost (#32495) (527ce3b)
  • ivy: initialise TNode inputs / outputs on the first creation pass (#32608) (ad178c5)
  • ivy: introduce benchmark for listeners registration (#32495) (024765b)
  • ivy: limit TNode.outputs reads (#32495) (51292e2)
  • ivy: run the expandng rows benchmark with es2015 (#32716) (3ace25f)
  • language-service: keep analyzedModules cache when source files don’t change (#32562) (4f03323)


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

Update September 12, 2019


Bug Fixes

  • core: improve the “missing $localize” error message (#32491) (a9ff48e)
  • ivy: capture template source mapping details during preanalysis (#32544) (a64eded), closes #32538
  • ivy: handle expressions in i18n attributes properly (#32309) (f00d033)
  • ivy: i18n – do not generate jsdoc comments for $localize (#32473) (a731119)
  • ivy: maintain coalesced listeners order (#32484) (098feec)
  • ivy: match class and attribute value without case-sensitivity (#32548) (ded5724)
  • ivy: node placed in incorrect order inside ngFor with ng-container (#32324) (da42a76)
  • ivy: restore global state after running refreshView (#32521) (a1beba4)
  • ivy: template compiler should render correct $localize placeholder names (#32509) (ea6a2e9)
  • ivy: unable to bind to properties that start with class or style (#32421) (62d92f8), closes #32310
  • ivy: unable to override ComponentFactoryResolver provider in tests (#32512) (2124588)
  • ivy: warn instead of throwing for unknown properties (#32463) (bc061b7)
  • language-service: Return empty external files during project initialization (#32519) (a65d3fa)
  • language-service: Use module resolution cache (#32479) (6052b12)
  • ngcc: only back up the original prepublishOnly script and not the overwritten one (#32427) (38359b1)
  • service-worker: keep serving clients on older versions if latest is invalidated (#31865) (bda2b4e)

Code Refactoring


  • language-service: add definitions for styleUrls (#32464) (a391aeb)
  • language-service: add script to rebuild, refresh Angular dist (#32515) (1716b91)
  • service-worker: recover from EXISTING_CLIENTS_ONLY mode when there is a valid update (#31865) (094538c), closes #31109

Performance Improvements

  • ivy: check for animation synthetic props in dev mode only (#32578) (7280710)
  • ivy: introduce a node-based micro-benchmarks harness (#32510) (2895edc)
  • ivy: replace select instruction with advance (#32516) (664e001)
  • ivy: run tree benchmark with bundles and ngDevMode off (#32558) (c3a1ef2)
  • ngcc: process tasks in parallel in async mode (#32427) (e36e6c8)


  • bazel: Angular bazel users using protractor_web_test_suite from @angular/bazel npm package should now switch to the @bazel/protractor npm package.

This should impact very few users and the users that are impacted have a very easy upgrade path to switch to fetching the protractor_web_test_suite rule via the @bazel/protractor npm package.


This release contains various API docs improvements.

Update September 12, 2019


Bug Fixes

  • ivy: add missing closure extern for $localize (#32460) (e8f9ba4)
  • ivy: ensure binding ordering doesn’t mess up when a NO_CHANGE value is encountered (#32143) (7cc4225)
  • ivy: i18n – handle translated text containing HTML comments (#32475) (5d8eb74)
  • ivy: ngcc – improve the “ngcc version changed” error message (#32396) (d5101df)
  • ivy: Prevent errors when querying for elements outside Angular context (#32361) (260217a)
  • language-service: Create DirectiveKind enum (#32376) (852afb3)
  • language-service: Invalidate Reflector caches when program changes (#32357) (97fc45f)
  • update all files/directories owned by DevInfra to new DevInfra Framework team alias (#32247) (3758978)
  • language-service: re-add regressed templateUrl tests (#32438) (1ed3531), closes #32378
  • language-service: Use ts.CompletionEntry for completions (#32375) (f6e88cd)
  • ngcc: handle compilation diagnostics (#31996) (f7471ee), closes #31977
  • common: HttpParams fromObject accepts ReadonlyArray (#31072) (f5bec3f), closes #28452


Performance Improvements

  • core: Make PlatformLocation tree-shakable (#32154) (1537791)
  • ivy: add a micro benchmark for map-based style and class bindings (#32401) (ba5e07e)
  • ivy: add a micro benchmark for style and class bindings (#32401) (df8e675)
  • ivy: add element and text creation benchmark (#32342) (85864ed)
  • ivy: guard directive-related operations with a TNode flag (#32445) (641c5c1)
  • ivy: properly initialise global state in the element_text_create benchmark (#32397) (8dc3f36)
  • ivy: remove renderStringify calls for text nodes creation (#32342) (a1e91b0)
  • ivy: remove repeated memory read / write in addComponentLogic (#32339) (581b837)
  • ivy: run registerPostOrderHooks in the first template pass only (#32342) (fac066e)


  • docs: create Issue and Pull Request markdown doc, explaining automatic locking policy (#32405) (43619fc)


  • ivy: This commit removes the public export of hasBeenProcessed().

This was exported to be availble to the CLI integration but was never used. The change to the function signature is a breaking change in itself so we remove the function altogether to simplify and lower the public API surface going forward.

  • core: Injector.get now accepts abstract classes to return type-safe values. Previous implementation returned any through the deprecated implementation.

Bug Fixes

Update September 5, 2019


Bug Fixes

  • ivy: debug node names should match user declaration (#32328) (14feb56)
  • ivy: ngtsc throws if “flatModuleOutFile” is set to null (#32235) (4f7c971)
  • ivy: reset binding index before executing a template in refreshView call (#32201) (6b245a3)
  • ngcc: do not analyze dependencies for non Angular entry-points (#32303) (e563d77), closes #32302


  • core: add undecorated classes with decorated fields schematic (#32130) (904a201)
  • ivy: use the schema registry to check DOM bindings (#32171) (0677cf0)

Performance Improvements

  • ivy: minimise writes to the lView[BINDING_INDEX] / binding root (#32263) (e3422e0)
  • ivy: store binding metadata in the ngDevMode only (#32317) (0874bf4)

This release contains various API docs improvements.

Update August 29, 2019



  • core: add undecorated classes migration schematic (#31650) (024c31d)
  • forms: formControlName also accepts a number (#30606) (628b0c1)
  • compiler: allow selector-less directives as base classes in View Engine (#31379) (4055150)
  • ivy: support selector-less directive as base classes in Ivy (#32125) (cfed0c0), closes #31379
  • ivy: make the Ivy compiler the default for ngc (#32219) (ec4381d)
  • ivy: convert all ngtsc diagnostics to ts.Diagnostics (#31952) (0287b23)

Performance Improvements

  • core: make sanitization tree-shakable in Ivy mode (#31934) (2e4d17f)
  • ivy: auto-call select(0) for non-empty views only (#32131) (4d549f6)
  • ivy: avoid first template pass checks during view creation (#32120) (4c3b791)
  • ivy: avoid for-of loops at runtime (#32157) (abb44f7)
  • ivy: improve NaN checks in change detection (#32212) (53bfa7c)
  • ivy: interpolation micro-benchmark (#32104) (be665d8)
  • ivy: noop change detection micro-benchmark (#32104) (c422c72)
  • don’t create holey arrays (#32155) (6477057)
  • ivy: read selected index only when need in prop bindings (#32212) (53f33c1)
  • ivy: split hooks processing into init and check phases (#32131) (1062960)
  • ivy: split view processing into render (create) and refresh (update) pass (#32020) (b9dfe66)

Bug Fixes

  • bazel: pin [@microsoft](https://github.com/microsoft)/api-extractor (#32187) (5da5ca5)
  • common: update $locationShim to notify onChange listeners before emitting AngularJS events (#32037) (5064dc7)
  • compiler: return enableIvy true when using readConfiguration (#32234) (424ab48)
  • ivy: get name directly from nativeNode (#32198) (3dbc4ab)
  • ivy: handle empty bindings in template type checker (#31594) (0db1b5d), closes #30076 #30929
  • ivy: in ngcc, handle inline exports in commonjs code (#32129) (02bab8c)
  • ivy: ngcc should only index .d.ts exports within the package (#32129) (964d726)
  • ivy: ngTemplateOutlet error when switching between null and template value (#32160) (c2868de), closes #32060
  • ivy: run template type-checking for all components (#31952) (bfc26bc)
  • language-service: Instantiate MetadataResolver once (#32145) (6a0b1d5)
  • language-service: Remove ‘context’ used for module resolution (#32015) (a91ab15)
  • ngcc: handle deep imports that already have an extension (#32181) (4bbf16e), closes #32097
  • ngcc: ignore format properties that exist but are undefined (#32205) (f8b995d), closes #32052 #32188


  • ivy: make Hammer support tree-shakable. Previously, in Ivy applications, Hammer providers were included by default. With this commit, apps that want Hammer support must import HammerModulein their root module. (#32203) (de8ebbd)

Bug Fixes

  • bazel: pin [@microsoft](https://github.com/microsoft)/api-extractor (#32187) (a7b9478)

Update August 22, 2019


Bug Fixes

  • bazel: disable treeshaking when generating FESM and UMD bundles (#32069) (4f37487)
  • compiler: do not remove whitespace wrapping i18n expansions (#31962) (0ddf0c4)
  • ivy: reuse compilation scope for incremental template changes. (#31932) (eb5412d), closes #31654

Performance Improvements

  • ivy: don’t read global state when interpolated values don’t change (#32093) (6eb9c2f)

Bug Fixes

  • bazel: disable treeshaking when generating FESM and UMD bundles (#32069) (3420d29)

Update August 13, 2019


Bug Fixes

  • language-service: getSourceFile() should only be called on TS files (#31920) (e8b8f6d)
  • language-service: Make Definition and QuickInfo compatible with TS LS (#31972) (a8e2ee1)
  • upgrade: compile downgraded components synchronously (if possible) (#31840) (c1ae612), closes #27217 #30330

Bug Fixes

Update July 31, 2019


Bug Fixes


  • bazel: compile targets used for indexing by Kythe with Ivy (#31786) (82055b2)
  • upgrade: support $element in upgraded component template/templateUrl functions (#31637) (29e1c53)

Performance Improvements

  • compiler: avoid copying from prototype while cloning an object (#31638) (24ca582), closes #31627

Bug Fixes

Performance Improvements

  • compiler: avoid copying from prototype while cloning an object (#31638) (1f3daa0), closes #31627

Update July 18, 2019

Bug Fixes

  • use the correct WTF array to iterate over (#31208) (9204de9)
  • bazel: pass custom bazel compiler host rather than rewriting one (#31496) (0c61a35)
  • compiler-cli: Return original sourceFile instead of redirected sourceFile from getSourceFile (#26036) (3166cff), closes #22524
  • language-service: Eagarly initialize data members (#31577) (0110de2)

Bug Fixes

Update 11, July



  • core: add automatic migration from Renderer to Renderer2 (#30936) (c095597)

Bug Fixes

  • bazel: revert location of xi18n outputs to bazel-genfiles (#31410) (1d3e227)
  • compiler: give ASTWithSource its own visit method (#31347) (6aaca21)

Compare between 8.2.0-next.0 and 8.2.0-next.1 here on GitHub to see what commits have been made.


_Update 3, July _



  • bazel: allow passing a custom bazel compiler host to ngc compile (#31341) (a29dc96)
  • bazel: allow passing and rewriting an old bazel host (#31381) (11a208f), closes #31341

Bug fixes

  • core: handle undefined meta in injectArgs (#31333) (80ccd6c), closes CLI #14888
  • service-worker: cache opaque responses in data groups with freshness strategy (#30977) (d7be38f), closes #30968
  • service-worker: cache opaque responses when requests exceeds timeout threshold (#30977) (93abc35)

Bug fixes

  • core: handle undefined meta in injectArgs (#31333) (80ccd6c), closes CLI #14888
  • service-worker: cache opaque responses in data groups with freshness strategy (#30977) (b0c3453), closes #30968
  • service-worker: cache opaque responses when requests exceeds timeout threshold (#30977) (a9038ef)

Update 27, June



  • upgrade: provide unit test helpers for wiring up injectors (#16848) (3fb78aa)

Bug Fixes


Bug Fixes

Update 24, June



Update 14, June


  • bazel: do not modify tsconfig.json (#30877) (b086676)
  • bazel: exclude components schematics from build (#30825) (05a43ca)
  • bazel: Load global stylesheet in dev and prod (#30879) (17bfedd)
  • common: expose the HttpUploadProgressEvent interface as public API (#30852) (5c18f23), closes #30814
  • service-worker: avoid uncaught rejection warning when registration fails (#30876) (81c2a94)


Update 3, June

After following the long road towards Angular v8, it successfully launched on May 28, 2019, with new features, changes, and improvements galore.

Now, we embark on a new journey: towards Angular v9! Let’s follow the latest changes and additions. Head on over to the changelog on GitHub to keep track of the news.

Angular 8.1.0 beta is already here, just days after v8 arrived. It includes an array of bug fixes and six new features.

Let’s take a look.


  • bazel: use rbe_autoconfig() and new container. (#29336) (9abf114)
  • common: add ability to watch for AngularJS URL updates through onUrlChange hook (#30466) (1aff524)
  • common: stricter types for SlicePipe (#30156) (95830ee)
  • core: deprecate integration with the Web Tracing Framework (WTF) (#30642) (f310a59)
  • language-service: Implement definitionAndBoundSpan (#30125) (f491673)
  • platform-webworker: deprecate platform-webworker (#30642) (ccc76f7)

Bug Fixes

  • bazel: allow ts_library interop with list-typed inputs (#30600) (3125376)
  • bazel: Bump ibazel to 0.10.1 for windows fixes (#30196) (1353bf0)
  • bazel: Directly spawn native Bazel binary (#30306) (2a0f497)
  • bazel: Disable sandbox on Mac OS (#30460) (b6b1aec)
  • bazel: Exclude common/upgrade* in metadata.tsconfig.json (#30133) (1f4c380)
  • bazel: ng test should run specific ts_web_test_suite (#30526) (e688e02)
  • bazel: pass correct arguments to http_server in Windows (#30346) (3aff79c), closes #29785
  • bazel: update peerDep ranges (#30155) (4ae0ee8)
  • bazel: Use existing npm/yarn lock files (#30438) (ff29ccc)
  • compiler-cli: log ngcc skipping messages as debug instead of info (#30232) (60a8888)
  • core: consistently use ng:/// for sourcemap URLs (#29826) (392473e)
  • core: CSS sanitizer now allows parens in file names (#30322) (728db88)
  • core: fix interpolate identifier in AOT (#30243) (30d1f29)
  • core: migrations not always migrating all files (#30269) (349935a)
  • core: remove deprecated TestBed.deprecatedOverrideProvider API (#30576) (a96976e)
  • core: require ‘static’ flag on queries in typings (#30639) (84dd267)
  • core: static-query migration errors not printed properly (#30458) (6ceb903)
  • core: static-query migration fails with default parameter values (#30269) (6357d4a)
  • core: static-query migration should gracefully exit if AOT compiler throws (#30269) (509352f)
  • core: static-query migration should handle queries on accessors (#30327) (0ffdb48)
  • core: static-query migration should not fallback to test strategy (#30458) (0cdf598)
  • core: static-query migration should not prompt if no queries are used (#30254) (4c12d74)
  • core: static-query usage migration strategy should detect ambiguous query usage (#30215) (8d3365e)
  • core: temporarily remove @deprecated jsdoc tag for a TextBed.get overload (#30514) (f6bf892), closes #29290#29905
  • language-service: Remove tsserverlibrary from rollup globals (#30123) (124e497)
  • router: ensure history.state is set in eager update mode (#30154) (b40f6f3)
  • router: ensure navigations start with the current URL value incase redirect is skipped (#30344) (0fd9d08), closes #30340 #30160
  • router: fix a problem with router not responding to back button (#30160) (3327bd8)
  • router: IE 11 bug can break URL unification when comparing objects (#30393) (197584d)
  • router: type cast correctly for IE 11 bug breaking URL Unification when comparing objects (#30464) (53f3564)

Be the first to share this article with your network! Thank you so much!

What is new Renderer in Angular 9?

What is new Renderer in Angular 9?

Angular 9 Tutorial: Ivy is a complete rewrite of Renderer2 and significantly changes the way the framework renders our applications. Angular's new renderer.

Ivy is a complete rewrite of Renderer2 and significantly changes the way the framework renders our applications. In this high-level overview of the changes, Sumit will introduce you to:

  • the new rendering pipeline and underlying Ivy engine
  • how we can use it to create higher-order components
  • the new component factories and dependency injection
  • how to easily debug them

Angular 9 Renderer2

Extend this base class to implement custom rendering. By default, Angular renders a template into DOM. You can use custom rendering to intercept rendering calls, or to render to something other than DOM.

abstract class Renderer2 {
  abstract data: {...}
  destroyNode: ((node: any) => void) | null
  abstract destroy(): void
  abstract createElement(name: string, namespace?: string): any
  abstract createComment(value: string): any
  abstract createText(value: string): any
  abstract appendChild(parent: any, newChild: any): void
  abstract insertBefore(parent: any, newChild: any, refChild: any): void
  abstract removeChild(parent: any, oldChild: any, isHostElement?: boolean): void
  abstract selectRootElement(selectorOrNode: any, preserveContent?: boolean): any
  abstract parentNode(node: any): any
  abstract nextSibling(node: any): any
  abstract setAttribute(el: any, name: string, value: string, namespace?: string): void
  abstract removeAttribute(el: any, name: string, namespace?: string): void
  abstract addClass(el: any, name: string): void
  abstract removeClass(el: any, name: string): void
  abstract setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void
  abstract removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void
  abstract setProperty(el: any, name: string, value: any): void
  abstract setValue(node: any, value: string): void
  abstract listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void

Create your custom renderer using RendererFactory2.

Use a custom renderer to bypass Angular's templating and make custom UI changes that can't be expressed declaratively. For example if you need to set a property or an attribute whose name is not statically known, use the setProperty() or setAttribute() method.

How to Create Components in Angular 9

How to Create Components in Angular 9

In this article we will learn how to Create Components in Angular 9, use the generate component command of Angular CLI, or its shortcut shortcut command, for creating Angular components in your project.

We can think of Angular Components like LEGO pieces. We create a component once but can use them multiple times in different
An Angular app is a tree structure consisting of all those components that we create, like how we make a Lego Structure from little Lego pieces.

Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.— Angular official docs

In this article we will learn how to Create Components in Angular 9, use the generate component command of Angular CLI, or its shortcut shortcut command, for creating Angular components in your project.

How to Use ng generate component or ng g c

Let's assume we want to create a Angular component named family
Open a new command-line interface, navigate into the root of your Angular project and run the following command:

$ ng generate component family

Or you can also run the following command:

$ ng g c family

Angular CLI will generate 4 files for the component in the src/app folder of your project:

/family/family.component.ts       # Component class
  /family/family.component.html     # Component template
  /family/family.component.css      # Component styles
  /family/family.component.spec.ts  # Component tests

We can also customize where the component's files are placed.

Angular CLI adds the component to the declarations array of the module.

  // [...]
  declarations: [ AppComponent, FamilyComponent ]
  // [...]
export class AppModule { }

This will allow FamilyComponent in any component in the AppModule.

How to Customize the Output of ng generate component

By default the ng generate component or ng g c commands, generate a folder and four files for the component. But you can change the default behavior if you want in two ways:

Using flags with the command,
Using the angular.json configuration file.

Using Flags with the ng generate command
Let's generate an about component without a subfolder and without the specification file.

Head back to the terminal and run the following command:

$ ng generate component about --flat=true --spec=false

Using the angular.json File

Let's now see by example how to configure the CLI from the angular.json file to not generate .spec.ts file for a component.

Go back to your terminal and run the following command:

$ ng config [email protected]/angular:component.spec false

How to Set the Component's Folder

You can aso define the folder of the component by specefying the path as follows:

$ ng generate component components/contact

This will create the contact component inside the components folder which will also be created if it doesn't exist inside the src/app folder of the project.

Manually Creating Components

You can also create Angular components manually by creating the necessary files and add the component's class to the declarations array of the module where it should be used.

Angular CLI Naming Conventions

When you create an Angular component with Angular CLI, it will follow these conventions:

The Component suffix is added to the name you submit for the component.
The app- prefix is added to the selector of the component.
The name of the component class is in upper camel case,

That's what this article wants to share with you on how to create components in Angular using the ng generate component command or its ng shortcut shortcut command.

Learn More

Thanks for reading !