Bit in an existing Angular project

Using Bit in an exsisting Angular project allows you to manage independnetly versioned and released ngModules or Standalone Components in the same repository as any Angular project. This means you can quickly share them as Bit Components with any other project.
You can also build non-Angular components, like modules, entities or any JavaScript/TypeScript based functionality you deem reuseable.

To use Bit in an existing Angular repository and run:

bit init
Copied

You will be prompted to answer a few questions:

1. Which environment you will like to use? pick the most relevant default stack (you can add more later).
2. Would you like to use your own package manager? Yes.
3. Would you like to use MCP server for AI-powered development? Yes.
4. Which IDE to set up? Select from list (you can add more later).

The output should be the following:

🔧 Setting up MCP server for vscode...
✅ MCP server configured for vscode
successfully initialized a bit workspace.

ℹ️  Additional Information:
📁 Components will be created in: bit-components/{scope}/{name}
📖 For CI/CD setup, visit: https://bit.dev/docs/getting-started/collaborate/exporting-components#custom-ci/cd-setup
🎯 Environment: bitdev.react/react-env
🤖 MCP server configured for: vscode
📦 External package manager mode enabled
💡 Run pnpm install (or yarn install/npm install) to install dependencies
Copied

You have successfully added Bit support to your Turborepo workspace!
See the two generated file; workspace.jsonc, which includes all Bit related configuration, and .bitmap which tracks the Bit components in the workspace. Make sure to add and commit these files to your repository.

Now that you have Bit in your Angular repository, you can run any Bit commands to manage components:

bit templates // see all available templates you can use
bit create    // create a new component
bit start     // start the bit local dev-server
bit list      // list all components in the workspace
...
Copied

All components are linked to the local node_modules. In you need to use a Bit component in your Angular app, use the module link:

import { anotherBitComponent } from '@my-org/my-scope/another-bit-component';
Copied

To ensure the compiled outputs of components is up-to-date in node_modules, you need to run one of the following processes:

bit watch // runs component-compilation in a watch mode, ensure compiled node-modules for components are up-to-date
bit start // runs bit-devserver which also ensures compiled node-modules for components are up-to-date
Copied

With Bit you can create additional apps in your Angular repository.
To create a new app, simply choose the angular-app template when creating a new component:

bit create ng-app apps/my-angular-app
Copied

Then add it to your workspace.jsonc configuration with the bit use command:

bit use apps/my-angular-app
Copied

Now you can use the following application-workflow commands:

bit app list    // lists all available Bit apps in the repotisory
bit run <name> // runs a Bit app in a seperate dev-server, alongside your app
Copied

A Bit component is isolated from the build of the repository it is in, which means you can manage components of different types. For example, you can add React or Vue components to be built alongside your Angular components, if you so please.
To do so, you only need to include additional plugins to the workspace:

bit install bitdev.react/react-env
Copied

And add to workspace.jsonc:

{
  "teambit.generator/generator": {
    "envs": ["bitdev.react/react-env", "bitdev.angular/angular-env"]
  }
}
Copied

note - this does not mean you can use components of different framework in the same app. for this there are other tools and practices to adopt, like MFE.

See the docs here about adding the relevant CI script package.