Hello everyone,
I'm going to share my experience and journey to my first contribution to Angular. I'll cover how I contributed, what are the problems I faced and how I overcame them.
Background
I love Angular and to prove that, I've been working with Angular from v1(Angular JS) till the current version. I always wanted to contribute something to the Open source, but there were a lot of self-doubts.
I came to know about Hacktoberfest 2-3 years back. The purpose of Hactoberfest is to make developers start contributing to Open Source. You can get a free T-Shirt & Swag if you complete the below things
- 4 Contribution to be done on any Open source project between October 1 & 31st.
- It can be a document change, bug fix, or new feature.
So, that was the time I learned about what is PR, how to raise PR, etc.
In 2019, I contributed to the ng-select Angular library that has 2.7k+ stars & around 700 forks & finally completed the challenge & received T-shirts & stickers. That was the year my self-doubt was started to reduce.
ng-select is an Angular Library that is Lightweight all in one UI Select, Multiselect, and Autocomplete.
I always wondered If I can able contribute even some fixing minor bugs to the Angular framework or not.
I joined Angular discord channel 2 days back. And this was my intro 🙂
Finding the problem in Angular.io
Angular.io is the documentation website for Angular. It has examples of modules, components, services, patterns, etc.
I was going through the documentation last week and I found that the selector reference was wrong.
Let me tell you the problem.
A CountdownTimerComponent has app-countdown-timer selector. This is fine.
In the next section, the component was wrongly referred to as <countdown-timer> instead of app-countdown-timer.
I was thinking If can I raise a PR to fix this. Few days have crossed and I didn't raise for the following reasons.
- The fix was a minor change.
- Some Contributing guidelines are new to me.
- We need to sign CLA. I thought the CLA process would be very long.
- Docs and all packages exist in one repo. How to run the angular.io docs site in local and to verify?
Motivation
2-3 days back I came across How I Fixed a Bug in Angular article in my feed. The author mentioned his experience on raising PR and the process in Angular repo. So, that's motivated me to raise the PR for the issue in the documentation.
Raising PR
Now with a fresh mind, I went to the Angular repo to read the Contributing guidelines. Signing the CLA process was very simple. They gave clear steps on how to fork the repo, how the commit message should be. So, I quickly forked the repo and made that selector change.
Problem 1
The next problem I was struggling with was how to verify this change in my local. I tried some scripts available in the root package.json, but nothing helped me how to run the server to see the documentation.
Again, I went to the angular repo and went into the aio subfolder. Then, I saw the steps on how to run and serve the documentation locally. After 30 minutes of struggle, I was able to see my changes in the local server and ran the lint, e2e, and raised the PR.
Problem 2
After few minutes, I got a reply to my PR to change my commit message as it doesn't follow guidelines.
I was blind on how to change the commit message which I already pushed. I read on some sites how to do it but a the same time I don't want to break something in my PR. Then, I created a test repo, reproduced the same thing, and tried the following thing to fix it.
- Modified the commit with
git commit --amend. - Pushed to the remote branch with force.
git push origin branch -f.
Maybe, The force was with me! 😁
Then I followed the same approach to my PR in angular and successfully updated it. 🤩 🥳
Conclusion
The takeaway of this article is don't wait for something to happen. Even it is a small change, go and do it. It takes a small step to achieve big things. Perseverance is important. Motivate yourself, you can achieve it.
I hope you enjoyed this article or found it helpful.
You can connect with me on Twitter & Github 🙂
Support 🙌
You can support me by buying me a coffee with the below link 👇
