Using the bit.dev component search-filters you can find components by their specific dependencies or by their bundle-size, to find the right components for your apps. Want to filter your own components? export them to bit.dev.

Develop with Angular and Bit

Don’t forget to check out the Bit with Angular guidelines.

Angular compiler for Bit components

Each bit component is linked with a compiler. The Bit compiler is compiling or transpiling the source code to build files that can run in another project.

Bit team now officially supports an Angular compiler. You can apply this compiler to all the components you share from your Angular project.

How: We adopted the Angular team’s recommendation to use ng-packagr as the basis for Bit’s Angular compiler. Ng-packagr is a project that was adopted by the Angular core team as their package manager. We have joined this path.

The compiler is compiling the Angular typescript to AOT (Ahead of Time) code. The build results are in the Angular Package Format (APF), for smooth importing into any Angular project.

Angular modules are Bit components

In an Angular application, a @Component is the most basic building block. Yet, the component is not alone: a typical project also includes services, directives, and pipes. To use any of these entities in a project, they must be declared in an Angular module or ngModule.

Angular CLI makes it easy to quickly generate new modules and entities. Angular provides guidelines on the best way to break your applications into shared modules and features modules.

In Bit, anything can be a component. A single service, pipe or utility function are all ok to be exported as a Bit component. However, our experience shows that the best fit is ngModule == Bit component.

Angular core libraries dependencies

You Angular project has the Angular libraries (the ones under the @angular namespace) as dependencies. When running Angular, it is required that those dependencies will be installed only once in your project, in any node_modules hierarchy. When you generate an Angular project with angular-cli and define multiple libraries and applications, the CLI is taking care of it.

When Bit collects the required installs for a component from the project, it will take the @angular libraries as required dependencies. When importing components from the outside, this might cause the Angular run time libraries to be installed more than once, and some nasty errors will pop up.

This is easy to fix. All you need to do is add the @angular libraries as devDependencies in your project in addition to the dependencies. You might also want to relax the versions a bit there. So if your project is using @angualr/core 8.1.1, or @angualr/core ~8.1.0, the dev dependencies can be defined as @angular/core ^8.0.0. This will make your component reusable across projects that are using a version slightly different than yours.

It is also favorable to keep your Angular libraries on the same version, but this is something you already know. Read our full list of Angular guidelines.

Contribute to Bit and Angular 🔨

While Bit now supports Angular 8+, there are still a few areas in which your help can improve the expirience of Angular with Bit. For example:

Testing Components

Bit encapsulates components with all their files and dependencies so you can run and test them in isolation from your project, locally or in the cloud. Testing has always been a core value in writing Angular applications. But, testing Angular components with Bit isn’t there yet.

A key item on our task list is to build Angular Tester for Bit that will allow testing Angular components. We are aiming to build testers for both Karma and Jest so you can pick your favorite tester. Bit Compilers and Testers are all open-source, so if you want to contribute to this effort — PRs are welcome!

AngularJS Support

Angularjs (a.k.a Angular 1) was a revolutionary product in front-end development. It is still widely used but is now in an LTS (Long Time Support). Version 1.7, released in mid-2018 was the last version of Anguarjs. As such, we do not plan to officially support Angularjs. However, Bit is an open platform for any Javascript code, so if you are still engaged with Angularjs and willing to write your own compiler and testers, this is totally possible.

What’s next?

Today we’ve introduced Bit support for Angular for the first time. Vue support is just around the corner and should be released to public beta shortly.

To make that happen we’ve gradually started introducing new technologies such as the component capsule, to wrap reusable code with a standardized unit that can run anywhere. The capsule will be introduced soon, and we’ll share more about it.

There’s much more, but we’ll save it for next time. We hope you’ll enjoy the new release, and don’t hesitate to share your feedback :) Until then…

Cheers, Team Bit 🌹