How I became an Angular contributor 🙃

#angular #opensource #zonejs #watercooler

I discovered in the Angular repository a not well-known plugin for zone.js: zone.js/plugins/task-tacking. By accident, I found a bug there. Then I went ahead and created a Pull Request that fixed this bug in the Angular repo. After a few days it was merged into the main branch by Angular maintainers! And… yay, I became an Angular contributor!

Discovery of the not-well known plugin

I was struggling to find out why the Angular Universal SSR was hanging in my app. I knew it had to be some pending async task that prevented the SSR from completion, but it was hard to guess which one. So I googled how to track async tasks in Angular and I learnt about the plugin zone.js/plugins/task-tracking. Thanks to this plugin, I quickly located the faulty line in the code and fixed the hanging SSR in the app.

Writing a blogpost

I believed the plugin zone.js/plugins/task-tracking was not well known nor documented. So I was excited to share the knowledge about it in a blogpost. And I wrote a draft of the article “How to find out why Angular SSR hangs - track NgZone tasks 🐾” (which is already published now). But before publishing, I wanted to double check if my article was 100% correct. So I tested the code snippet from my post against a minimal representative pending async task - setInterval(()=>{},1000). To my surprise, my code snippet didn’t log any pending async tasks! I was very intrigued... 🤔

This plugin has a bug!

The next evening I launched my laptop and investigated carefully the source code of that zone.js plugin 👨‍💻 and unexpectedly, I discovered a bug there! 😲

Then I supplied my blogpost with a disclaimer paragraph saying that my code snippets don’t work in some cases, because of a known bug in the plugin zone.js/plugins/task-tracking.

But… mentioning a known bug doesn’t look credible until you reference a specific GitHub issue, right? So I created a bug ticket in the Angular repo, where I included minimal steps to reproduce, the arguments why I believe the bug is important, and even the suggestion how to solve this bug 😁.

Then I waited a few days hoping for an enthusiastic reaction from Angular maintainers, but… they didn’t seem eager to fix this bug right away. I respected that they might have other priorities, so I realized the bug will be fixed sooner when I provide the PR.

Pull request to Angular repository

So in another evening I created a bugfix PR, following all the Angular’s Contributing Guidelines (including unit tests, conforming the commit format, etc.).

The PR quickly got the attention of Angular maintainers! They asked me to enhance one unit test. After I provided the improvements, they approved my fix and after the next 2 days my bugfix PR got merged to the Angular main branch! 🚀

And… that’s how I became an Angular contributor! 😄

PS. Thank you @Jialipassion for reviewing my PR.