Bit with Angular

Create a new Angular workspace:

$bit new hello-world-angular my-hello-world-angular --env teambit.community/starters/hello-world-angular

Copied

An Angular application with SSR that lazy loads a simple Angular component and does an API call.
An Angular component that will be lazy loaded by the app.
A Custom Angular Environment to control tools and configurations.

Start without pre-built components:

$bit new angular my-angular-workspace --env bitdev.angular/angular-env

Copied

Using Bit as an Angular developer

When you build a ng-modules or standalone components as a Bit Component, you are essentially creating an Angular Library. A Bit component may hold any number of components, services, directives and stylesheets and used in many apps or projects.
Bit Components have their own "previews" for them, so you have a runnable environment for your module or component. Use it to render it in different contexts and variations, outside an app.

Bit Component can be a complete Angular Application, with as many internal components and modules as needed.

In A Bit Workspace does not require angular.json or many configuration files. Control your apps and libs are using Development Environments. You can use the default Angular Development Environment, or customize it to fit your requirements.

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.

Development Workflow

Bit comes pre-configured with various workflows, as described below. You can further customize it as needed.

Build components and apps

To create new Bit Components and Apps use the following commands:

bit templates   // show all available templates in your workspace.
bit create      // pick any template and generate a new component.
Copied

Run a dedicated per-app dev-server, or the workspace dev-server for maintaining your components:

bit app list    // show all available apps in the workspace
bit run         // run an app in a standalone dev server
bit start       // run the workspace dev server to manage your components
Copied

Learn more on running apps and component previews to better utilize this for your workflow.

Compilation Watch mode for application development

To run a watcher that compiles components when they are modifieid add the --watch option:

bit run APP-NAME --watch
Copied

This is not needed for bit start.

Validate code

Use the following commands to ensure your code quality. Bit will run commands only for modified and affected components.

bit lint          // check for any linting errors
bit test          // run all your tests
bit check-types   // run typescript type validations
bit format        // format your code according to your styling rules
bit compile       // compiles all your components
Copied

Learn more on controling the lint, test, format and compilation and type-checking for your components.

Watch mode for testing and compilation

You can have your components tested and compiled as you code by running the following watchers:

bit watch         // runs compilation when component is changed
bit test --watch  // runs tests when component is changed
Copied

build and release

The following commands run the complete build pipeline in a per-component temporary and isolated environment:

bit build    // run all steps of the build pipeline for each component. does not save generated artifacts
bit snap     // run `build`, and then the `snap` pipeline. save all generated artifacts
bit tag      // run `build`, and then the `tag` pipeline. save all generated artifacts
Copied

Learn more about controling the tasks for all available build and release pipeline.

Use in CI

When setting up CI, it's recommended to use tag or snap directly as a single command to run your complete pipeline, including all validations.

You can use either RippleCI or bring your own CI tool.

What's next

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

► Create an Angular component

► Create an Angular app