Skip to content

quick-start.md

Latest commit

 

History

History
151 lines (110 loc) · 7.7 KB

quick-start.md

File metadata and controls

151 lines (110 loc) · 7.7 KB
Raw
title Quick start
description Add the devtools to an Angular CLI app with server-side rendering and open the panel on your page.
From install to a live panel on your page, in an Angular CLI app with server-side rendering.

Quick start

This page takes one path: an *Angular CLI app with SSR, run with ng serve. Four steps take you from install to a live panel. The devtools mount in the Express server that the CLI generated, so there is one process to run and nothing to proxy. If your app is set up another way, see Other ways to set it up.

Before you start

You need an Angular CLI app with SSR, on Angular 20 or later, and Node.js 22 or later. An SSR app has a src/server.ts. To create one, run ng new my-app --ssr.

A client-only app has no server to mount the devtools in. Follow Client-only Angular CLI app instead.

Install the package

Install it as a dependency, not a dev dependency, because server.ts imports it when the server starts.

pnpm add @pangular-inspector/devtools
npm install @pangular-inspector/devtools
yarn add @pangular-inspector/devtools
bun add @pangular-inspector/devtools

Mount the hub

Open src/server.ts. Import initPangularHub and mount its middleware right after const app = express(), before the generated express.static and Angular handlers:

// src/server.ts
import {
  AngularNodeAppEngine,
  createNodeRequestHandler,
  isMainModule,
  writeResponseToNodeResponse,
} from '@angular/ssr/node';
import express from 'express';
import {join} from 'node:path';
import {initPangularHub} from '@pangular-inspector/devtools/hub';

const browserDistFolder = join(import.meta.dirname, '../browser');

const app = express();
const angularApp = new AngularNodeAppEngine();
// Before express.static and the Angular handler, so the devtools routes answer first.
const devtools = initPangularHub({ws: false});
app.use(devtools.nodeMiddleware);

Leave the rest of the file as it is. ws: false connects the browser over server-sent events on the same port, which works under ng serve. When NODE_ENV is production, the hub is off and the middleware only calls next().

Load the overlay

The overlay reads the running page and adds the button that opens the panel. Import it 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));

ngDevMode is false in production builds, so the import never runs there and the overlay stays out of your production bundle.

Open the panel

Start the app

ng serve

Open http://localhost:4200. A round button with the Pangular Inspector logo appears in the bottom-right corner of the page. Click it, or press Alt+Shift+P.

Enter the one-time code

The first time the panel opens, it shows Authorize Pangular Inspector and asks for a 6-digit code. The terminal that runs ng serve prints the code in a Pangular Inspector box, next to auth code. Type it and click Authorize.

The hub asks for the code by default. Access and redaction covers what it protects.

Check that it works

The panel opens on the Dashboard, and the header shows Live. The tabs now read your running app.

To see the panel on a page of its own, open http://localhost:4200/__devframes/.

Troubleshooting

The app is probably a production build. ng build uses the production configuration by default, and the overlay import never runs there. Use ng serve, or build with --configuration development. Then check that main.ts imports the overlay. The page could not reach the hub. Check that app.use(devtools.nodeMiddleware) comes before express.static and the Angular handler in server.ts. Check that you entered the code from the terminal, and that the header shows Live. A browser reads data only after it exchanges the code.

Other ways to set it up

Your app or goal Follow
An Angular CLI app without SSR Client-only Angular CLI app
An Analog app or another Vite-based app Vite and Analog
SSR on Hono, h3 or Fastify Hono, h3 and Fastify
More hub options, SSR tracing and production Angular CLI and Express
Your source files only, with no app running Standalone CLI
The panel inside Chrome DevTools Chrome extension
A coding agent MCP server
An Angular Native, NativeScript or Capacitor app Angular Native, NativeScript, Set up Capacitor

Where to next