How you can help Angular in 2020

Cover photo by bamagal on Unsplash.

Original publication date: 2020-01-20.

What are the toughest challenges for Angular in 2020?

Ivy has taken up most of the Angular team's time for the past few years. There's a lot of catching up to do in 2020.

We're going to look at what is going on in the ecosystem and how you can help the Angular team solve issues so that they can focus on bringing in new features to Angular versions 10 and 11.

Update 2020-11-18

• RxJS 7 is not released as of November 2020.
• Bazel has been detached from Angular.
• TSLint is end-of-life as of December 1st 2020.
• The future of Protractor is being questioned in the Angular roadmap.
• Augury still only has partial support for Angular Ivy, that is many features are broken.
• The strategy for Angular Ivy libraries has changed according to this RFC and is currently in active development according to the Angular roadmap. This is a significant change from what is described in this article.

RxJS

2020 is the year we will see RxJS version 7. It deprecates features that will be removed in version 8 and it introduces breaking changes based on features that were deprecated in version 6.x. We might even see RxJS version 8 in 2020.

The official Angular packages sets the bar for RxJS compatibility. Angular version 9 will most likely be released with RxJS version 6.5 support.

This can prove a challenge to a framework so tightly coupled with RxJS. Some of us clearly remember the upgrade from RxJS versions 5.x to 6.0.

Since RxJS version 7.0 and 8.0 will both contain breaking changes, Angular can only upgrade compatibility in its own major versions. This means, that the earliest we will see RxJS version 7.x support will be Angular version 10.0. Likewise, RxJS version 8.x will at the earliest be supported in Angular version 11.

Luckily, Angular CLI schematics have made it easy to add migrations to support upgrading despite breaking changes.

How can I help?

1. Write articles to educate on the upcoming changes in RxJS 7.x and 8.x.
2. Contribute to the RxJS documentation.
3. Help build ng update schematics for RxJS versions 7.0 and 8.0.

Bazel

The plan is to release support for Bazel version 2.1 as an opt-in option for Angular version 9. Eventually, Bazel will become the default build automation tool for the Angular CLI.

How can I help?

1. Opt-in to Bazel in your Angular version 9 project by running ng add @angular/bazel.
2. Create new Angular version 9 projects using Bazel by first following the Bazel installation guide, then using this command: npx -p @angular/bazel ng new --collection=@angular/bazel my-angular-workspace.
3. File issues on Angular and Bazel's GitHub repositories.

Adding @angular/bazel converts our angular.json to use the @angular/bazel:build Angular CLI builder and generates setup and configuration files to support dependencies like RxJS and Protractor.

TSLint

TSLint is now deprecated and will entirely stop maintenance at the end of 2020.

The official Angular CLI lint builder and the Codelyzer lint rules both depend on TSLint. The Angular team plans to replace TSLint with ESLint in Angular version 10.

How can I help?

1. Refer to this issue update from Minko Gechev.
2. Help James Henry create an Angular CLI builder for ESLint and migrate Codelyzer rules to ESLint.

Protractor

The official end-to-end testing framework that comes out-of-the-box with Angular is not in a good place. Protractor has barely been touched in 2019 despite a growing number of issues (around 200 open issues from 2019 alone) and breaking changes in the Selenium WebDriver APIs it wraps.

The latest stable version (5.4.2) of Protractor was in December 2018. There was a very unofficial version 6 release in March 2019 which has not yet been tagged as latest on NPM.

First of all, the upgrade requires us to refactor all of our tests to use async-await instead of synchronous steps because of changes in Selenium WebDriver. Secondly, some features are broken and documentation and types are partially missing or out of date.

The Angular team has taken ownership of Protractor, but they have probably been too busy with Ivy to deal with Protractor and Selenium.

How can I help?

1. Protractor needs ng update schematics to migrate tests from Protractor 5.x to 6.0 and make them use async-await when interacting with the browser and querying the DOM.
2. Protractor needs fully updated types from selenium-webdriver.
3. Protractor needs to update its documentation to reflect the API changes and general flow of tests.
4. webdriver-manager (part of Protractor) needs ironing out of bugs and updates to its documentation.

Augury

Augury is the official in-browser developer tool for Angular, maintained by Rangle.io. While it has been keeping up with bugfixes, it hasn't seen any noteworthy feature additions since its initial version.

The 2020 challenge for Augury is that it doesn't yet have a plan to support Ivy, rendering it broken for new and well-maintained projects that use Ivy.

Ivy removes ng.probe, but introduces a new set of runtime debugging APIs.

How can I help?

1. Ask the Angular team how you can help document the new debugging APIs.
2. Fork Augury, migrate to the Ivy debugging APIs and submit a pull request.
3. File issues to the Augury GitHub repository suggesting new use cases.

The View Engine-to-Ivy transition

The release of Angular version 9 officially marks the start of the transition plan from View Engine to Ivy.

In Angular version 9, the recommendation is to switch applications to Ivy, but keep publishing View Engine libraries.

In Angular version 10, the recommendation is to publish AOT-compiled Ivy libraries.

In Angular version 11, the View Engine will be removed from applications, but the Angular compatibility compiler will make sure that Ivy applications can still work with View Engine libraries.

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

Table 1 lists the Angular team's recommendations for the different stages of the transition plan.

How can I help?

1. Add Angular libraries to the Angular Ivy library compatibility validation project.
2. Help resolve issues for libraries that fail the Ivy compatibility validation by submitting issues or better yet pull requests to their GitHub repositories.

Conclusion

Angular Ivy is a huge effort. With the first stable release in Angular version 9, the Angular team is still left with quite a few challenges to solve in 2020.

In this article, we looked at how different technology challenges affect the Angular ecosystem in 2020. I suggested how you can contribute to the Angular ecosystem by helping out with each of these topics:

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

Happy contributing!

Comments

[John Peters]

Hello Lars;
I've abandoned all Protractor and all Karma/Jasmine work in favor of Cypress. Cypress is a direct 1 to 1 replacement for Protractor but overlaps into the Unit Test layer due to its ability to intercept and alter all incoming and outgoing HTTP requests.

Cypress majorly reduces the dependency issues found in all Angular Unit Test frameworks, because it runs in the browser! No more client side mocking, no more major hunting down dependencies.

I understand there's a Goolge Cypress-like clone, which I haven't tried yet. Maybe someday I'll get there.

[damoeb]

As always it comes down to what you want to test. Protractor uses Selenium to talk to a browser (so you could test browser support) cypress has their own chrome runtime. Because of complexity and runtime overhead I want to have as little end to end tests as possible (smoke test). If you test all layers and a test breaks, the reason can be in every one of these layers and the infrastructure. If tests become flacky, its better to have none at all, because you will get less confident depending on them.

Unit tests have a different purpose. They validate the logic of the function under test. They are fast, independent, stable. You can execute thousands of unit tests or a handful of cypress/selenium tests.

Personally I would do a manual smoke test instead of automating a fragile jenga tower. And once the software is mature enough build a ton of unit tests, maybe even property based tests.

[John Peters]

Hello damoeb;
I was a test manager of a team of 35 people in three continents for 7 years, (at one time). I am very familiar with testing methods and terminology.

The problem I kept seeing then, was that the traditional concepts of Unit Testing, E2E, and even Smoke testing are off-base today. All have very specific definitions which managers or product owners feel is the "right" one. Unfortunately most of them are not developers and are under the assumption their understanding of those definitions are only what they think they are, with no need to communicate that understanding.

Those old definitions are over 20+ years old. Since then, new tools such as Cypress have crossed the line from only E2E to overlapping with Unit Test and Smoke Test ability. It's a true one-stop-shop.

Cypress does not need, as you know; the huge Protractor and Selenium set up. It's simply a browser driver (similar to Selenium) which allows http request interception. This allows for creating unit tests by altering the data.

It's fast, complete, and requires only a small ramp up time to get going. Unfortunately it's based on JQuery, but for the goodness it has, I am easily able to overlook that part.

My motto "In 2021; Just say no to Karma/Jasmine or Protractor/Selenium"

[Lars Gyrup Brink Nielsen]

Thanks for discussing, everyone. Just wanted to make you all aware that there are plenty of options for end-to-end testing:

• CodeceptJS
• Cypress
• Intern
• Nightwatch.js
• Playwright
• Protractor
• Puppeteer
• TestCafe
• WebdriverIO

[John Peters]

I was wanting to look into Puppeteer a while back, today I found this on their site:

How to intercept an HTTP request in Puppeteer

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setRequestInterception(true);
  page.on('request', interceptedRequest => {
    if (interceptedRequest.url().endsWith('.png') || interceptedRequest.url().endsWith('.jpg'))
      interceptedRequest.abort();
    else
      interceptedRequest.continue();
  });
  await page.goto('https://example.com');

  await browser.close();
})();

They too can intercept inbound and outbound requests ✔️
I don't know yet if the data can be changed, but the workflow can be altered.