| title | Dashboard |
|---|---|
| description | Project metadata and a count for each inspector. |
The Dashboard opens by default. The top block describes your workspace. The cards below count what each inspector found, and each card opens its tab.
The top block shows the project name and a chip for each of these:
| Chip | Shows |
|---|---|
| Angular | The installed Angular version. |
| TypeScript | The installed TypeScript version. |
| SSR | On or Off. |
| Analog | The Analog version. Shown in Analog apps only. |
| Change detection | Zoneless, zone.js, or Zoneless, zone.js loaded when the app is zoneless but still loads zone.js. Shown once a page reports its injectors. |
Each card counts what one inspector found. Click a card to open its tab. When the hub is mounted, the NgRx card opens the NgRx dock.
| Card | Counts |
|---|---|
| Components | Components in source, plus the number of directives. |
| Routes | Navigable page paths in source, plus the number of redirects. |
| Signals | Nodes in the live signal graph, plus the declarations in source. Without a page, the declarations in source. |
| Injectors | Live injectors on the page, plus their providers. Without a page, the provider declarations in source. |
| NgRx declarations | NgRx declarations in source, broken down by kind. |
| Pipes | Custom pipes in source, plus the built-in pipes in use. |
| Forms | Forms on the page, plus how many are invalid. |
| SSR & HTTP | HTTP calls on the page and the server calls made while rendering it, plus how many failed. |
Cards of inspectors turned off in the configuration are hidden.
A card shows Counting… while it loads. It shows Count unavailable when the tab can't read its data. The Forms and SSR & HTTP cards show 0 until a page reports a form or a call.
Below the cards, the Configuration block lists the devtools options that differ from the defaults, such as Inspectors off, Blocked actions and Limits. It says Defaults when nothing is changed. Until the panel connects, the block says Loading…, the stat cards stay hidden and the tab strip shows only Dashboard and the open tab, since the panel doesn't know yet which inspectors are on. See Configuration.
Below the Configuration block, the Security block shows whether the one-time code is on, how many clients hold a trusted token and when those tokens expire, how many pairing tokens the server accepts, and who may reach the server: this machine only or other machines too, and the allowed origins and hosts. It never shows a token or the code. A static report shows none. See Check the security status.
Most of the Dashboard reads your workspace, not the running page. It works before the app loads in a browser.
The server reads versions from the installed packages in node_modules. When a package is not installed, it falls back to the range in package.json.
The project name comes from angular.json. The devtools pick defaultProject when it is set, then the project whose root is the workspace folder, then the first application project. Without angular.json, the name comes from a project.json in the scanned folder, as in an Nx app folder passed with --root. When neither file names a project, it comes from package.json.
SSR is On when the build options of that project set ssr or server, or when it has a server target (Angular Universal). The devtools read architect in angular.json and targets in project.json. For *Analog apps, SSR follows the ssr option of analog().
The Change detection chip reads the running page, not the workspace. The page checks the NgZone its root injector created: Angular provides a no-op zone for zoneless apps and a real one with provideZoneChangeDetection. It also checks whether Zone is defined on the page. The chip comes from the Injectors inspector, so it is hidden when that inspector is off. See Zoneless on angular.dev.
The Components, Routes, NgRx and Pipes cards count the source scan. The Signals and Injectors cards use the live page when one is connected, and the source scan otherwise. Opened from the popup or the Chrome extension, they count the page the Dashboard belongs to, like the Signals and Injectors tabs. Opened on its own, they count the page that reported last. The live Signals count covers the graph of the one component the Signals tab shows, and counts its signals, computeds, linked signals and effects.
The Forms and SSR & HTTP cards read the live page only, and update while it runs. Opened from the popup or the Chrome extension, they count the page the Dashboard belongs to. Opened on its own, the Forms card counts the forms of every connected page, like the Forms tab, and the SSR & HTTP card counts the page that reported last. A form counts as invalid when its root is INVALID. A call counts as failed when it got no response or a status of 400 or above. Cancelled calls don't count as failed.
Confirm the Angular and TypeScript chips match what you expect. A mismatch usually means a stale install. The Signals and Injectors cards switch to live counts once a page connects. The Forms and SSR & HTTP cards fill in as the page renders forms and makes calls. Click the card for the area you want to look at. It opens that tab.| Tool | What it returns |
|---|---|
pangular:scan-build |
Angular and TypeScript versions, the project name, SSR status and, in Analog apps, the Analog version. |
Static reports include the same data. See Tools for every tool.
If the project block says Project details unavailable, check that the dev server is running, then click Try again. In a static report there is no Try again button, so run pangular build again to rebuild the report.
The panel reads the project details once per connection and keeps them. If you upgrade a package or edit angular.json while the dev server runs, restart the dev server or reload the panel to see the change.