Sharing Reusable Angular Components

When building Angular applications you compose the UI of your applications through shared reusable Angular components.

These components can be reused between different projects and applications, so that you don't have to reinvent the wheel every time. By individually sharing, versioning and updating these components you can speed your Angular development and keep your UI consistent for users.

In 2018, bit was introduced for JavaScript projects and was mainly adopted by the React community. In 2019, following a collaboration between the Bit and Angular teams, Bit's component workflow was made available for sharing reusable Angular 8+ components across projects and teams.

In this post, we'll see how to leverage open-source project Bit to rather quickly isolate, version and share reusbale components from an Angular application or library, and use them across different projects. We'll also see how you can suggest and update changes from different projects, so that your team can collaborate over components to build multiple applications.

Why share individual components?

When trying to share components we often face questions like "how should we version and update these components? how can we make individual components available to consume? how can we make the components discoverable for our team to find and use in their code?"

Bit was built to manage atomic components across multiple repositories. It isolates components in a project with all their files, dependancies and setup (compiler etc). Then, it lets you use them in other projects while managing changes to both source-code and dependancies. It also plays with tools like Git and NPM, and provides a free shared component-hub where you can host, organize and discover your team's components.

Let's see how you can leverage the new support Bit provides for Angular to enable sharing and collaboration over your reusable components. Here's an example of `src/app/components/ in the ngPrime library on GitHub:

Using Bit, and without any refactoring, it was shared as a collection of reusable components you can now discover and use in different projects:

Each component can be played-with in a live playground before using it, and you can install it using NPM or Yarn. You can also use Bit to import the component's code, make changes, and update the component's version. Let's see how you can create a shared collection for your own projects. It can be used with a library project, or directly between apps- it's up to you.

Before you start, you can also check out the Bit with Angular tutorial and the Bit with Angular guidelines, both reviewed by the Angular team.

1. Track reusbale components in your Angular project

Let's get started. Choose a project tat has some Angular components in it, and make sure each is wrapped with an ngModule. If you don't have a project, you can try this demo application based on the official NG tutorial.

Short setup

First, head over to bit.dev and create a free account. There you can later host and share your components. Next, install Bit and run `bit login` to authenticate Bit to your bit.dev account:

$ npm install bit-bin -g

$ bit login

Now head over to your Angular project and initiate a Bit workspace:

$ bit init

That's it. You are now set to start sharing components.

Add the components

In most cases, it's recommended by the Angular team to keep each component in an ngModule. Let's tell Bit to track all components in the project's `src/app/components` directory.

For Angular components, we also need to specify the component entry point, which in most cases will be the file containing the ngModule. Here's an example:

$ bit add src/app/components/*/ -m 'src/app/components/{PARENT}/{PARENT}.ts'

Bit now track all the components in the directory, and wrapped each of them in an isolated "capsule" that contains the files of the component as well as any dependancies it has (Bit analyzes the code to identify all dependancies and add them as part of the component's capsule).

You can run a quick `bit status` to validate that all is ok, and add any missing files or dependancies if Bit finds them to be missing.

$ bit status
new components

     > component-name1 ... ok
     > component-name2 ... ok

Define a compiler

Before we can share and reuse the component in other projects we have to make sure the code can be built and run outside of your project. To do that, let's add a compiler to built the components. bit.dev provides many compilers (you can add your own), so let's install the Angular compiler:

$ bit import bit.envs/compilers/angular --compiler 
the following component environments were installed
- bit.envs/compilers/[email protected]

2. Share the components to your reusbale collection

So now your components are tracked, packed and ready to be shared. Next, let's set a version for the components. Bit lets you set an individual version to each component, so you can later develop and update this component without coupling it to the rest of your library project.

Let's set a semver of 0.0.1 to all the components we tracked in the repo.

$ bit tag --all 0.0.1
N component(s) tagged

new components
(first version for components)
     > [email protected]
     > [email protected]

You can run another `bit status` to see that your components are versioned and ready to be shared.

$ bit status
staged components

     > component-name1. versions: 0.0.1 ... ok
     > component-name2. versions: 0.0.1 ... ok

The important thing to notice here is that the component is considered staged. That means that it is now ready to be exported.

To export the component to your bit.dev collection, we will use the export command and the full name of the collection, structured as <username>.<collection>:

$ bit export <username>.<collectionname>

exported N components to scope <username>.<collectionname>

That's it :) Now head over to your collection at bit.dev and view your Angular components. You can search the components by context, name, bundle-size, dependancies and other useful parameters.

And, you can create and save an example for each component in the live playground in the component's page.

These examples will also be turned into screenshots that show up in the collection page and search results, for quick visual browsing. Next, let's see how to install an individual reusbale Angular component in a new project.

3. Install the components with npm/yarn

Here's an example of a an Angular spinner component created in the bit.dev open-source community. Let's take a look at the component.

As you can see, there's a left pane suggestion installation with a verity of tool. Let's use your NPM client to install the component from the bit.dev registry. Since you already run `bit login`, your NPM client is already configured to support bit.dev as a scoped registry to install packages.

Head over to a new project and just copy-paste the install command:

npm i @bit/joshk.ng-spinners.facebook-loader

And that's it. Take a look at your new project's `package.json` file. By installing individual components, you can avoid the redundant weight, complexity and overhead of adding an entire library to your new app.

Then, you can use it in your code like any other package.

4. Update components from a consuming project

Bit has another unique ability that can prove useful when collaborating over shared components. You can use Bit to bring a component's source code right into a consuming project and make changes directly to the code (which isn't possible when installing as a package).

Just se your CLI to run `bit init for the new project:

$ bit init

and then copy-paste the import command from bit.dev:

bit import joshk.ng-spinners/facebook-loader

Now, you can make changes to the code right inside your consuming project. When done, run a `bit status` to validate the changes are tracked.

$ bit status

modified components
(use "bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)

     > component-name ... ok

Now tag the component to bump its version and share it back to your collection or to a new collection.

$ bit tag product-list
1 component(s) tagged

changed components
(components that got a version bump)
     > <username>.<collectionname>/[email protected]

$ bit export <username>.<collectionname>
exported 1 components to scope <username>.<collectionname>

By passing the `eject` flag you can even move the component back to being a package dependency in your `package.json`. This means you can make changes to a component's package right from the consuming project, without waiting on PRs to the original repository. Useful, right? :)

Next, you can head back to the original project from which you shared the components, pull the changes, and leverage Bit's extension to Git in order to `checkout` the new versions and merge the changes between them.

This means you can sync and merge changes to shared components made in different Angular projects. You can control permissions to push new version in your bit.dev collection, so you can help increase the adoption of your shared components without compromising on keeping standards.

Let everyone collaborate over reusable components

When your components are shared as a reusbale collection, different team members can collaborate over all your components. Developers can add, search, use and update components for their projects. Designers can collaborate with developers on top of the actual components, bridging the gap between images and code, creating a living component design system.

Other people like marketing and product can also collaborate, to learn which components are available and what they can quickly build. You can also share components to the open-source community, and discover components shared by thousands of developers around the world.

Conclusion

Looking back a few years and looking forward into the future, modularity is the key to better and faster software development. While software modularity had been here since the 60s, today it's more practical then even, and particularly in the frontEnd space, through components.

By creating a component-economy where different people can easily share a component "lego box" you can turn app-building into a composition of reusbale components, which can also be independently evolved. With Angular, this is just a natural combination to build with components.

Thanks for reading, feel free to get-started hands-on for your self, explore the open-source component community, or ask anything. Cheers.

This post was written by a member on Bit's open-source team. Feel free to get in touch for any questions, help or just to say hi :)