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, , Bit's component workflow was made available for sharing reusable Angular 8+ components across projects and teams. following a collaboration between the Bit and Angular teams In this post, we'll see how to leverage 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. open-source project Bit 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?" 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. Bit 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 you can now discover and use in different projects: collection of reusable components 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 and the , both reviewed by the Angular team. Bit with Angular tutorial Bit with Angular guidelines 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 based on the official NG tutorial. this demo application Short setup First, head over to 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: bit.dev $ 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. new components

     > component-name1 ... ok
     > component-name2 ... ok $ bit status 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. (you can add your own), so let's install the : bit.dev provides many compilers Angular compiler the following component environments were installed
- bit.envs/compilers/angular@0.1.9 $ bit import bit.envs/compilers/angular --compiler 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. N component(s) tagged

new components
(first version for components)
     > component-name1@0.0.1
     > component-name2@0.0.1 $ bit tag --all 0.0.1 You can run another `bit status` to see that your components are versioned and ready to be shared. staged components

     > component-name1. versions: 0.0.1 ... ok
     > component-name2. versions: 0.0.1 ... ok $ bit status 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>: exported N components to scope <username>.<collectionname> $ bit <username>.<collectionname> export 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 in the live playground in the component's page. create and save an example for each component 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 created in the bit.dev open-source community. Let's take a look at the component. Angular spinner 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 like any other package. use it in your code 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 directly to the code (which isn't possible when installing as a package). bring a component's source code right into a consuming project and make changes 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. modified components
(use "bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)

     > component-name ... ok $ bit status Now tag the component to bump its version and share it back  to your collection or to a new collection. 1 component(s) tagged

changed components
(components that got a version bump)
     > <username>.<collectionname>/componentname@0.0.2 exported 1 components to scope <username>.<collectionname> $ bit tag product-list $ bit <username>.<collectionname> export By 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? :) passing the `eject` flag Next, you can head back to the original project from which you shared the components, , and leverage Bit's extension to Git in order to ` ` the new versions and merge the changes between them. pull the changes checkout 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 for your self, , or ask anything. Cheers. get-started hands-on explore the open-source component community 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 :)

Facebook

How to Manage Reusable UI Components

7 FrontEnd JavaScript Trends and Tools You Should Know for 2020

I write code and words. Learn about Bit: github.com/teambit/bit

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Sharing Reusable Angular Components

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

21 Top Vue.js UI Libraries For Your App

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

21 Top Vue.js UI Libraries For Your App

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps