Cover photo by bamagal on Unsplash.

Original publication date: 2020-01-20.

Which obstacles will Angular need to overcome in 2020?

For the last several years, the Angular team has devoted most of its attention to Ivy. As a result, there is considerable ground to cover in the year ahead.

Let's examine the current state of the ecosystem and the ways in which you can assist the Angular team in resolving outstanding issues, allowing them to dedicate time to new functionality in Angular versions 10 and 11.

Update 2020-11-18

  • As of November 2020, RxJS 7 has not yet been released.
  • Bazel is no longer tied to Angular.
  • TSLint reached end-of-life on December 1st, 2020.
  • The Angular roadmap raises questions about the future of Protractor.
  • Augury's support for Angular Ivy remains partial, leaving many of its features non-functional.
  • The strategy for Angular Ivy libraries has shifted according to this RFC and is currently under active development per the Angular roadmap. This represents a notable departure from what is outlined in this article.

RxJS version 7 is slated for 2020. It will deprecate features destined for removal in version 8 and introduce breaking changes based on what was deprecated in version 6.x. It is even conceivable that RxJS version 8 could appear within the year.

The official Angular packages establish the benchmark for RxJS compatibility. Angular version 9 will most likely ship with support for RxJS version 6.5.

For a framework as deeply intertwined with RxJS as Angular, this poses a significant challenge. Many of us still recall the pain of migrating from RxJS versions 5.x to 6.0.

Because both RxJS versions 7.0 and 8.0 will include breaking changes, Angular can only align its compatibility during its own major releases. In practical terms, the earliest we could see support for RxJS version 7.x is Angular version 10.0. Similarly, RxJS version 8.x would have to wait until Angular version 11.

Fortunately, Angular CLI schematics have simplified the process of adding migrations to handle breaking changes during upgrades.

How can I help?

  1. Publish articles that inform the community about the forthcoming changes in RxJS 7.x and 8.x.
  2. Contribute to the RxJS documentation.
  3. Assist in building ng update schematics for RxJS versions 7.0 and 8.0.

The intention is to offer support for Bazel version 2.1 as an opt-in choice for Angular version 9. Over time, Bazel is expected to become the default build automation system for the Angular CLI.

How can I help?

  1. Enable Bazel in your Angular version 9 project by executing ng add @angular/bazel.
  2. Set up new Angular version 9 projects with Bazel by first consulting the Bazel installation guide, followed by this command: npx -p @angular/bazel ng new --collection=@angular/bazel my-angular-workspace.
  3. Report issues to the Angular and Bazel GitHub repositories.

Adding @angular/bazel switches your angular.json to use the @angular/bazel:build Angular CLI builder and generates setup and configuration files for dependencies such as RxJS and Protractor.

TSLint is officially deprecated and will cease all maintenance at the close of 2020.

The official Angular CLI lint builder and the Codelyzer lint rules both rely on TSLint. The Angular team intends to swap TSLint for ESLint in Angular version 10.

How can I help?

  1. See the update on this issue from Minko Gechev.
  2. Support James Henry in developing an Angular CLI builder for ESLint and porting Codelyzer rules to ESLint.

The default end-to-end testing framework bundled with Angular is in a precarious state. Protractor saw almost no development throughout 2019, despite an ever-growing backlog of issues—roughly 200 filed in that year alone—and breaking alterations in the Selenium WebDriver APIs it depends on.

The most recent stable release (5.4.2) of Protractor dates back to December 2018. A very unofficial version 6 appeared in March 2019 but has yet to be tagged as latest on NPM.

To begin with, the upgrade forces us to rewrite our test suites to use async-await in place of synchronous steps, a consequence of changes in Selenium WebDriver. Furthermore, certain features are malfunctioning, and documentation and type definitions are either incomplete or outdated.

The Angular team has assumed ownership of Protractor, but their focus on Ivy has likely left little room for Protractor and Selenium.

How can I help?

  1. Protractor is in need of ng update schematics to migrate tests from Protractor 5.x to 6.0, converting them to async-await for browser interactions and DOM queries.
  2. Protractor requires fully refreshed types from selenium-webdriver.
  3. Protractor needs its documentation brought up to date to mirror the API changes and the overall testing workflow.
  4. webdriver-manager (a component of Protractor) requires bug fixes and documentation improvements.

Augury serves as the official in-browser developer tool for Angular, maintained by Rangle.io. Although it has kept pace with bug fixes, it has not gained any meaningful features since its initial launch.

The main challenge for Augury in 2020 is its lack of a concrete strategy for Ivy support, which leaves it ineffective for newer and actively maintained projects using Ivy.

Ivy eliminates ng.probe but introduces a fresh set of runtime debugging APIs.

How can I help?

  1. Reach out to the Angular team about assisting with documentation for the new debugging APIs.
  2. Fork Augury, adapt it to the Ivy debugging APIs, and open a pull request.
  3. Submit issues to the Augury GitHub repository proposing new use cases.

The arrival of Angular version 9 marks the formal beginning of the roadmap from View Engine to Ivy.

For Angular version 9, the guidance is to enable Ivy in applications while continuing to distribute View Engine libraries.

For Angular version 10, the guidance shifts to publishing AOT-compiled Ivy libraries.

For Angular version 11, View Engine will be dropped from applications, yet the Angular compatibility compiler will ensure that Ivy applications can still consume View Engine libraries.


Table 1. The View Engine-to-Ivy transition plan. Open in new tab.

Table 1 outlines the Angular team's recommendations for each phase of the transition plan.

How can I help?

  1. Add Angular libraries to the Angular Ivy library compatibility validation project.
  2. Address issues for libraries that don't pass Ivy compatibility validation by filing issues, or preferably, submitting pull requests to their GitHub repositories.

Angular Ivy represents a monumental undertaking. Even with the first stable release arriving in Angular version 9, the Angular team still has numerous challenges to tackle in 2020.

We've explored how various technological hurdles shape the Angular ecosystem in 2020. Along the way, I've outlined ways you can contribute to the Angular ecosystem by lending a hand with each of these topics:

  • RxJS
  • Bazel
  • TSLint
  • Protractor
  • Augury
  • The View Engine-to-Ivy transition plan

Happy contributing!