title	Installation
description	Install the devtools package and choose where it runs.

One package, two parts. A server part that hosts the devtools, and a browser part that sends live data from your page.

Installation

The devtools ship as one npm package, @pangular-inspector/devtools. It contains the Node side, the browser overlay, the in-page popup, the CLI and the built UI.

Prerequisites

The package declares node >=22.12.0 in its engines field, which initPangularHub() needs. Your app's tools may need more: the Angular 22.2 CLI needs Node.js 22.22.3 or later, and the Analog app template needs npm 11. CI tests Node.js 22 and 24. @angular/core and @angular/common 12.2 up to, but not including, 23.0 are supported. The upper bound moves up once a release is tested on the next major. Older versions show less data. See Supported Angular versions. pnpm, npm, yarn or bun. Any of the four. Live data comes from Angular's debug API (window.ng). Production builds remove it, so the live tabs stay empty there. Run your app in development mode while you inspect it.

Supported setups

Every setup has a server part, which serves the panel. To see live data from a page, the page also runs the overlay. The standalone CLI on its own reads only your source files and needs no overlay. Find your app in the table, then follow its page.

Your app	Dev server or builder	Server part	Steps	Install check
Angular CLI with SSR	`ng serve` or the built SSR server (`@angular/build`)	`initPangularHub()` in `server.ts`	3	Weekly
Angular CLI without SSR	`ng serve` (`@angular/build`)	The `dev-server` builder	3	Weekly
Analog	Vite	Vite plugin	2	Weekly
Another Angular app with its own `vite.config`	Vite	Vite plugin	2	No
Angular SSR on Hono, h3 or Fastify	Your server	`initPangularHub()` handler	3	No
Your source files, with no app running	None	Standalone CLI	1	Weekly
NativeScript, Angular Native or Capacitor	The platform's own tooling	Standalone CLI or a hub	3 to 4	No

Steps count what you add to the app, from the install to the first Live panel. The Chrome extension works on top of any setup with a browser page and adds no server part. Platforms lists the device targets and what is checked on each.

Builders

The builder bundles your app and the overlay import in main.ts. The Vite plugin plugs into a Vite dev server, and the @pangular-inspector/devtools:dev-server builder into the Angular CLI dev server. The other server parts run in your server or in the standalone CLI.

Builder	Status
`@angular/build:application` and `@angular/build:dev-server`	Supported. The weekly install check runs it on Angular 20.3, 21 and 22, with and without SSR.
Vite, through `@analogjs/platform`	Supported. The weekly install check runs a fresh Analog app.
Vite, with your own `vite.config`	Supported through the same plugin, but not tested. The Angular CLI dev server does not accept Vite plugins, so `ng serve` apps use the `dev-server` builder, the hub or the CLI instead.
`@angular-devkit/build-angular:browser` (webpack)	Supported, but not in the install check. Load the overlay in `main.ts` and run the standalone CLI next to `ng serve`, or the Express hub for an SSR app. See Setup on Angular 12 to 19.
Nx executors	Not tested. The standalone CLI reads every `project.json` of the workspace, see Nx workspaces. The rest depends on the builder the executor runs.
Rsbuild and other bundlers	Not tested.

What the install check runs

The weekly E2E workflow packs the package, publishes it to a local registry, installs it into fresh apps the way these pages say. Each cell with an app builds it, starts it, and opens the app and the panel in Chromium until the Components tab shows the app root.

Cell	App	Package managers	Angular
`angular-cli`	`ng new --ssr` with the Express hub, built for development and run on the SSR server	npm, pnpm	20.3, 21 and 22
`angular-cli-serve`	The same app under `ng serve`	npm, pnpm	20.3, 21 and 22
`angular-cli-nossr`	`ng new --ssr=false` with the standalone CLI behind the `ng serve` proxy	npm, pnpm	20.3, 21 and 22
`analog`	`create-analog` with the Vite plugin, built with `vite build`, then run on the Vite dev server	pnpm	The template's
`cli`	The standalone CLI with `npx`, its MCP endpoint and the static report	npm, pnpm	Newest

yarn and bun are not in the weekly run. End-to-end scripts shows how to run the cells yourself.

Supported Angular versions

The peer range covers Angular 12.2 and later, and CI tests it (see Tested versions). The overlay checks each debug API on the page and sends what it finds with the page's Angular version, so each tab shows the data that version provides. Only the profiler also looks at the version: the overlay uses ɵsetProfiler from Angular 20.0, because before that it holds a single profiler.

When a tab needs a debug API the page doesn't have, it says which Angular version the feature needs and which one the page runs, for example "The live signal graph needs Angular 20.1 or later; this page runs Angular 15.2." The agent tools answer Unsupported on this Angular version with the same sentence, and list-pages shows each page's Angular version next to its platform.

Feature	Needs Angular
Live component tree, detail and values	12.0
Telling detached components from destroyed ones	14.0
Injected services, providers and environment injectors	16.2
Full injector tree with lookup paths	17.0
Signal values in the component detail (`ng.isSignal`)	17.1
Form events from `AbstractControl.events`	18.0
The `@pangular-inspector/devtools/http` entry	19.0
Defer blocks list	19.1
Change detection recording and Angular profiling	20.0
Subscriptions tied to component instances	20.0
Live signal graph and effect counts in Leaks	20.1
@for blocks list	22.0

All of them need a development build, since production builds leave out window.ng.

Angular 12 to 19

On Angular 12 to 19 the overlay degrades as the table above shows:

The Injectors tab shows the element injectors with their components and directives. From 16.2 it adds providers, dependencies and environment injectors.
Before 16.2, the overlay finds the Router through a router link, the component an outlet renders or the root component, whichever holds it. A page where none of them injects the Router shows no router data. The router setup is then read in events-only mode, so the setup kind shows unknown and features found through providers (preloading, the scroller, withDebugTracing()) show off.
Before 16.2, the NgRx tab can't find the @ngrx/store Store or signal stores that components provide.
Before 16.2, the errors collector can't wrap the app's ErrorHandler. It counts the errors Angular's default handler logs instead, so errors a custom handler swallows don't show.
Before 18.0, the Forms tab builds its event timeline by comparing snapshots, since controls have no events stream.

Setup on Angular 12 to 19

Setup	Angular 12 to 16	Angular 17 to 19
Overlay import in `main.ts`	Works with the webpack-based `@angular-devkit/build-angular:browser` builder.	Works with `browser` and `application`.
Vite plugin (Analog)	Works. The plugin points `@angular/core/primitives/signals` at a stub before 17.0.	Works.
`initPangularHub()` in an Express server	Works when the server runs on Node.js 22.12 or later. On an older Node.js the hub logs why and turns itself off. To keep the devtools there, run the standalone CLI on Node.js 22.12 or later beside it instead.	Works.
Standalone CLI next to `ng serve`	Works. Run `npx pangular dev` with Node.js 22.12 or later, and the app's own CLI with the Node.js version it supports.	Works.
Chrome extension	Works on top of any of the setups above.	Works.
`@pangular-inspector/devtools/http`	Not available. It imports `REQUEST` and `provideEnvironmentInitializer`, so the build fails. Leave it out; the HTTP timeline and fault rules need it.	Not available before 19.0, for the same reason.

With the webpack-based browser builder, use the standalone CLI next to ng serve, as in Client-only Angular CLI app, or the Express hub for an SSR app.

TypeScript before 4.7 (Angular 12 and 13) can't read the package's .d.mts types, so import('@pangular-inspector/devtools/overlay') fails the type check. Declare the module in a typings file:

// src/typings.d.ts
declare module '@pangular-inspector/devtools/overlay';

Tested versions

The Vite plugin needs Vite 6 or later (vite >=6). An app on Vite 5 can still use the Express hub or the CLI, but npm checks the optional vite peer against the installed Vite and stops with ERESOLVE. Upgrading to Vite 6 is the clean fix. Otherwise add legacy-peer-deps=true to the project's .npmrc and commit it, then install as below; npm ci needs the same setting. That setting makes npm skip every peer check in the project, not just this one, so a missing or mismatched peer of another package goes unreported. pnpm only prints a warning. The peer range is @angular/core and @angular/common >=12.2.0 <23.0.0. The overlay reads Angular's private debug APIs, so each new major is tested before the range takes it in. CI tests these versions:

Angular	Node.js	What runs	When
12.2 (lowest supported)	22	The page-side tests against a real Angular app, after ngcc	Every push to `main`, and weekly
15.2	22	The page-side tests against a real Angular app	Every push to `main`, and weekly
17.3	22	The page-side tests against a real Angular app	Every push to `main`, and weekly
19.2	22	The page-side tests against a real Angular app	Every push to `main`, and weekly
20.0	22	The page-side tests against a real Angular app	Every push to `main`, and weekly
20.3 (latest 20.x)	22	The page-side tests against a real Angular app	Every push to `main`, and weekly
21 (latest 21.x)	22	The page-side tests against a real Angular app	Every push to `main`, and weekly
22 (latest 22.x)	22	The page-side tests, including Signal Forms	Every push to `main`, and weekly
`next` (prerelease)	22	The page-side tests. A failure is reported but does not fail the run	Every push to `main`, and weekly
22 (repository version)	24	Every package and panel test, the type checks and axe	Every pull request and push to `main`
Newest the ranges allow	24	A fresh Angular CLI app and a fresh Analog app with the package installed	Weekly

The page-side tests run in Node.js 22 for every Angular version, since they load Angular in jsdom rather than through its CLI. Tests of a feature a version lacks check the unavailable state on that version instead. Angular 13, 14, 16 and 18 are in the peer range but not tested. Some features need a later Angular release than 20.0. The inspector pages list them, for example abort and probe (20.2) and the live signal graph (20.1). The Signal Forms tests run on Angular 22 and later, where Signal Forms are stable.

Install the package

pnpm add -D @pangular-inspector/devtools

npm install -D @pangular-inspector/devtools

yarn add -D @pangular-inspector/devtools

bun add -D @pangular-inspector/devtools

MCP agent support (@devframes/agentic) and Devframe itself are included. You don't install them separately.

Set up with ng add

In an Angular CLI workspace, ng add installs the package and wires it in for you:

ng add @pangular-inspector/devtools

It looks at the project and picks the setup this page describes for it:

The project has	What `ng add` does
A `vite.config.ts` (Analog)	Adds `pangular()` to the `plugins` of the Vite plugin. The plugin loads the overlay, so `main.ts` stays as it is.
An Express `server.ts` (Angular SSR)	Adds `initPangularHub({ws: false})` and `app.use(devtools.nodeMiddleware)` right after `const app = express()`, as in Angular CLI and Express. Loads the overlay in `main.ts`.
Neither	Loads the overlay in `main.ts`, and switches the `serve` target in `angular.json` to the `@pangular-inspector/devtools:dev-server` builder, as in Client-only Angular CLI app.
A `server.ts` on another server, such as Hono	Loads the overlay in `main.ts`, leaves `server.ts` alone and points at Hono, h3 and Fastify.

The overlay goes after bootstrap, behind the ngDevMode check shown in Browser part. Pass --project <name> in a workspace with several applications. Without it, ng add takes the only application, or the first one.

ng add only switches a serve target that runs @angular/build:dev-server or @angular-devkit/build-angular:dev-server for an application or browser-esbuild build. For an @angular-devkit/build-angular dev server it keeps that builder in the builder option. A webpack build (browser) keeps its target, since its dev server takes no middleware, and ng add prints the standalone CLI steps instead. To keep the serve target and get the CLI steps, pass --dev-server=false. An SSR app with an Express server.ts keeps its serve target: the hub runs in server.ts.

ng add only inserts lines next to code it recognizes, such as import express from 'express' and const app = express(). When a file looks different, it leaves the file alone and prints the snippet to add by hand. It reads angular.json the way the Angular CLI does, with comments and trailing commas. When it can't read it, it changes nothing and prints the overlay snippet, and with --project it stops with an error that names angular.json. Running it again changes nothing: it skips files that already import the devtools. It saves the package as a dependency, which every setup works with. See Dependency or dev dependency to move it.

Dependency or dev dependency

Setup	Install it as
Vite or Analog	A dev dependency. The Vite plugin only runs in the dev server.
Client-only Angular CLI app	A dev dependency. The `dev-server` builder and the CLI only run with `ng serve`, and the overlay import only runs in development builds.
Standalone CLI	A dev dependency, or no install at all with `npx`.
Angular SSR with Express or another server	A dependency, because `server.ts` imports the hub when the production server starts. To keep it a dev dependency, import the hub only in development, with a dynamic `import()` behind your own check.

Entry points

The API reference lists every symbol each entry point exports, with its declaration.

Import	Use it for
`@pangular-inspector/devtools/hub`	`initPangularHub()`, the server middleware for an Express app.
`@pangular-inspector/devtools/vite`	The Vite plugin for a Vite-based Angular app, such as an Analog app.
`@pangular-inspector/devtools/overlay`	The browser script that collects live data from your page.
`@pangular-inspector/devtools/overlay-manual`	The same script, started only when you call `initOverlay`. See Set up Capacitor.
`@pangular-inspector/devtools/capacitor-hook`	Logs Capacitor plugin calls from app start. See Capacitor.
`@pangular-inspector/devtools/store-hook`	Lets NGXS, Elf and MiniRx stores report from app start. See Other stores.
`@pangular-inspector/devtools/startup-hook`	Times provider construction at startup. See Injectors.
`@pangular-inspector/devtools/plugin`	The plugin API for a library's own tab and agent tools. See Write a plugin.
`@pangular-inspector/devtools/overlay-angular-native`	The overlay for an Angular Native app. See Angular Native.
`@pangular-inspector/devtools/overlay-nativescript`	The overlay for a NativeScript Angular app. See NativeScript.
`@pangular-inspector/devtools/popup`	The floating button and panel on your page.
`@pangular-inspector/devtools/http`	The HTTP interceptor and hydration hooks for the SSR & HTTP tab.
`@pangular-inspector/devtools/ssr`	SSR tracing for web-standard handlers, Fastify and Analog. See Hono, h3 and Fastify.
`@pangular-inspector/devtools/config`	The `PangularConfig` type and its defaults. See Configuration.
`@pangular-inspector/devtools/devframe`	The devframe definition and `initDevframe()`, for custom hosts.
`@pangular-inspector/devtools`	The same as `@pangular-inspector/devtools/devframe`.
`@pangular-inspector/devtools/cd-data`	The change detection recording types and checks the server and the panel share.
`@pangular-inspector/devtools/cli`	`createPangularCli()`, the `pangular` command line, and `buildReport()`, to run them from your own script. See Standalone CLI.

The CLI binary

The package also installs a pangular binary. It runs the devtools without your app: a local server, a static report or an MCP server. See Standalone CLI.

Pick a setup

Every setup has two parts:

Server part: serves the devtools UI and receives data.
Browser part: the overlay. It runs in your page and sends live data to the server.

Server part

Pick the tab that matches your app:

// src/server.ts
import express from 'express';
import {initPangularHub} from '@pangular-inspector/devtools/hub';

const app = express();
const devtools = initPangularHub({ws: false});
app.use(devtools.nodeMiddleware);

// vite.config.ts
import analog from '@analogjs/platform';
import pangular from '@pangular-inspector/devtools/vite';
import {defineConfig} from 'vite';

export default defineConfig({
  plugins: [analog(), pangular()],
});

# Run from the root of your Angular workspace
npx @pangular-inspector/devtools

{
  "serve": {
    "builder": "@pangular-inspector/devtools:dev-server"
  }
}

A client-only app (no SSR) has no server of its own to mount the devtools in. Its tab shows the serve target in angular.json (excerpt): the dev-server builder runs ng serve with the hub mounted. See Client-only Angular CLI app.

Browser part

Load the overlay after bootstrap, in development only:

// src/main.ts
import {bootstrapApplication} from '@angular/platform-browser';
import {App} from './app/app';
import {appConfig} from './app/app.config';

bootstrapApplication(App, appConfig)
  .then(() => {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      return import('@pangular-inspector/devtools/overlay');
    }
    return undefined;
  })
  .catch((err) => console.error(err));

With the Vite plugin, skip this step: the plugin adds the overlay to the pages the dev server serves. To load it yourself, see Load the overlay yourself.

The standalone CLI on its own has no page connected, so it needs no browser part. Behind the ng serve proxy of a client-only app it does, like any other setup.

Client-only Angular CLI app

An app created with ng new --ssr=false only runs ng serve. Mount the devtools in ng serve with the dev-server builder, or run the standalone CLI next to it behind a proxy.

With the dev-server builder

@pangular-inspector/devtools:dev-server runs the Angular CLI dev server and adds the hub's middleware to it, so the panel answers at /__devframes/ on the ng serve origin. ng add sets it up. To set it up by hand, change the builder of the serve target in angular.json (excerpt):

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@pangular-inspector/devtools:dev-server",
          "configurations": {
            "development": {"buildTarget": "my-app:build:development"}
          },
          "defaultConfiguration": "development"
        }
      }
    }
  }
}

Then load the overlay in main.ts, as in the browser part above, and run ng serve. It prints the panel URL next to the app URL, and the button appears on the page.

The builder takes every option of the dev server it runs, such as port, proxyConfig and ssl, and that builder checks them and applies its defaults. It adds two options of its own:

Option	Default	What it does
`devtools`	`true`	Mounts the hub. Set it to `false`, for example in a configuration, to serve the app without the devtools.
`builder`	`@angular/build:dev-server`, or `@angular-devkit/build-angular:dev-server` when only it is installed	The dev server to run. It is loaded from your workspace, so it is the version your app already uses.

The hub runs with its defaults: the one-time code, the origin check, requests from this machine only, and server-sent events instead of a WebSocket. It is off when NODE_ENV is production. The builder needs an application or browser-esbuild build. The webpack browser build has a dev server that takes no middleware, so use the standalone CLI there.

With the standalone CLI and a proxy

Run the standalone CLI next to ng serve, and let ng serve forward /__pangular/ to the CLI. The overlay and the popup look for the devtools at /__pangular/ on the page's own origin, so they find the CLI there.

Run npx pangular dev --port 9999 --proxy-origin http://localhost:4200 from the root of your workspace. It serves the panel, the connection and the WebSocket at the root of port 9999. --proxy-origin names the origin of ng serve, so the CLI prints its links for http://localhost:4200/__pangular/. Save the proxy.conf.json below next to angular.json. It strips the /__pangular prefix, and "ws": true forwards the WebSocket the overlay and the panel connect over. Set proxyConfig in the serve options of angular.json, or run ng serve --proxy-config proxy.conf.json. Import the overlay in main.ts, as in the browser part above. When your app connects, the CLI prints a code and a link like http://localhost:4200/__pangular/#devframe_otp=123456. Open the link, then reload your app if the panel was already open. Without --proxy-origin, the link points at port 9999, which only trusts port 9999. Then open the same code on your app's origin instead.

Save this as proxy.conf.json next to angular.json:

{
  "/__pangular": {
    "target": "http://localhost:9999",
    "pathRewrite": {"^/__pangular": ""},
    "ws": true
  }
}

Point the dev server at the proxy file in angular.json (excerpt):

{
  "projects": {
    "my-app": {
      "architect": {
        "serve": {
          "builder": "@angular/build:dev-server",
          "options": {
            "proxyConfig": "proxy.conf.json"
          }
        }
      }
    }
  }
}

With the proxy, the full-page panel is at /__pangular/ on your app's origin.

Configure the devtools

Everything is on by default. To turn inspectors, agent tools or actions off, or to change redaction and limits, pass options to the server part. See Configuration.

Add the Chrome extension

The Chrome extension adds a panel to Chrome DevTools. It sits on top of the Express or Vite setup. It does not replace the server part or the overlay.

Check that it works

Run ng serve for an Angular CLI app, or the Vite dev server for an Analog app. For a client-only app behind the proxy, keep pangular dev running next to ng serve. The Pangular Inspector button appears in the bottom-right corner of the page. The overlay adds it. Click the button. The header shows Live once the panel is connected. Go to /__devframes/ on the same server to see the devtools on their own page. For a client-only app behind the proxy, the full-page viewer is at /__pangular/ on your app's origin.

FAQ

The troubleshooting page lists the problems every setup shares, by symptom.

No. The package depends on Devframe and re-exports initDevframe from @pangular-inspector/devtools/devframe, for example to mount only the panel. Import it from there, so the panel and the devframe definition come from the same Devframe copy. Wherever your server part runs. An Express app imports the hub in server.ts, so the package must be installed where that server starts. The overlay import in main.ts only runs in development builds. Check that the app runs as a development build and that main.ts imports the overlay. A production build skips the import, so there is no button.

Navigation Menu

Repository navigation

installation.md

installation.md

Installation

Prerequisites

Supported setups

Builders

What the install check runs

Supported Angular versions

Angular 12 to 19

Setup on Angular 12 to 19

Tested versions

Install the package

Set up with ng add

Dependency or dev dependency

Entry points

The CLI binary

Pick a setup

Server part

Browser part

Client-only Angular CLI app

With the dev-server builder

With the standalone CLI and a proxy

Configure the devtools

Add the Chrome extension

Check that it works

FAQ

Where to next

FilesExpand file tree

installation.md

Latest commit

History

installation.md

File metadata and controls

Installation

Prerequisites

Supported setups

Builders

What the install check runs

Supported Angular versions

Angular 12 to 19

Setup on Angular 12 to 19

Tested versions

Install the package

Set up with ng add

Dependency or dev dependency

Entry points

The CLI binary

Pick a setup

Server part

Browser part

Client-only Angular CLI app

With the dev-server builder

With the standalone CLI and a proxy

Configure the devtools

Add the Chrome extension

Check that it works

FAQ

Where to next