Announcing Bit with Angular Public Beta
Special thanks to the awesome Angular team and Stephen Fluin for working together on making this happen 👐
We’re excited to introduce public beta for Bit with Angular 8+. You can now share Angular components between different projects and collaborate over components as a team to build your applications faster together.
In 2018 Bit entered the frontEnd world as a new way to share and build with components. Bit’s component platform helps over 50k developers and teams share components and collaborate to build their applications.
Up until now, Bit has been mostly associated with React. Yet almost on a daily basis, we’ve been getting requests to better support Angular and Vue. Today, Bit with Angular is available in public beta, and Vue is coming up. Take a look.
Try out Bit with Angular
Please do share your feedback and suggestions to help improve the experience.
Hands-on tutorial 📖
To help you experience Bit for collaborating on Angular components, we have prepared a step-by-step tutorial for sharing components between two projects. You will also be able to see your components render in your bit.dev collection.
Just go ahead, install the bit-cli and sign for a bit.dev account to start.
Play with live Angular components 🎲
Try components hands-on before using them in your project.
bit.dev provides a playground environment for every component that is exported to it. This helps in experiencing the components you share and discover, so you can try them hands-on before using them in your project.
We have enhanced the bit.dev playground to support Angular components. When getting to an Angular component page, Bit will generate an Angular app using the angular-cli and will let you add the component to this app. You can add the app module typescript file as well as the CSS and HTML files, to play with the component.
Discover Angular components 🔍
Search and filter components by context, dependencies and bundle size.
Search for Angular components on bit.dev to discover components shared by your team and the community. When you export components from your project to bit.dev, context-relevant labels are automatically attached. The new Angular label helps you discover Angular components.
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 🌹
