Angular quickstart

Same loop as React — swap the install and boot call.


pnpm add @mushi-mushi/angular

Angular CLI does not expose import.meta.env, so keep the project ID and the public API key in an environment file (ng generate environments creates one):

src/environments/environment.ts


export const environment = {
  mushiProjectId: 'YOUR_PROJECT_ID',
  mushiApiKey: 'mushi_...', // public report:write key, safe to ship in the bundle
}

src/app/app.config.ts


import { ErrorHandler, type ApplicationConfig } from '@angular/core'
import { MUSHI_CONFIG, MushiErrorHandler, MushiService, type MushiConfig } from '@mushi-mushi/angular'
import { environment } from '../environments/environment'
 
const mushiConfig: MushiConfig = {
  projectId: environment.mushiProjectId,
  apiKey: environment.mushiApiKey,
}
 
export const appConfig: ApplicationConfig = {
  providers: [
    { provide: MUSHI_CONFIG, useValue: mushiConfig },
    { provide: MushiService, useFactory: (config: MushiConfig) => new MushiService(config), deps: [MUSHI_CONFIG] },
    // Angular resolves ErrorHandler while bootstrapping, which starts the SDK
    // and routes uncaught errors to Mushi.
    { provide: ErrorHandler, useFactory: (mushi: MushiService) => new MushiErrorHandler(mushi), deps: [MushiService] },
  ],
}

These factory providers work with every release of @mushi-mushi/angular. Up to 1.0.2 (the current npm release), do not use provideMushi() or ...provideMushiAngular() instead: the package is compiled without Angular’s ahead-of-time metadata, so provideMushiAngular()’s class provider for MushiService needs the JIT compiler and fails at bootstrap in a production build, and provideMushi() does not return Angular providers at all.

Report from a component:

src/app/feedback-button.component.ts


import { Component, inject } from '@angular/core'
import { MushiService } from '@mushi-mushi/angular'
 
@Component({
  selector: 'app-feedback-button',
  template: '<button type="button" (click)="reportIssue()">Report a bug</button>',
})
export class FeedbackButtonComponent {
  private readonly mushi = inject(MushiService)
 
  async reportIssue() {
    await this.mushi.report({ description: 'Something feels off on this page', category: 'bug' })
  }
}

API detail: @mushi-mushi/angular. Widget behavior: @mushi-mushi/web.