How I became an Angular contributor 🙃
Tags: angular, opensource, zonejs, watercooler
Published: 2022-04-04 19:20:55

**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](https://github.com/angular/angular/pull/45391) 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](https://github.com/SAP/spartacus/issues/14372). 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`](https://stackoverflow.com/a/57854350). Thanks to this plugin, I quickly located the faulty line in the code and [fixed the hanging SSR in the app] (https://github.com/SAP/spartacus/pull/15297). 

### 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 🐾”](https://dev.to/krisplatis/how-to-find-out-why-angular-ssr-hangs-track-ngzone-tasks-4nbd) (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](https://github.com/angular/angular/blob/d1ea1f4c7f3358b730b0d94e65b00bc28cae279c/packages/zone.js/lib/zone-spec/task-tracking.ts#L9-L82) 👨‍💻 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](https://github.com/angular/angular/issues/45350), 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](https://github.com/angular/angular/pull/45391), 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](https://github.com/angular/angular/pull/45391#discussion_r830687138). After I provided the improvements, [they approved my fix](https://github.com/angular/angular/pull/45391#pullrequestreview-916707310) and after the next 2 days [my bugfix PR got merged to the Angular main branch](https://github.com/angular/angular/pull/45391#issuecomment-1077888773)! 🚀

And… that’s how I became an Angular contributor! 😄
 
PS. Thank you [`@Jialipassion`](https://twitter.com/Jialipassion) for reviewing my PR.