How To Contribute To Open Source Angular Projects

Contribution to open source projects is something that many developers want to do but find daunting when they get started. In this article I’ll guide you step by step through the process of contributing back to an open source project. Using Angular as the example, there are some prerequisites that we’ll need to install first. We’ll then fork the codebase and commit our first change before publishing it on GitHub.

Learning how to contribute to a large open source project can be daunting. The first thing you need to do is get your development environment setup, then pick a project you are interested in and start contributing! The goal of this post is to give you a list of step by step directions on how to get started with contributing to an AngularJS open source projects.

Storybook (User interface)

Stars on GitHub: 49,200+

Storybook is one of the best open-source Angular projects that allows teams to make UI (user interface) components for React.js, Vue, and Angular. Furthermore, support for React Native, a cross-platform framework, has been added recently.

This development environment runs outside of the application, which enables specialists to easily reuse various components. Employing this tool, you don’t have to worry about software-specific dependencies. As a consequence, you significantly reduce the time for creating and testing a digital product.

Many world-renowned companies built their software solutions using Storybook that involve Coursera, BBC Psammead, Semantic-UI, Uber React-Vis, Airbnb Dates, Wix Style React, and Buffer Components.

Understanding how a project works

Not all open source projects operate in the same way. Some allow contributions from anyone. Some require you to work your way up to get contribution privileges. Some have multiple people involved in managing a project. Others have a single person in charge, a so-called benevolent dictator for life. 

Contribution guidelines help you understand how to approach your participation in a project. It will explain how to reach out about a contribution, provide templates for communicating bugs and suggesting features, list work that is needed by maintainers, project goals, etc. An amazing example is the Angular contribution guide which lists all kinds of useful information for new contributors like their commit message guidelines, coding rules, submission guidelines, etc. in great detail. 

In addition to contribution guidelines, some projects will have a code of conduct. It usually outlines community rules and behavior expectations. It’s meant to help you know how to be a amiable and professional contributor and community member. Angular, for instance, has an awesome code of conduct that lists what they consider unprofessional conduct, their responsibilities to the community, and how to get in contact in case someone violates it.   

Big projects may have governance policy and team documents that outline specific roles in the community, teams, sub-committees, contribution workflows, how discussions are conducted, and who gets to commit. These kinds of documents are essential to understanding how the community operates. The about page on angular.io, for example, lists who all the core team members are, their roles, and other contributors. On Github, they also have a docs folder containing policies regarding contribution.  

Even after you’ve gone through the documentation, you may still need to ask questions to active members of the community. Despite doing your research, you may still be stumped on a particular aspect of the project. To interact with other contributors, join community communication tools like Slack, IRC etc., sign up for newsletters, and subscribe to their mailing list. Angular uses Gitter as its community communication tool and directs contributors with questions/problems to Stack Overflow, where they can get help using the angular tag. Connect with community members and develop relationships with them as it will expose you to facets of the project that you may be unaware of. 

Having a good grasp of the technical aspects of the project and how it’s organized is essential to making contributions that meet the project’s standards. To understand technical parts of the project, consult the project README, wikis, tutorials, and documentation. Angular, for example, has docs explaining their Github process, building and testing, their coding standards, debugging, PR reviews, etc. Going a step further, look at past feature integrations and bug fixes in merged pull requests which are full of discussions by other contributors and can be a rich source of context. As the project evolves, pay attention to it, frequently follow issues, features, discussions, pull requests, and bug fixes to continually learn how it works. For instance, a contributor can follow this example of an Angular feature request discussion about a form API to better understand how Angular forms work, bundle size management, etc.

An open source project is sort of like a project at any company you might work at; there will be a house coding style, team culture, and workflows for getting things done. The difference is that open source projects can and will have a much different group of people working on them. 

 Angular-CLI

Stars: 23,400+

Created on top of Angular DevKit, Angular-CLI serves for building, testing, and managing Angular applications. Representing a command-line interface (CLI) solution, it offers a variety of libraries for code deployment and analysis.

Using Angular-CLI, you can develop software from scratch, maintain the existing projects, and run numerous unit and other tests.

Finding projects to work on

One way to find projects to work on is to look to open source software you use often and like. Is there a tool, package, framework, or a language that you work with regularly and enjoy using? Find out whether it’s an open source project by checking its license and if it accepts contributions and is active. Working on things you already use gives you an edge when contributing because you’re already pretty familiar with how it works and have experience using it. As a bonus, you can address problems that have been bothering you or suggest features that you want in the software. If you are going to contribute code to the project, be sure you can work in the language it’s written in. 

If the above approach may not work for you, try using the Github explore page to find projects that are accepting contributions or actively want help. Github suggests projects you may like based on people and repositories you follow, star, and watch. Another way to find projects is to use Github’s search tool by entering beginner-friendly contribution tags like good-first-issuegood-first-bugbeginner-friendlyeasylow-hanging-fruitfirst-timers-only, etc. Filter search results to return issues in open states and in the languages you’d like to work in. There are tons of other tools, platforms, and programs where you could find open source projects that I’ll list at the end of this article to help you with your search. 

To have a positive contribution experience, try to avoid communities that are hostile to beginners and generally problematic. If for example, when trying to ask legitimate questions after you’ve done your research, you receive dismissive and combative comments or insults, it’s best to stay away. Another sign to be watchful for is a pattern of unprofessional behavior within a community. Some open source software projects have been infamous for this sort of thing. So do your research before contributing. 

 Ngx-admin

Stars on GitHub: 20,700+

Launched by our team at Akveo , ngx-admin is a web dashboard template that has a component-based structure. Being accessible free of charge, it is based on Angular 8+, Bootstrap 4+, and , another cool product invented by our company.

Furthermore, ngx-admin offers support for Eva Design System , which helps designers and developers faster build applications that provide an amazing user experience. As of today, it is one of the most well-known Angular open-source projects in the world.

Ngx-admin involves a number of useful features that include charts, tables, maps, forms, editors, a responsive layout, and a lot more. You can find 6 visual themes:

Ngx-admin provides clients with 2 dashboards-IoT and e-commerce-and 40+ pages. Being easily customizable, the product contains various UI components to design beautiful software solutions. Employing this template, you can save about $35,000 and nearly 500 hours on application development.

Picking issues to work on and making contributions

Projects may list the work that needs to be done in task, bug, and issue trackers. For example, Angular uses Github’s project management feature to outline and assign tasks and track their progress. If a project has one, get access to it. 

As a rule of thumb, start with the easiest and smallest contributions first that take the least amount of work to build up your confidence and credibility before trying harder contributions. Writing documentation and fixing typos is a good place to begin. Look for issues that are tagged for beginners with the tags mentioned earlier. 

After you pick a task you think you can finish, do your research. Read documentation, code, and discussions related to the task to get a better understanding of what to do. If you’re stuck on something even after you’ve researched it, reach out to the community and ask for help, clarification, or mentorship. However, make sure that you discuss issues related to the task publicly so that the rest of the community can benefit from what you learn. For example, discuss an issue publicly on Github versus in a private direct message on Slack. Once you feel like you have enough context on a task and know how to go about it, write some code and submit a PR. Github has a great checklist about what to check for before you contribute to a project so your effort is not wasted.

Conclusion

Open source is awesome! Not only does it allow you to use great software for free, but you have the opportunity to contribute to the success of your favorite project. The developers and maintainers on these projects are extremely thankful and responsive if you take the time to say thanks by contributing to their projects.

0 Comments

No Comment.