Angular Integration
Monitor HTTP interceptor traces, Core Web Vitals, router navigation timing, and change detection performance across your Angular applications. First-class support for Angular 17+ and signals.
How It Works
Install the Angular SDK
Run npm install @tigerops/angular. The package provides an Angular module with providers for HTTP interceptors, Router events, ErrorHandler override, and Core Web Vitals collection — all configured in one module import.
Import TigerOpsModule
Import TigerOpsModule.forRoot() in your AppModule with your API key and configuration. The module registers the HTTP interceptor, ErrorHandler, and Router tracing provider in the Angular dependency injection system automatically.
Configure Zone.js Integration
TigerOps integrates with Angular Zone.js to track change detection cycles, long tasks, and unstable zone states. Configure the zone stability threshold to alert on excessive change detection runs.
Correlate With Backend Traces
The HTTP interceptor automatically adds the traceparent header to all HttpClient requests. Your backend TigerOps SDK picks up the trace context, creating linked end-to-end traces from Angular component to API.
What You Get Out of the Box
HTTP Interceptor Tracing
Automatic span creation for every HttpClient request including URL, method, status code, and duration. Grouped by API endpoint pattern and correlated with the component that initiated the request.
Core Web Vitals
LCP, INP, CLS, FCP, and TTFB per Angular route. TigerOps measures Web Vitals after each route navigation, giving you accurate SPA performance metrics beyond the initial page load.
Router Navigation Timing
Angular Router navigation start-to-end duration, resolver wait time, and guard evaluation latency per route. Identify slow route transitions caused by lazy-loaded modules or slow resolvers.
Global Error Handler
TigerOps replaces the Angular ErrorHandler to capture all unhandled errors with component stack traces, user session context, and the last user interactions before the error occurred.
Change Detection Performance
Zone.js-integrated change detection cycle timing per component tree. Identify components triggering excessive re-renders and guide migration to OnPush change detection strategy.
Lazy Module Load Timing
Track lazy-loaded module download and bootstrap time per route. TigerOps identifies which lazy modules are causing the longest navigation pauses and correlates them with network conditions.
app.module.ts Provider Setup
Import TigerOpsModule in your root AppModule to register HTTP interceptors, ErrorHandler, and Router tracing providers in one step.
// src/app/app.module.ts — TigerOps Angular setup
import { NgModule, ErrorHandler } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HttpClientModule } from '@angular/common/http'
import { RouterModule } from '@angular/router'
import {
TigerOpsModule,
TigerOpsErrorHandler,
TigerOpsHttpInterceptorModule,
} from '@tigerops/angular'
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
RouterModule,
AppRoutingModule,
// TigerOps module — registers all providers in one import
TigerOpsModule.forRoot({
apiKey: environment.tigeropsApiKey,
service: 'my-angular-app',
environment: environment.production ? 'production' : 'development',
rum: {
trackCoreWebVitals: true,
trackRouteChanges: true, // Measure Web Vitals per route
trackHttpRequests: true, // HTTP interceptor tracing
zonePatchingEnabled: true, // Zone.js change detection tracking
},
tracing: {
// Add traceparent to requests to these origins
propagateToOrigins: [
'https://api.myapp.com',
/^https://.*.myapp.com/,
],
},
}),
// Auto-instruments all HttpClient requests
TigerOpsHttpInterceptorModule,
],
providers: [
// Replace Angular's default ErrorHandler with TigerOps
{ provide: ErrorHandler, useClass: TigerOpsErrorHandler },
],
bootstrap: [AppComponent],
})
export class AppModule {}
// For standalone Angular apps (Angular 15+), use provideApp():
// bootstrapApplication(AppComponent, {
// providers: [
// ...provideTigerOps({ apiKey: '...', service: 'my-app' }),
// ],
// })Common Questions
Does TigerOps work with Angular 17 and signals-based reactivity?
Yes. TigerOps supports Angular 14+ including the new signals-based reactivity model introduced in Angular 17. Signal effects and computed values are tracked as part of the change detection profiling, giving you visibility into signal propagation cost.
Does TigerOps work with standalone Angular components (no NgModule)?
Yes. TigerOps supports both NgModule-based and standalone component Angular applications. For standalone apps, you use provideApp() in your bootstrapApplication config instead of TigerOpsModule.forRoot().
How does TigerOps trace HTTP requests to backend services?
The TigerOps HTTP interceptor adds the W3C TraceContext traceparent and tracestate headers to all outgoing HttpClient requests. Your backend service picks up the trace context and continues the trace, creating linked spans visible in the TigerOps distributed trace view.
Can TigerOps monitor Angular Universal (server-side rendering)?
Yes. TigerOps monitors both the browser-side Angular app and the Angular Universal Node.js server. SSR render time, hydration duration, and transfer state size are tracked separately from client-side navigation for complete SSR performance visibility.
Does the TigerOps Angular SDK work with NgRx and other state management libraries?
Yes. TigerOps provides an optional NgRx devtools integration that records dispatched actions as breadcrumbs in error reports and session replay. This makes it easy to reproduce bugs by replaying the exact state transitions that led to an error.
Full Visibility Into Your Angular Application
No credit card required. Install in minutes. HTTP traces, Core Web Vitals, and router performance immediately.