[erkamyaman]

Two open tracker items. Ships in 1.0.0.

Dev-server builder (#342)

A client-only app run with ng serve gets the devtools without editing server.ts and without running the standalone CLI behind a proxy.

• New builder: @pangular-inspector/devtools:dev-server wraps @angular/build:dev-server (or @angular-devkit/build-angular:dev-server). It hands the hub middleware to executeDevServerBuilder, and the middleware runs before Angular's HTML fallback.
• Options: the wrapped builder's own schema validates them, so its defaults apply. devtools: false turns the hub off. The builder warns on a webpack build target, because webpack takes no middleware.
• Built as CommonJS: the CLI loads builders with require().
• ng add: switches eligible serve targets to the new builder: application and browser-esbuild builds. --dev-server=false keeps the old behaviour. Express SSR and Vite setups are unchanged.
• Docs: installation.md and the quick start explain the builder.

Module timings in the Build tab (#373)

• Collection: vite-timings.ts wraps the client environment's plugin container. It records the resolveId, load and transform times of each module, keeps at most 5,000 modules, and runs in dev only.
• Reports: module-graph reports the times and gets a "Slowest modules" section. There is no new tool or argument.
• Panel: the Build tab has sortable columns (Module, Size, Time, Importers, Imports), using the shared SortHeader. A Time cell shows the per-phase breakdown when you hover it.
• Docs: build.md has a new "Module timings" section with its limits. Timings are wall-clock and come from the Vite plugin only.

Refs #342, #373

Checks

• Pass: typecheck, format:check, lint, commit:check, docs:build, test:axe (245 ok).
• Tests:
  • test:devtools: 4443 passed.
  • test:panel: 1068 passed.
  • New: dev-server-builder.test.ts (13 tests), 9 ng-add tests, vite-timings.test.ts (7 tests, including a real Vite dev server), and Build tab sorting tests.
• Manual: I ran the real @angular/build dev server through the builder:
  • the app returned 200;
  • /__devframes/ returned 200;
  • a foreign origin was refused with 403.
• After merging main: I reran typecheck, format, lint and the affected tests.

---

Generated by Claude Code

Summary by CodeRabbit

• New Features
  • Added per-module resolve, load, and transform timings to the Build inspector, with sortable time columns, timing breakdowns, and coverage information.
  • Module-graph search results now include timing details and identify the slowest modules.
  • Client-only Angular CLI apps can mount the inspector in ng serve; ng add configures this automatically when the project is compatible.
• Documentation
  • Updated setup guides, troubleshooting, and Build inspector documentation with the new Angular server option and module timing details.

[cloudflare-workers-and-pages]

🚀 Deploying Preview to Cloudflare 🚀

Preview Deployments by commit

Status	Deployment URL	Commit	Updated (UTC)	See this deployment's details
Build: Failed ❌ View logs ↗		04f9cd7	2026-11-08T08:46:41.250Z	View logs ↗
Build: In progress 🔵 View logs ↗		bd654b4	2026-11-08T08:39:25.752Z	View logs ↗

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The PR adds per-module Vite timing collection and reporting in the Build inspector and module-graph tool. It also adds an Angular CLI dev-server builder, updates ng add to select it for eligible projects, and documents both setup paths.

Changes: Vite Module Timings

Layer / File(s)	Summary
Collect Vite module timings packages/devtools/src/vite-timings.ts, packages/devtools/src/vite.ts, packages/devtools/src/__tests__/vite-timings.test.ts	The Vite plugin records resolve, load, and transform durations for modules. The collector caps storage at 5,000 modules and stops when the HTTP server closes.
Attach timings to the build graph packages/devtools/src/build-graph.ts, packages/devtools/src/rpc/build-register.ts, packages/devtools/src/__tests__/build-graph.test.ts	The graph includes rounded phase durations, totals, and timing coverage. The module-graph report includes timing in search results and lists the slowest timed modules.
Display and document module timings app/src/pages/build-inspector.ts, app/src/__tests__/performance-build-pages.test.ts, apps/docs/src/content/inspectors/build.md, apps/docs/src/content/agents/tools.md, packages/devtools/CHANGELOG.md, extension/ui/*	The Build inspector shows timing coverage and sortable module timing columns. Documentation and changelog entries describe the timing data; extension asset references are updated.

Angular CLI Dev-Server Builder

Layer / File(s)	Summary
Implement and package the dev-server builder packages/devtools/src/builders/*, packages/devtools/src/__tests__/dev-server-builder.test.ts, packages/devtools/package.json, packages/devtools/tsdown.config.ts	The builder selects a supported Angular dev server, forwards its options, and manages Inspector hub middleware and shutdown. The package registers and builds the builder, with tests for execution, schema, and published output.
Switch supported ng add serve targets packages/devtools/src/schematics/ng-add/*, packages/devtools/src/__tests__/schematics-ng-add.test.ts	ng add adds a default-enabled devServer option and switches eligible client-only serve targets. Tests cover opt-out and unsupported project configurations.
Document the Angular CLI setup paths apps/docs/src/content/getting-started/*, apps/docs/src/content/roadmap.md, packages/devtools/CHANGELOG.md, packages/devtools/src/__tests__/proxy-setup.test.ts	The guides describe builder-based setup and retain the standalone CLI and proxy alternative. The roadmap, changelog, and proxy documentation test reflect these setup paths.

Estimated code review effort: 4 (Complex) | ~60 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  participant VitePlugin
  participant timeViteModules
  participant PluginContainer
  participant ModuleTimings
  participant viteGraphSource
  VitePlugin->>timeViteModules: wrap the client plugin container
  PluginContainer->>ModuleTimings: record phase durations
  VitePlugin->>viteGraphSource: pass collected timings
  viteGraphSource->>ModuleTimings: look up timings by module ID

Loading

sequenceDiagram
  participant AngularCLI
  participant runDevServer
  participant AngularDevServer
  participant InspectorHub
  AngularCLI->>runDevServer: run serve target with builder options
  runDevServer->>InspectorHub: start hub and obtain middleware when enabled
  runDevServer->>AngularDevServer: execute selected server with options and middleware
  AngularDevServer->>runDevServer: emit server output
  runDevServer->>InspectorHub: close hub on shutdown

Loading

Possibly related issues

• release: follow-ups for code health, CI, setup and the docs site #373 — The PR adds per-module resolve, load, and transform timings described by this tracker; the supplied context notes that the tracker remains open and its numbering connection is unresolved.
• ui: follow-ups for the panel shell, popup and accessibility #370 — The PR adds sortable Build tab headers for module, size, time, importers, and imports; the supplied context does not establish whether it addresses the aria-sort detail.

Possibly related PRs

• pangular-inspector/devtools#489 — It adds the Build inspector and graph interfaces that this PR extends with timing fields and reports.

Merge Risk: Low · up to 04f9c

The new dev-server builder and module timings show no established functional problems. The installation guide overstates test coverage for the builder setup, which is a small docs fix.

- [ ] Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

Share

• X
• Mastodon
• Reddit
• LinkedIn

[nx-cloud]

View your CI Pipeline Execution ↗ for commit bd654b4

Command	Status	Duration	Result
nx affected -t test build	✅ Succeeded	3m 5s	View ↗
nx build --configuration development	✅ Succeeded	1m 52s	View ↗

💡 Verify your cache is correct by running tasks in a sandbox. Read docs ↗

---

☁️ Nx Cloud last updated this comment at 2026-11-08 08:49:08 UTC

[erkamyaman]

Workers Builds: angular-devtools fails on every open PR. The cause is the Cloudflare deploy setup, not this change, and this PR has no fix for it. The merge is gated by the repo's own CI: Nx test and build, typecheck, axe and docs.

---

Generated by Claude Code