---
name: buoy-install-angular
description: Add Buoy to Angular. Pick tools, sign in, and check the app.
---

# Install Buoy in Angular (Beta)

Read https://buoy.gg/buoy/latest/docs/web/angular.md first.
Use this guide for Angular 19 to 22.
React web apps use https://buoy.gg/install-web.md instead.
React Native uses https://buoy.gg/install.md.
Ionic React uses https://buoy.gg/install-capacitor.md.

## Rules

The user's own instructions come first.
Keep the diff small. Do not commit or discard work.
Do not read or print keys or env files.
Do not add React Native or Expo.
Do not make a new store or QueryClient for Buoy.
Keep one Buoy call. Keep its app options and links.
Ask before you open a browser or create an account.
Ask before you show Buoy in a release build.
Ask which app to use if more than one fits.
Choose the rest from the repo and say what you chose.

## 1. Find the app

Look for `@angular/core` in the app's `package.json`.
Find its build target in `angular.json`.
Use the app folder, not the monorepo root.
Use the package manager set in `package.json` or its lockfile.
In an Angular workspace, choose the app's project name.
Use that name with `--project` for setup and login.
If Nx has no `angular.json`, use the manual guide.

Check for an existing `provideBuoy` or `provideDevBuoy` call.
If one exists, repair that setup. Do not add another.
Keep all Buoy packages on one release.

## 2. Add Buoy

Run in the app folder:

```sh
ng add @buoy-gg/angular
```

In a workspace, use `ng add @buoy-gg/angular --project <app-name>`.
Use the app's local CLI through its package manager if needed.
Pick tools from the prompt. Keep the matching defaults.
These are Network, Console, Storage, Events, and Env.
Routes is picked if the app has Angular Router.
Query is picked if the app has Angular Query.
Redux is picked for NgRx or NGXS.
Highlight is picked on Angular 20 or newer.

The package brings its own React deps for Buoy's UI.
The builders find installed tools and add the early hook.
`provideBuoy()` goes last in the provider list.
Do not add a guard or tool map to that call.
The prod builder keeps only a small no-op entry.

For custom builders, keep the manual setup `ng add` writes.
It keeps the builder and adds a guard and prod swaps.
Do not replace a custom builder on your own.

Keep NgRx's normal `provideStoreDevtools` in a dev guard.
Buoy goes last. It links NgRx through DI.
Never touch `window.__REDUX_DEVTOOLS_EXTENSION__`.
NGXS needs `provideBuoyNgxs()` in a dev guard before Buoy.
Query uses the app's client. Match its Query core version.
`ng add` adds the React Query peer for the tool's UI.
For Zustand, pass named stores through `zustandStores`.
Options add to auto setup. App values win.
Manual `modules` turns auto links off.

## 3. Sign in

With consent, run this in the app folder:

```sh
npx buoy login
```

Add `--project <app-name>` in a workspace.
If consent is not given, leave this step for the user.
The CLI writes a key file that Git ignores.
The builder reads it. Never paste a key in code.

## 4. Run the app

```sh
ng serve
```

In a workspace, use `ng serve <app-name>`.
Keep an existing dev server if it serves this app.
Restart it after adding a tool or signing in.
Do not stop a server owned by someone else.

## 5. Verify

Static: run the app's own checks and build script.
If there is no build script, use `ng build`.
Do not add test tools or run TypeScript by hand.
Check that Buoy packages resolve on one release line.
Check that `provideBuoy()` is last and appears once.
Check prod output: only the disabled no-op may remain.
It must be under 200 bytes. Tools and React DOM stay out.
React Native Web and NgRx DevTools must stay out too.

Browser: with consent, open the app and the Buoy dial.
If not allowed, give the user these steps to do.
Open Network. Use the app to make a web call.
Find that call in Network. CORS still applies.
A build alone does not prove that capture works.

Desktop and MCP are optional. Set them up only if asked.
Use the Angular guide for QA and release build rules.

## 6. Report

List the app, tools, versions, changed files, and checks.
Say which tools you skipped and why.
Say if sign-in or browser checks still need the user.
Give the exact errors and any steps left to do.
Keep keys and tokens out of the report.