Sharing Components Between Angular Applications

How to easily share reusable components across Angular 8+ applications using git, bit and npm

Angular lets us build the UI of our applications with reusable components. These components, wrapped inside ngModules, can and should be shared across different projects and applications to speed your development.

Why? because it provides a better consistent expirience to your users, it saves time in development and maintenance, and it makes for better more modular software. Up until recently, this wasn’t such an easy task, even at a small scale.

Even sharing a single component required setting up more repos and tools while refactoring your application. As more components needed to be shared, so grew the challenge of making them reusable for your team to find and use them. In this post, we’ll see how to quickly share components -at any scale- between two or more different Angular applications, and how to keep changes synced between them while collaborating as a team over your components.

Short intro: why Angular with Bit

Share NG components with Bit, reuse them across projects

Bit is a widely popular open-source tool for reusable components. It lets you almost seamlessly isolate, share and use components across your projects.

Bit isolates components in your project, packs them with all their files and dependencies and wraps them in an environment that lets them run outside of your project. It lets you use your code in different projects, while tracking and syncing changes to the component’s code, versions and dependencies.

Play with your shared NG components before installing them

bit.dev is Bit’s community platform for components. It lets developers and teams discover, organize and collaborate over their components in the cloud. In bit.dev you can host and search your components, try them out in the cloud, install them in different projects, and sync changes between them.

Search your shared NG components bu context, size or dependencies

Recently, following a collaboration with the Angular team at Google, Bit announced public Beta support for Angular 8 components. This means you can now use Bit to share your Angular components across projects, and make all your components available for your team in bit.dev to collaborate on.

Hands-on Tutorial

To quickly get started by sharing an Angular component from one application to another, you can just follow the hands-on tutorial with the demo app.

Bit with Angular Tutorial - Bit

In the rest of this post, we’ll dive in a Bit deeper to see how it all works.

Isolating and sharing components

The Angular team recommends that reusable components will be wrapped inside matching ngModules. With Bit, every component should be a ngModule. Inside this ngModule, you may declare one or more entities. You may export all of them or just a few of them and leave the rest internal. You can learn more here. Just make sure to follow these guidelines in your work.

Note that sharing components with Bit will not remove the components from your project so you can try it on a real Angular app or library. At any point, you can try the Gitter channel for help.

Setup Bit for your components

Before sharing your components you should install bit-cli and quickly create your own component collection on bit.dev (signup free first).

Install Bit

$ npm install bit-bin -g

Init a Bit workspace for your project to track and manage components

$ bit init

Auth bit-cli to your bit.dev account (create first)

$ bit login

Isolate your components

When you have everything properly setup, you can start tracking your components. You can tell Bit where the components are using the bit add command. If all the files of the components are located under one directory you can just point Bit to the directory to track all components and files inside.

For Angular components, you also need to specify the component entry point, which in most cases will be the file containing the ngModule. For example, let’s assume we have a component inside src/app/components :

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

Bit will start tracking the components it’s pointed to, add all the files as part of the component, and define all its dependencies as part of the component.

Then, you can run a quick bit status to validate that Bit successfully identified anything, and check if there’s anything you need to add or change.

Then, add a compiler to make sure the code can be built and run in other projects. You can choose one of many compilers provided at bit.dev or add your own. For Angular, let’s install the Angular compiler (based on ng-packager) the in the project’s workspace:

$ bit import bit.envs/compilers/angular --compiler

compilers/angular - envs · Bit

You can run bit build to see that the code can be built and all is ok.

Export your components

Once the components are tracked by Bit you can share them to your remote bit.dev collection. First, let’s tag a version for the components:

$ bit tag --all 0.0.1

Then run another quick bit status to see that your components are tracked and ready to be exported.

$ bit status
staged components

> component-name. versions: 0.0.1 ... ok

Once ready, share them to bit.dev. 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>.<collection-name>
exported 1 components to scope <username>.<collection-name>

And that’s it! Now head over to your bit.dev collection and take a look at your components. You can now explore your shared components, invite other team members to collaborate (not only developers- product and designers can visually view the components too) and save examples for every component.

primeng components in a bit.dev collection

Through the examples, you can play with components shared by yourself or others on your team, and decide which ones you’d like to install. The examples are also used to create snapshots of the components, which appear in the collection page (and search results) for quick visual browsing.

Play with components in a live playground and install in your projects

Use components in other applications

So now that your components are available in your bit.dev collection, you (and your team) can choose to install them in a different project using npm/yarn from the bit.dev registry. Since you already run bit login you already have bit.dev configured as a scoped registry for your npm client.

So, to install a component, just run the command in the installation pane on the component page. For example, here’s the listbox component from the popular ngprime library. Just run the following command to install it:

# install with npm
npm i @bit/primefaces.primeng.listbox

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

Update components from consuming projects

Remember we talked about Bit letting you modify components from consuming projects? that’s a useful feature when a component needs a small change before being fitted into a new application (e.g. style changes).

First, bit init a workspace for the consuming project. Then, use bit import to bring the component’s source code into the consuming project.

$ cd project-directory
$ bit init
$ bit import primefaces.primeng/listbox

Here is what happened:

  • A new top-level components folder is created that includes the code of the component and its compiled code and nodemodules (in this case the nodemodules are empty, as all of your node_modules are peer dependencies and are taken from the root project.
  • The .bitmap file was modified to include the reference to the component
  • The package.json file is modified to point to the files rather than the remote package (See it in your package.json).

Then, head over to the component’s files in the project and make changes. Then run a quick bit status to see that the component is modified.

When done, use bit tag to bump the semver for the component and share the new version back out to the collection on bit.dev (or, if your prefer, create a new collection and export it there).

$ bit tag listbox
$ bit export <username>.<collection-name>

Now, you can update the changes in the original project by running bit import and then bit checkout. Since Bit extends Git’s merge utility, you can merhe the changes and even resolve conflicts just like you do with Git. This means you can now merge changes to components across different projects.

Collaborate on Angular components as a team

When all your components are shared as a bit.dev collection, your team can collaborate on your shared-components across your Angular applications.

Your team can now:

  • Share more components from their own projects.
  • Search and discover shared components from your organization or the community.
  • View component examples with their own eyes, turning your actual components into a component design system- where developers, designers, and other stack holders can collaborate together.
  • Suggest and sync changes to components from different projects.
  • Build applications faster without having to re-invent the wheel.

Sharing and collaborating on reusable components is a great way to build applications faster, without having to re-write the same code, refactor projects just to share code, maintain more repositories or struggle to sync changes. So go ahead and try it out for yourself. It works with a component library or without, so you can choose the right workflow for your own work.

Here you can find a link to the tutorial with a demo example app (if you want to try it before using your own code), and some guidelines for reusing Angular components written by Bit and Angular team together. Please don’t hesitate to comment and ask anything. Happy sharing :)


Sharing Components Between Angular Applications using Bit was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.