Introduction to Bit with Angular

Angular is a framework that mainly focuses on applications and usually lends towards a monorepo structure. This is why Bit is a great fit for Angular, as it allows you to break down your application into smaller components and share them across projects and teams.

However, there are a few concepts that you need to understand before you can start using Bit with Angular.

Bit is an extensible tool for component-driven development. It allows you to create, maintain, and deliver independent Bit components. Each Bit component has its own source-files, dependencies, metadata, dev configuration, and artifacts.

Most importantly, each Bit component is source-controlled and versioned, independent of traditional repositories, like git. To a large extent, each Bit component can be considered as a "mini repository".

Components can be of any type, including React, Angular, Node, and more.

Learn Angular with Bit

This 'learn' section will guide you through the process of creating Bit components and apps, with Angular.

► Set up your own Angular development environment ('env')

► Create an Angular component

► Create an Angular app

Angular components and Bit components

In Angular, a component is a class that contains the logic and the template of a specific part of your application.

Bit components are more like modular repositories. Their source-code and artifacts, in the context of Angular, can be thought of as an Angular library. It is a collection of files that are related to a specific functionality. This means that a Bit component can contain multiple Angular components, as well as other files such as services, directives, and stylesheets.

We still recommend to keep your Bit components as small as possible, and only add files that are related to a specific functionality. This will make your components more reusable and easier to maintain.

In this documentation, we will use the word "component" to refer to a Bit component, and the words "Angular component" to refer to an Angular component.

Environment configuration

In a regular Angular workspace, you can configure your environment using the angular.json file. This file contains the configuration for all the projects in your workspace, and you can specify different configurations for each project.

In Bit however you cannot use the angular.json file, as it is not part of the component itself. Instead, Bit uses "environments" to configure your components. An environment is a set of files that contain the configuration for your component(s). You can have multiple environments, and you can specify which environment to use for each component.

Bit comes with a default Angular environment, which you can use to configure your components. However, you can also create your own custom environment and use it instead. This is what we recommend doing and this documentation will focus on this approach.

Compositions

In Angular, you can generate applications and libraries using the Angular CLI. These projects are configured to work together, and you can import libraries into your application. However, only applications are directly runnable in a browser, and libraries are not.

In Bit, you can also generate applications and components (libraries). However, unlike Angular, components also have a runnable environment through their environment. Since components are usually not directly runnable, you can use compositions to render your components in different contexts and variations, allowing you to create showcases and documentation for your components, similarly to what you would find in a component library.