Exporting/Importing Angular Components Using the BitSrc Framework

This article is useful for experienced Angular developers. This article explains how to export Angular components from your project to bit and importing existing components from bit to your new project.

Angular is a component-based framework. Components are the main building blocks of the Angular framework. Using bit export/import we can avoid writing code for components, again and again, thus following DRY (Don’t Repeat Yourself) principles.

Advantages of the Web Component Library Approach by Importing/Exporting Components

Before using import/export components, first, we should understand the advantages of using the web component library approach.

• Reusability – One of the most important advantages of importing/exporting components is the reusability of code in our application. From Bit, it's easy to plug into our application using bit import.

     bit import username.foo/bar --path src/foo         

• Increase Development Speed – Components can be stored in a repository from which different a team can access, integrate, and modify them, throughout the development process. Existing components from projects can be stored in Bit using Bit Export, stored components from Bit can be used later by the team using Bit Import.

     bit export username.shopping-cart       

• Easy Integration – Components are always developed by the development team, production quality user interface code can be managed in a centralized repository (Bit Src – https://bit.dev).

Application development teams can use this source code repository and they can easily integrate those components into their own module or components.

https://bit.dev/ebyjane/shopping-cart/shopping-cart/~code – Collections

https://bit.dev/ebyjane/angular/global/ui/~code – Web component UI library

We can easily import these components to our projects using Bit import:

bit import username.foo/bar --path src/foo 

Why Bit?

Bit makes your components discoverable for use and development from different projects while keeping them synced across your codebase. You can think of Bit as a shared Lego box where your team can find the pieces they need to build new projects faster.

Advantages of Using Bit

Bit makes your components discoverable so that every developer can easily find and use them in their projects. Discoverability is achieved by organizing your components, making them easy to find, choose, and use.

Steps for Importing/Exporting Angular Components to Bit

The below steps easily allow us to export and import Angular components

• Initializing Bit On a Project

• Track Components

• Tag and Export

The below images shows how the components will display after exporting web components from your project to Bit

Below is the code for importing components into a specific directory in your project:

Conclusion

We've been developing the same components for different projects, again and again, but now we can export the developed components into Bit and import into new projects when needed. By doing this we follow the DRY (Don't Repeat Yourself) principle and save a lot of development time. 

If you want to give it a try, download the Angular code, install and run it (there is only a front-end Shopping Cart and back-end in Firebase). And don't forget to give me some feedback. I would be interested to see more Angular-based component libraries pushed to Bit and used for future projects.