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 in its engines field. CI tests Node.js 22 and 24. @angular/core and @angular/common 12.2 and newer are supported, with no upper bound. 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 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. Signal history uses samples, since `@angular/core/primitives/signals` exists from 17.0.	Works with `browser` and `application`. Under webpack, signal history uses samples.
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 or later. If the server must stay on an older Node.js, run the standalone CLI on Node.js 22 or later beside it instead.	Works.
Standalone CLI next to `ng serve`	Works. Run `npx pangular dev` with Node.js 22 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 peer range is @angular/core and @angular/common >=12.2 with no upper bound. 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
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
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.

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 CLI runs next to `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

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.

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

// proxy.conf.json
{
  "/__pangular": {
    "target": "http://localhost:9999",
    "pathRewrite": {"^/__pangular": ""},
    "ws": true
  }
}

A client-only app (no SSR) has no server of its own to mount the devtools in. 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. Run the standalone CLI next to it, 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 above 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.

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

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, 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, the full-page viewer is at /__pangular/ on your app's origin.

FAQ

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 Angular versions

Angular 12 to 19

Setup on Angular 12 to 19

Tested versions

Install the package

Dependency or dev dependency

Entry points

The CLI binary

Pick a setup

Server part

Browser part

Client-only Angular CLI app

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 Angular versions

Angular 12 to 19

Setup on Angular 12 to 19

Tested versions

Install the package

Dependency or dev dependency

Entry points

The CLI binary

Pick a setup

Server part

Browser part

Client-only Angular CLI app

Configure the devtools

Add the Chrome extension

Check that it works

FAQ

Where to next