Angular

Install HumanBehavior in Angular browser bootstrap with NG_APP env vars and SSR guards.

Angular has no built-in browser env-var prefix, so the shipped wizard uses the NG_APP_ convention and expects your Angular build tooling to expose those values to the browser bundle.

Wizard detection

The wizard detects Angular when it sees:

Signal	Details
`@angular/core` dependency	Version read from `package.json`
`angular.json`	Angular workspace fallback

The framework config deliberately uses NG_APP_HUMANBEHAVIOR_* env names. That convention commonly pairs with env tooling such as @ngx-env/builder, a custom define plugin, or deployment-time replacements.

Package

pnpm add humanbehavior-js

Environment variables

NG_APP_HUMANBEHAVIOR_API_KEY=your-api-key
NG_APP_HUMANBEHAVIOR_INGESTION_URL=https://ingest.humanbehavior.co

These names do not magically exist in Angular. Make sure your build exposes them to browser code.

Browser bootstrap example

In a standalone Angular app, initialize in src/main.ts:

import { bootstrapApplication } from "@angular/platform-browser";
import { HumanBehaviorTracker } from "humanbehavior-js";
import { AppComponent } from "./app/app.component";
import { appConfig } from "./app/app.config";

declare const process: { env: Record<string, string | undefined> };

if (typeof window !== "undefined") {
  const apiKey = process.env.NG_APP_HUMANBEHAVIOR_API_KEY;
  if (apiKey) {
    HumanBehaviorTracker.init(apiKey, {
      ingestionUrl: process.env.NG_APP_HUMANBEHAVIOR_INGESTION_URL,
    });
  }
}

bootstrapApplication(AppComponent, appConfig).catch((err) =>
  console.error(err),
);

The typeof window guard prevents accidental execution if this module is evaluated by Angular Universal or another SSR setup.

NgModule bootstrap variant

If your app uses platformBrowserDynamic:

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { HumanBehaviorTracker } from "humanbehavior-js";
import { AppModule } from "./app/app.module";

declare const process: { env: Record<string, string | undefined> };

if (typeof window !== "undefined") {
  const apiKey = process.env.NG_APP_HUMANBEHAVIOR_API_KEY;
  if (apiKey) {
    HumanBehaviorTracker.init(apiKey, {
      ingestionUrl: process.env.NG_APP_HUMANBEHAVIOR_INGESTION_URL,
    });
  }
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

Build tooling requirement

Angular projects differ. Pick the approach your repo already uses:

Approach	What to check
`@ngx-env/builder`	`NG_APP_` values are available as `process.env.NG_APP_`
Custom webpack/define	Values are replaced at build time
`environment.ts` files	Map values there, then pass them to `HumanBehaviorTracker.init`
Runtime config JSON	Fetch/load config before calling init

The docs do not claim Angular ships a native env loader. The wizard's NG_APP_ names are a convention, not an Angular platform feature.

Router behavior

Angular router navigation uses browser history. The SDK's automatic navigation capture handles normal route transitions.

If you have unusual routing, you can call trackPageView() from a router event subscription:

const tracker = HumanBehaviorTracker.init(apiKey);

router.events.subscribe((event) => {
  if (event instanceof NavigationEnd) {
    void tracker.trackPageView();
  }
});

Most apps do not need this manual hook.

SSR / Angular Universal

File / context	Status
Browser `src/main.ts`	Recommended
`main.server.ts`	Do not initialize
Server app module	Do not initialize
Component constructors	Avoid; can run many times
App initializer with browser guard	Acceptable if it runs once

Options example

HumanBehaviorTracker.init(apiKey, {
  ingestionUrl: process.env.NG_APP_HUMANBEHAVIOR_INGESTION_URL,
  environment: process.env.NG_APP_ENVIRONMENT,
  release: process.env.NG_APP_VERSION,
  redactionStrategy: { mode: "visibility-first" },
});

Common pitfalls

Pitfall	Symptom	Fix
`process` is not defined	Build/runtime error	Use your repo's env tooling or `environment.ts`
Init in server bundle	`window`/DOM errors	Guard with `typeof window` and use browser entry
Multiple Angular bootstraps	Duplicate init attempts	Keep one shared init
No replay after deploy	Env replaced at build time with empty value	Inspect built env config and network requests

Wizard config summary

Wizard field	Value
Integration	`angular`
Package signal	`@angular/core`
File signal	`angular.json`
Env vars	`NG_APP_HUMANBEHAVIOR_API_KEY`, `NG_APP_HUMANBEHAVIOR_INGESTION_URL`
Reference entry	`src/main.ts`

Verify

Rebuild/restart after env changes.
Open the Angular app in a browser.
Confirm ingestion requests return 2xx.
Navigate between Angular routes.
Check Replays and Dashboard.

Full checklist: Verify data is flowing.

Angular

On this page