Angular Integration

@iteraai/angular-component-inspector is the Angular SDK for browser DOM apps embedded in the hosted Itera editor.

The supported v1 path is Angular 18, 19, 20, and 21 running in development mode. Keep the app-side setup small: one inspector bootstrap call in main.ts, one Angular CLI builder swap for build, and one builder swap for serve.

Supported runtime

• Angular 18, 19, 20, and 21
• browser DOM apps in development mode
• standalone bootstrapApplication(...) and classic browser bootstrapModule(...) startup

Out of scope:

• SSR-only entrypoints
• non-DOM renderers
• template-node source mapping
• Angular 17 and older

Install

npm install @iteraai/angular-component-inspector @iteraai/inspector-protocol

Your app should already provide a supported Angular runtime. The current peer range is @angular/core ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0.

Bootstrap in main.ts

import type { ApplicationConfig, Type } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { bootstrapEmbeddedInspectorBridge } from '@iteraai/angular-component-inspector/embeddedBootstrap';
import { bootIterationInspectorRuntime } from '@iteraai/angular-component-inspector/iterationInspector';

declare const AppComponent: Type<unknown>;
declare const appConfig: ApplicationConfig;
declare const environment: {
  production: boolean;
  VITE_ITERA_COMPONENT_INSPECTOR_HOST_ORIGINS?: string;
};

const bridge = bootstrapEmbeddedInspectorBridge({
  enabled: !environment.production,
  hostOrigins: environment.VITE_ITERA_COMPONENT_INSPECTOR_HOST_ORIGINS,
});

bootIterationInspectorRuntime();
void bootstrapApplication(AppComponent, appConfig);

window.addEventListener('beforeunload', () => {
  bridge.destroy();
});

Expose VITE_ITERA_COMPONENT_INSPECTOR_HOST_ORIGINS through your Angular app config surface and pass environment.VITE_ITERA_COMPONENT_INSPECTOR_HOST_ORIGINS directly to hostOrigins, as shown in the snippet.

Keep the bridge bootstrap and bootIterationInspectorRuntime() in the browser entrypoint before bootstrapApplication(...) or platformBrowserDynamic().bootstrapModule(...).

Angular integration is registration-free. You do not need to register Angular roots or component instances manually with the inspector runtime.

If the host does not use element selection, you can omit bootIterationInspectorRuntime().

Required angular.json builder wiring

{
  "projects": {
    "app": {
      "architect": {
        "build": {
          "builder": "@iteraai/angular-component-inspector:application",
          "options": {
            "browser": "src/main.ts",
            "inspectorSourceMetadata": {
              "enabled": true
            }
          }
        },
        "serve": {
          "builder": "@iteraai/angular-component-inspector:dev-server",
          "options": {
            "buildTarget": "app:build:development",
            "inspectorSourceMetadata": {
              "enabled": true
            }
          }
        }
      }
    }
  }
}

Keep your existing Angular CLI options and replace the builder names for the supported development path.

The package builders inject dev-only component source metadata. With that wiring in place, supported tree snapshots expose:

• project-relative source.file
• required 1-based source.line
• additive source.column when available

If you leave the standard Angular CLI builders in place, tree, props, highlight, snapshot, and element selection still work in dev mode, but Angular source metadata should be treated as unavailable.

What v1 does and does not model

Supported behavior:

• component tree snapshots
• node props from public Angular debug metadata
• host-element highlight
• preview-path updates
• iteration selection with componentPath and compatibility reactComponentPath

Current limits:

• the tree is component-only, so directives and embedded views are not separate nodes
• source metadata describes component definitions, not template nodes
• the supported contract is development mode only

Why dev mode matters

The Angular bridge relies on public window.ng globals. Production builds usually do not expose those globals, so the bridge stays safe but tree requests can return empty results and source metadata is not guaranteed.

Use Troubleshooting when READY arrives but Angular data is missing, window.ng is absent, or the builder path is not enabled.