> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bugbybug.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Angular SDK Guide

> Learn how to set up our Angular SDK in your project

This guide will walk you through using the BugByBug Angular SDK in your project.

<Steps>
  <Step title="Install the SDK">
    You can install the BugByBug Angular SDK via npm.

    ```bash theme={null}
    npm install @bugbybug/angular
    ```
  </Step>

  <Step title="Initialization for Standalone Applications (Angular 15+)">
    Before you can use the SDK, you need to initialize it with your BugByBug project key.

    Import and initialize the SDK in your `app.config.ts` file:

    ```javascript theme={null}
    import { ApplicationConfig } from '@angular/core';
    import { provideBugByBug } from '@bugbybug/angular';

    export const appConfig: ApplicationConfig = {
      providers: [
        provideBugByBug({
          apiKey: 'YOUR_PROJECT_API_KEY', // Starts with bbb_
          environment: 'production'
        })
        // ... other providers
      ]
    };
    ```
  </Step>

  <Step title="Initialization for Module-based Applications">
    Before you can use the SDK, you need to initialize it with your BugByBug project key.

    Import and initialize the SDK in your `app.module.ts` file:

    ```javascript theme={null}
    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { provideBugByBug } from '@bugbybug/angular';
    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [AppComponent],
      imports: [BrowserModule],
      providers: [
        provideBugByBug({
          apiKey: 'YOUR_PROJECT_API_KEY',
          environment: 'production'
        })
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    ```
  </Step>
</Steps>

## Basic Usage

Once initialized, you can start using the SDK to capture bugs and errors.

### Manually capturing an Error

The SDK automatically captures errors within your projects, although, you still have the choose to capture or catch these errors manually like this:

```javascript theme={null}
try {
  this.doSomethingRisky();
} catch (error) {
  this.bugByBug.captureException(error, { component: 'LoginComponent' });
}
```

### Identifying users within your authentication

You can use `BugByBugService` in your authentication component to set the user context.

```javascript theme={null}
import { Component } from '@angular/core';
import { BugByBugService } from '@bugbybug/angular';

@Component({ ... })
export class LoginComponent {
  constructor(private bugByBug: BugByBugService) {}

  onLoginSuccess(user: any) {
    this.bugByBug.setUser(user.id, user.email);
  }
}
```

<Tip>
  For more detailed information on other framework integrations, refer to their dedicated guides:

  * [Next.js SDK Guide](/sdk-guides/nextjs)
  * [Vue.js SDK Guide](/sdk-guides/vuejs)
</Tip>

## API Reference

For a complete list of available methods and their signatures, refer to the [API Reference](/api-reference/introduction).