node >=22 in its engines field. CI tests Node.js 22 and 24.
@angular/core and @angular/common 20 and newer are supported, with no upper bound. See Supported Angular versions for older versions.
+ @angular/core and @angular/common 12.2 and newer are supported, with no upper bound. Older versions show less data. See Supported Angular versions.
handleError method of the app's ErrorHandler, your own or Angular's. Your handler still runs, with the same arguments, after the overlay records the error.
+ The overlay wraps the handleError method of the app's ErrorHandler, your own or Angular's. Your handler still runs, with the same arguments, after the overlay records the error. Before Angular 16.2 the overlay can't find the handler, so it records what Angular's default handler logs.
error and unhandledrejection on window. They only listen, so the browser and Angular handle the event as before.
diff --git a/apps/docs/src/content/inspectors/forms.md b/apps/docs/src/content/inspectors/forms.md
index 07b06133..bb6b6daf 100644
--- a/apps/docs/src/content/inspectors/forms.md
+++ b/apps/docs/src/content/inspectors/forms.md
@@ -118,7 +118,7 @@ The actions bar works on the selected form:
### When the page reports
-The overlay reads the forms after change detection and pushes them when they change. It also pushes shortly after each `input`, `change`, `focusout`, `submit` or `reset` event. Reactive and template-driven forms also report each change through `control.events`.
+The overlay reads the forms after change detection and pushes them when they change. It also pushes shortly after each `input`, `change`, `focusout`, `submit` or `reset` event. Reactive and template-driven forms also report each change through `control.events`, which Angular has from 18.0. On older versions the timeline comes from comparing the forms between reads.
### Validators run only when needed
diff --git a/apps/docs/src/content/inspectors/signals.md b/apps/docs/src/content/inspectors/signals.md
index d0f5f5ea..6aa63951 100644
--- a/apps/docs/src/content/inspectors/signals.md
+++ b/apps/docs/src/content/inspectors/signals.md
@@ -146,7 +146,7 @@ Angular doesn't send a value for `linkedSignal` nodes. The overlay takes it from
### Exact and sampled values
-Exact **set** entries come from a hook on signal writes. The overlay matches a write to a node by its name, kind, version and value. It samples everything else each time it reads the page, as **sampled** entries.
+Exact **set** entries come from a hook on signal writes, which the overlay loads from `@angular/core/primitives/signals`. A webpack build (the `browser` builder) leaves that import to run time, where it fails, so there every entry is **sampled**. The overlay matches a write to a node by its name, kind, version and value. It samples everything else each time it reads the page, as **sampled** entries.
In a development build, the Angular compiler names most signals for you. It adds a `debugName` to `signal()`, `computed()`, `linkedSignal()`, `input()`, `model()`, queries, `effect()`, `resource()` and `httpResource()` when the call initializes a class field, a `this.name =` assignment or a variable. The name is the field or variable name.
diff --git a/docs/angular-compat.md b/docs/angular-compat.md
index 23e4b692..466f68f2 100644
--- a/docs/angular-compat.md
+++ b/docs/angular-compat.md
@@ -39,41 +39,72 @@ The `@angular/core` and `@angular/router` packages of these versions were packed
## Framework objects
-| API | Used by | First version | Shape changes up to 22 | Fallback |
-| --------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| `ɵcmp.selectors`, `ɵdir.selectors` | `directive-hosts.ts`, `forms.ts`, `overlay-*-views.ts` | 12.0 (every Ivy version) | None. | None needed. |
-| `ɵcmp.inputs` | `router-config.ts`, `router-links.ts` | 12.0 | Keys are public input names in every version; values gain a `[name, flags]` form for signal inputs in 17.1. Only the keys are read. | None needed. |
-| `ɵcmp.debugInfo` (`ɵsetClassDebugInfo`) | `component-source.ts`, `router.ts` | 17.0 | None. | No source link; the class name comes from the constructor. |
-| `ɵpipe`, `PipeDef` in `tView.data` | `pipes-runtime.ts` | 12.0 | `name`, `type` and `pure` in every version. | None needed. |
-| `__ngContext__` on DOM nodes | `pipes-runtime.ts` | 12.0 | 12 and 13 patch the LView array (or an `LContext`) onto the node. From 14.0 Angular patches a numeric view id, which `getComponent` upgrades to an `LContext` with `lView`. | `lViewOf()` reads all three forms; a bare id is resolved after `getComponent` ran on the node. |
-| LView slots (`TVIEW` 1, `PARENT` 3, `CONTEXT` 8) | `pipes-runtime.ts` | 12.0 | Unchanged. | None needed. |
-| LView `DECLARATION_COMPONENT_VIEW` | `pipes-runtime.ts` | 12.0 | Slot 16 up to 15.2, slot 15 from 16.0 (slot 16 then holds the declaration `LContainer`). | `declaringViewOf()` uses slot 16 when it holds a component view, else slot 15. |
-| `R3Injector.records`, `.scopes`, `.source` | `injector-tree.ts`, `ngrx-collector.ts`, `zone-mode.ts` | 12.0 | Unchanged. | None needed. |
-| `__ngDebugHydrationInfo__` | `hydration.ts`, `http-hydration.ts` | 17.1 | Hydration exists from 16.0, but dev builds only record this per node from 17.1. | Hosts are not marked hydrated or mismatched; the hydration section stays empty. |
-| `SIGNAL` symbol on signal functions | `signal-resources.ts`, `ngrx-collector.ts` | 16.0 | Unchanged. | None needed: before 16.0 there are no signals. |
-| `setPostSignalSetFn` (`@angular/core/primitives/signals`) | `signal-history.ts` | 17.0 as a package entry (16.x has it internally only) | Unchanged. | History falls back to sampled values (`writeHook: false`). See the build note below. |
-| `ng-version` attribute on root elements | `ng-capabilities.ts`, `change-detection.ts`, `router-setup.ts`, `host-tree.ts` and others | 12.0 | Unchanged. | Version unknown: messages say so, and `profiler` stays off. |
+| API | Used by | First version | Shape changes up to 22 | Fallback |
+| --------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ɵcmp.selectors`, `ɵdir.selectors` | `directive-hosts.ts`, `forms.ts`, `overlay-*-views.ts` | 12.0 (every Ivy version) | None. | None needed. |
+| `ɵcmp.inputs` | `router-config.ts`, `router-links.ts` | 12.0 | Keys are public input names in every version; values gain a `[name, flags]` form for signal inputs in 17.1. Only the keys are read. | None needed. |
+| `ɵcmp.debugInfo` (`ɵsetClassDebugInfo`) | `component-source.ts`, `router.ts` | 17.0 | None. | No source link; the class name comes from the constructor. |
+| `ɵpipe`, `PipeDef` in `tView.data` | `pipes-runtime.ts` | 12.0 | `name`, `type` and `pure` in every version. | None needed. |
+| `__ngContext__` on DOM nodes | `pipes-runtime.ts` | 12.0 | 12 and 13 patch the LView array (or an `LContext`) onto the node. From 14.0 Angular patches a numeric view id, which `getComponent` upgrades to an `LContext` with `lView`. | `lViewOf()` reads all three forms; a bare id is resolved after `getComponent` ran on the node. |
+| LView slots (`TVIEW` 1, `PARENT` 3, `CONTEXT` 8) | `pipes-runtime.ts` | 12.0 | Unchanged. | None needed. |
+| LView `DECLARATION_COMPONENT_VIEW` | `pipes-runtime.ts` | 12.0 | Slot 16 up to 15.2, slot 15 from 16.0 (slot 16 then holds the declaration `LContainer`). | `declaringViewOf()` uses slot 16 when it holds a component view, else slot 15. |
+| `R3Injector.records`, `.scopes`, `.source` | `injector-tree.ts`, `ngrx-collector.ts`, `zone-mode.ts` | 12.0 | Unchanged. | None needed. |
+| `__ngDebugHydrationInfo__` | `hydration.ts`, `http-hydration.ts` | 17.1 | Hydration exists from 16.0, but dev builds only record this per node from 17.1. | Hosts are not marked hydrated or mismatched; the hydration section stays empty. |
+| `SIGNAL` symbol on signal functions | `signal-resources.ts`, `ngrx-collector.ts` | 16.0 | Unchanged. | None needed: before 16.0 there are no signals. |
+| `setPostSignalSetFn` (`@angular/core/primitives/signals`) | `signal-history.ts` | 17.0 as a package entry (16.x has it internally only) | Unchanged. | History falls back to sampled values (`writeHook: false`). See "Builds on older toolchains" below. |
+| `AbstractControl.events` | `forms.ts`, `forms-collector.ts` | 18.0 | None. | `watchControlEvents()` returns null and the collector diffs snapshots for the form timeline. |
+| `AbstractControl.getRawValue` on `FormControl` | `forms.ts`, `forms-actions.ts` | 14.0 (`FormGroup` and `FormArray` have it from 12.0) | None. | `isAbstractControl()` checks `setValue`, which every control has; raw values fall back to `value`. |
+| `untracked` | `ngrx-collector.ts` | 16.0 | None. | Read at runtime from the `@angular/core` namespace; before 16.0 the value is read directly. A named import would fail webpack builds before 16.0. |
+| `ng-version` attribute on root elements | `ng-capabilities.ts`, `change-detection.ts`, `router-setup.ts`, `host-tree.ts` and others | 12.0 | Unchanged. | Version unknown: messages say so, and `profiler` stays off. |
## Router internals
-`router.ts` reads the Router through `read()` guards, so a field an older router lacks is left out of the report. `navigationTransitions` (whose events the overlay prefers) exists from 15.0; before that the overlay subscribes to `router.events`. The overlay calls `currentNavigation` when it is a function and falls back to `getCurrentNavigation()`, which every version has. `withComponentInputBinding` exists from 16.0 and `ROUTER_OUTLET_DATA` by 19.2 (not in 18.2).
+`router.ts` reads the Router through `read()` guards, so a field an older router lacks is left out of the report. `navigationTransitions` (whose events the overlay prefers) exists from 15.0; before that the overlay subscribes to `router.events`. The overlay calls `currentNavigation` when it is a function and falls back to `getCurrentNavigation()`, which every version has. `withComponentInputBinding` exists from 16.0 and `routerOutletData` from 19.0.
+
+| Field or behaviour | First version | Before it |
+| -------------------------------------------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `type` (`EventType`) on router events | 14.0 | `routerEventType()` reads the class name from `toString()` (`NavigationStart(id: 1, url: '/')`), which every event has and minification keeps. |
+| `Router.options` (the `forRoot` options) | 15.0 | Only the options the Router keeps as fields are read (`onSameUrlNavigation`, `paramsInheritanceStrategy`, `urlUpdateStrategy`), and none shows as set. |
+| `Router.lastSuccessfulNavigation` | 12.0, not on the Router in 15.0 to 16.x | 15.0 to 16.x keep it on `navigationTransitions` only, which `lastNavigationOf()` reads as well. |
+| `Location._locationStrategy` | 14.0 | Named `_platformStrategy`; the setup reads either. |
+| `Router.pendingTasks.hasPendingTasksObservable` | 20.0 | 16.0 to 19.x hold a `hasPendingTasks` subject, which `waitForStable()` reads; before 16.0 the Router has no pending tasks and the stability is unknown (`null`). |
+| `navigationTransitions.currentTransition` | 16.2 | No `checked` (the routes whose guards Angular checks) on navigation records. |
+| One matching pass (`applyRedirects` merged) | 16.0 | Angular runs `canMatch` guards in both passes, so the overlay records each run twice. |
+| Redirect request events | 18.0 | A guard redirect is linked to its target from the cancel reason (`Redirecting to "/login"`) and the navigation that starts next. |
+| `navigationErrorHandler` on the transitions, `RedirectCommand` | 18.0 | The handler is an environment initializer; the setup reports it as `off` and it can't redirect. |
+| NG04016 (redirect loop) | 17.0 | The loop fails with NG04002 and is not reported as a loop. |
+| Functional guards and resolvers, `provideRouter` | 14.2 | Class guards and `RouterModule.forRoot`; the overlay instruments both. |
## What each inspector shows
-| Inspector | Full data from | On older versions |
-| ---------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Components (tree, detail, values) | 12.0 | Signal values are left out of the detail before 17.1 (no `ng.isSignal`). Injected services are listed from 16.2. |
-| Components, `@defer` blocks | 19.1 | Unavailable note on 17.0 to 19.0; nothing on 12 to 16, which have no `@defer`. |
-| Components, `@for` blocks | 22.0 | Unavailable note on 17.0 to 21.x; nothing on 12 to 16. |
-| Components, change detection recording | 20.0 | Unavailable note. Angular profiling also needs 20.0. |
-| Injectors | 17.0 | 16.2 to 16.x: element injectors with providers and dependencies, and environment injectors, with element injectors left out of lookup paths. 12.0 to 16.1: element injectors with their components and directives only. |
-| Signals | 20.1 | The source scan and the unavailable note. 19.1 to 20.0 have `ɵgetSignalGraph` without node ids. |
-| Router | 16.2 | 12.0 to 16.1: live data when a router link, an outlet's component or the root component holds the Router; otherwise none. |
-| NgRx (`@ngrx/store`, signal stores provided in components) | 16.2 | Not found before 16.2; the view shows the unavailable note when it finds no store. |
-| Pipes, Forms, HTTP, Errors | 12.0 | No version gate was found in the APIs they read. Signal Forms and WebMCP tools need Angular 22 on their own. |
+| Inspector | Full data from | On older versions |
+| ---------------------------------------------------------- | -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Components (tree, detail, values) | 12.0 | Signal values are left out of the detail before 17.1 (no `ng.isSignal`). Injected services are listed from 16.2. |
+| Components, `@defer` blocks | 19.1 | Unavailable note on 17.0 to 19.0; nothing on 12 to 16, which have no `@defer`. |
+| Components, `@for` blocks | 22.0 | Unavailable note on 17.0 to 21.x; nothing on 12 to 16. |
+| Components, change detection recording | 20.0 | Unavailable note. Angular profiling also needs 20.0. |
+| Injectors | 17.0 | 16.2 to 16.x: element injectors with providers and dependencies, and environment injectors, with element injectors left out of lookup paths. 12.0 to 16.1: element injectors with their components and directives only. |
+| Signals | 20.1 | The source scan and the unavailable note. 19.1 to 20.0 have `ɵgetSignalGraph` without node ids. |
+| Router | 16.2 | 12.0 to 16.1: live data when a router link, an outlet's component or the root component holds the Router; otherwise none. |
+| NgRx (`@ngrx/store`, signal stores provided in components) | 16.2 | Not found before 16.2; the view shows the unavailable note when it finds no store. |
+| Pipes, Forms, HTTP, Errors | 12.0 | Forms: the event timeline comes from snapshot diffs before 18.0 (no `AbstractControl.events`). Errors: before 16.2 the `ErrorHandler` can't be found to wrap, so the collector counts what Angular's default handler logs. HTTP: the `/http` entry builds from 19.0. Signal Forms and WebMCP tools need Angular 22 on their own. |
+
+## How it is tested
+
+`.github/workflows/compat.yml` runs the page-side tests (`packages/devtools/vitest.compat.config.ts`) on Angular 12.2, 15.2, 17.3, 19.2, 20.0, 21 and 22, all on Node.js 22: the tests load Angular in jsdom with JIT, so they need no Angular CLI. Angular 12 ships View Engine bundles, so that job first compiles them for Ivy with ngcc from `@angular/compiler-cli` 12. The test helpers in `packages/devtools/src/__tests__/angular-version.ts` start TestBed, bootstrap an app (an NgModule before 14.1) and give zoneless change detection where each version has it.
+
+`angular-real-app.test.ts` bootstraps a small app with a pipe, a directive and the router on each version and checks that `window.ng` has exactly the utils `ng-shapes.ts` lists for that version, that `detectAngular()` reports the capabilities in the first table, and that each collector gives data or its documented fallback. `private-api-canary.test.ts` checks each util and framework field by the versions above. A test of a feature the version lacks checks the unavailable result on that version instead of being skipped; tests are skipped only where the Angular API the test builds on doesn't exist, such as functional guards before 14.2 or `@defer` before 17.0. The real `@ngrx` tests run from 19.0, because the workspace installs `@ngrx` 22.
+
+## Builds on older toolchains
+
+These were checked by building an Angular 12.2 and an Angular 15.2 app with `@angular-devkit/build-angular:browser` (webpack) and `import('@pangular-inspector/devtools/overlay')` in `main.ts`; the Angular 12 build was also loaded in jsdom, where the overlay started and looked for the server.
+
+- `signal-history.ts` imports `@angular/core/primitives/signals` with `/* webpackIgnore: true */`. webpack leaves the import to run time, where it fails and signal history falls back to samples (on 17 and 18 webpack builds too). Vite and esbuild resolve it; the Vite plugin aliases it to `signals-stub.ts` when the app's `@angular/core` is older than 17 (`vite-signals-stub.ts`).
+- The dist files are `.mjs`, so webpack treats a named import of a missing export as an error. The overlay imports nothing by name that Angular 12 lacks; `untracked` is read at run time. `@pangular-inspector/devtools/http` imports `REQUEST` and `provideEnvironmentInitializer`, so it builds from Angular 19.0 only.
+- `typesVersions` in `package.json` maps each entry to its `.d.mts` for `moduleResolution: node`, which Angular 12 to 16 apps use. TypeScript before 4.7 (Angular 12 and 13) can't read `.d.mts`, so those apps declare the module themselves (see the installation page).
## Not covered yet
-- The inventory comes from the packed bundles. CI runs the page-side tests against real Angular 20, 21 and 22 apps, but not yet against 12 to 19; that is the follow-up (issue #386, step 5). The fake `ng` objects in `packages/devtools/src/__tests__/ng-shapes.ts` follow the key lists above.
-- The overlay imports `@angular/core/primitives/signals` dynamically for the write hook. That entry exists from 17.0, so a bundler that resolves dynamic imports at build time (webpack in `@angular-devkit/build-angular`) may fail to build an Angular 12 to 16 app with the overlay. Setup on older builders is issue #386, step 6.
-- `package.json` still declares `@angular/core >=20` and `@angular/common >=20` as peers. The floor moves once CI tests the older versions.
+- Angular 13, 14, 16 and 18 are in the peer range but not run in CI.
+- The `application` (esbuild) builder of Angular 17 to 19 was not built against; it resolves the signal primitives like Vite.
+- `@pangular-inspector/devtools/http` needs Angular 19.0. Reading `REQUEST` and `provideEnvironmentInitializer` without a named import would let it build from 15.0 (`withInterceptors`).
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index 0b9175f3..46d8463e 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -52,6 +52,49 @@
"./vite": "./dist/vite.mjs"
}
},
+ "typesVersions": {
+ "*": {
+ "devframe": [
+ "./dist/devframe.d.mts"
+ ],
+ "config": [
+ "./dist/config.d.mts"
+ ],
+ "cd-data": [
+ "./dist/cd-data.d.mts"
+ ],
+ "overlay": [
+ "./dist/overlay.d.mts"
+ ],
+ "overlay-manual": [
+ "./dist/overlay-manual.d.mts"
+ ],
+ "capacitor-hook": [
+ "./dist/capacitor-hook.d.mts"
+ ],
+ "overlay-angular-native": [
+ "./dist/overlay-angular-native.d.mts"
+ ],
+ "popup": [
+ "./dist/popup.d.mts"
+ ],
+ "overlay-nativescript": [
+ "./dist/overlay-nativescript.d.mts"
+ ],
+ "cli": [
+ "./dist/cli.d.mts"
+ ],
+ "http": [
+ "./dist/http.d.mts"
+ ],
+ "hub": [
+ "./dist/hub.d.mts"
+ ],
+ "vite": [
+ "./dist/vite.d.mts"
+ ]
+ }
+ },
"scripts": {
"build": "tsdown && vite build --config ../../app/vite.config.ts --outDir ../packages/devtools/dist/public --emptyOutDir",
"prepack": "pnpm build"
@@ -96,8 +139,8 @@
},
"peerDependencies": {
"@nativescript/core": ">=8",
- "@angular/common": ">=20",
- "@angular/core": ">=20",
+ "@angular/common": ">=12.2",
+ "@angular/core": ">=12.2",
"rxjs": ">=7",
"vite": ">=5"
},
diff --git a/packages/devtools/src/__tests__/analog-load-inherit.test.ts b/packages/devtools/src/__tests__/analog-load-inherit.test.ts
index 4ef2f292..eb418cae 100644
--- a/packages/devtools/src/__tests__/analog-load-inherit.test.ts
+++ b/packages/devtools/src/__tests__/analog-load-inherit.test.ts
@@ -2,15 +2,15 @@
import '@angular/compiler';
import { Component } from '@angular/core';
import { TestBed } from '@angular/core/testing';
-import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing';
import { Router, RouterOutlet, provideRouter, type Route, type Routes } from '@angular/router';
import { describe, expect, it } from 'vitest';
import { ANALOG_META_DESCRIPTION, chainOf, collectAnalog } from '../analog-runtime.ts';
import { scanAnalog } from '../rpc/analog-scan.ts';
import { resolveAnalogReport } from '../rpc/analog-tools.ts';
import { BASE_FILES, makeProject } from './analog-fixture.ts';
+import { initAngularTestBed } from './angular-version.ts';
-TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting());
+initAngularTestBed();
const META = Symbol(ANALOG_META_DESCRIPTION);
diff --git a/packages/devtools/src/__tests__/angular-real-app.test.ts b/packages/devtools/src/__tests__/angular-real-app.test.ts
new file mode 100644
index 00000000..1956a87c
--- /dev/null
+++ b/packages/devtools/src/__tests__/angular-real-app.test.ts
@@ -0,0 +1,265 @@
+// @vitest-environment jsdom
+// A small real app on whichever Angular is installed (the compat workflow runs
+// this file on 12.2, 15.2, 17.3, 19.2, 20.0, 21 and 22): an NgModule app before
+// 14.0, which has no standalone components, and a standalone app from 14.0. It
+// checks that the page reports the debug API docs/angular-compat.md lists for
+// that version, and that each collector gives data or its documented fallback.
+import '@angular/compiler';
+import * as core from '@angular/core';
+import {
+ Component,
+ Directive,
+ Injectable,
+ NgModule,
+ Pipe,
+ type ApplicationRef,
+} from '@angular/core';
+import { APP_BASE_HREF, CommonModule } from '@angular/common';
+import { BrowserModule, platformBrowser } from '@angular/platform-browser';
+import * as browser from '@angular/platform-browser';
+import { RouterModule, type Routes } from '@angular/router';
+import { afterAll, beforeAll, describe, expect, it } from 'vitest';
+import { addProfilerListener } from '../change-detection.ts';
+import { collectComponentTree, selectedComponentDetail } from '../component-tree.ts';
+import { ANGULAR_FEATURE_NEEDS, angularVersionAtLeast, type AngularCapability } from '../config.ts';
+import { createDeferTracker } from '../defer-blocks.ts';
+import { elementId } from '../element-id.ts';
+import { createForTracker } from '../for-blocks.ts';
+import { collectInjectorTree } from '../injector-tree.ts';
+import { detectAngular } from '../ng-capabilities.ts';
+import { scanPipeViews } from '../pipes-runtime.ts';
+import { findRouters, snapshotRouter, type RouterDebugApi } from '../router.ts';
+import { collectSignalGraph } from '../signal-graph.ts';
+import { angularAtLeast, STANDALONE, zonelessProviders } from './angular-version.ts';
+import { NG_UTILS, ngUtilsOf } from './ng-shapes.ts';
+
+const version = core.VERSION.full;
+const minor = `${core.VERSION.major}.${core.VERSION.minor}`;
+const standalone = angularAtLeast('14.0');
+
+class TripService {
+ readonly trips = ['lisbon', 'porto'];
+}
+Injectable({ providedIn: 'root' })(TripService);
+
+class TripTitlePipe {
+ transform(value: string): string {
+ return value.toUpperCase();
+ }
+}
+Pipe({ ...STANDALONE, name: 'tripTitle' })(TripTitlePipe);
+
+class Tooltip {}
+Directive({ ...STANDALONE, selector: '[appTooltip]' })(Tooltip);
+
+const signal = (core as unknown as { signal?: {{ seats() }} seats
', +})(TripCard); + +class TripsPage {} +Component({ ...STANDALONE, selector: 'app-trips', template: 'Trips
' })(TripsPage); + +const routes: Routes = [ + { path: '', pathMatch: 'full', redirectTo: 'trips' }, + { path: 'trips', component: TripsPage }, +]; + +class App { + title = 'Trips'; + // An injected service, so the injector tree has a dependency to list. + constructor(readonly trips: TripService) {} +} +Component({ + ...STANDALONE, + selector: 'app-root', + ...(standalone ? { imports: [CommonModule, RouterModule, TripCard, Tooltip] } : {}), + template: ` +{{ count() }} trips
' })(TripCounter); +Component({ ...STANDALONE, selector: 'app-root', template: '{{ count() }} trips
' })( + TripCounter, +); const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms)); const ngOf = () => (globalThis as { ng?: unknown }).ng; describe('watchChangeDetection with a real app', () => { - let app: ApplicationRef | null = null; + let app: BootedApp | null = null; let stop: (() => void) | null = null; afterEach(() => { stop?.(); @@ -33,11 +34,9 @@ describe('watchChangeDetection with a real app', () => { async function boot() { document.body.innerHTML = '{{ a() | currency }}
{{ b() | currency }}
`, @@ -63,21 +74,21 @@ class JoinPipe implements PipeTransform { return value.join(','); } } -Pipe({ name: 'join' })(JoinPipe); +Pipe({ ...STANDALONE, name: 'join' })(JoinPipe); class KeysPipe implements PipeTransform { transform(value: Map{{ value() | explode }}
`, @@ -100,9 +112,12 @@ class Receipts { rows = Array.from({ length: 12 }, (_, i) => i); } Component({ + ...STANDALONE, selector: 'app-receipts', - imports: [Receipt], - template: `@for (row of rows; track row) {{{ shared$ | async }}
{{ shared$ | async }}
{{ solo$ | async }}
`, @@ -292,10 +309,11 @@ describe('pipes collector', () => { it('flags a pure pipe fed a mutated-in-place argument (experimental stale check)', async () => { class ListView { - items = signal{{ items() | join }}
`, @@ -363,10 +382,11 @@ describe('pipes collector', () => { it('does not run the stale check while not instrumented', async () => { class ListView { - items = signal{{ items() | join }}
`, @@ -394,10 +414,11 @@ describe('pipes collector', () => { it('keeps a stale finding, with its first detection time, until the argument changes', async () => { class ListView { - items = signal{{ items() | join }}
`, @@ -444,7 +465,16 @@ describe('pipes collector', () => { }); it('walks the whole DOM once, then only again when it changes', async () => { - await mount(Receipt); + class Extra { + label = 'late'; + } + Component({ + ...STANDALONE, + selector: 'app-extra', + imports: [UpperCasePipe], + template: `{{ label | uppercase }}`, + })(Extra); + await mount(Receipt, [Extra]); const h = harness(); const spy = vi.spyOn(document, 'querySelectorAll'); const fullScans = () => spy.mock.calls.filter(([selector]) => selector === '*').length; @@ -456,14 +486,6 @@ describe('pipes collector', () => { await Promise.resolve(); expect(fullScans()).toBe(1); - class Extra { - label = 'late'; - } - Component({ - selector: 'app-extra', - imports: [UpperCasePipe], - template: `{{ label | uppercase }}`, - })(Extra); await mount(Extra); await new Promise((resolve) => setTimeout(resolve)); h.collector.resume(); @@ -480,13 +502,17 @@ describe('pipes collector', () => { it('picks up a text-only view that appears later without walking the whole DOM', async () => { class Toggle { - show = signal(false); + show = writableSignal(false); label = 'late'; } Component({ + ...STANDALONE, selector: 'app-toggle', - imports: [UpperCasePipe], - template: `@if (show()) {{{ label | uppercase }}}
`, + imports: [UpperCasePipe, ...(controlFlow ? [] : [NgIf])], + // A text-only view: an @if block from 17.0, an *ngIf container before. + template: controlFlow + ? `@if (show()) {{{ label | uppercase }}}
` + : `{{ total | currency }}
`, @@ -535,6 +562,7 @@ describe('pipes collector', () => { source$: BehaviorSubject{{ source$ | async }}
`, @@ -556,6 +584,7 @@ describe('pipes collector', () => { header$ = new BehaviorSubject(`Bearer ${jwt}`); } Component({ + ...STANDALONE, selector: 'app-session', imports: [AsyncPipe], template: `{{ (session$ | async)?.user }}
{{ header$ | async }}
`, @@ -576,6 +605,7 @@ describe('pipes collector', () => { token$ = new BehaviorSubject(`token ${jwt}`); } Component({ + ...STANDALONE, selector: 'app-long-token', imports: [AsyncPipe], template: `{{ token$ | async }}
`, @@ -593,9 +623,10 @@ describe('pipes collector', () => { it('redacts instrumented inputs and outputs, including configured secret names', async () => { setRedaction({ secretNames: ['voucher'] }); class Checkout { - form = signal({ email: 'ada@example.com', password: 'hunter2', voucher: 'ABC123' }); + form = writableSignal({ email: 'ada@example.com', password: 'hunter2', voucher: 'ABC123' }); } Component({ + ...STANDALONE, selector: 'app-checkout', imports: [JsonPipe], template: `{{ form() | json }}`,
@@ -675,10 +706,11 @@ describe('pipes collector', () => {
it('starts each recording with a fresh stale baseline', async () => {
class ListView {
- items = signal{{ items() | join }}
`, @@ -698,9 +730,10 @@ describe('pipes collector', () => { it('flags a Date mutated in place and shown with the real DatePipe', async () => { class When { when = new Date(2020, 0, 1); - cdr = inject(ChangeDetectorRef); + cdr = injectHere(ChangeDetectorRef); } Component({ + ...STANDALONE, selector: 'app-when', imports: [DatePipe], template: `{{ when | date: 'yyyy' }}
`, @@ -730,9 +763,10 @@ describe('pipes collector', () => { ])('flags a %s mutated in place', async (_kind, create, mutate) => { class Bag { bag = create(); - cdr = inject(ChangeDetectorRef); + cdr = injectHere(ChangeDetectorRef); } Component({ + ...STANDALONE, selector: `app-bag-${_kind.toLowerCase()}`, imports: [KeysPipe], template: `{{ bag | keys }}
`, @@ -750,10 +784,11 @@ describe('pipes collector', () => { it('does not flag a pipe that reran because another argument changed', async () => { class Search { items = ['apple', 'banana']; - term = signal('a'); - cdr = inject(ChangeDetectorRef); + term = writableSignal('a'); + cdr = injectHere(ChangeDetectorRef); } Component({ + ...STANDALONE, selector: 'app-search', imports: [FilterPipe], template: `{{ items | filter: term() }}
`, @@ -773,10 +808,11 @@ describe('pipes collector', () => { it('clears a stale finding once the pipe reruns', async () => { class Search { items = ['apple', 'banana']; - term = signal('a'); - cdr = inject(ChangeDetectorRef); + term = writableSignal('a'); + cdr = injectHere(ChangeDetectorRef); } Component({ + ...STANDALONE, selector: 'app-search2', imports: [FilterPipe], template: `{{ items | filter: term() }}
`, @@ -800,7 +836,7 @@ describe('pipes collector', () => { const cached = of('cached'); class Feed { stable$ = new BehaviorSubject('stable'); - cdr = inject(ChangeDetectorRef); + cdr = injectHere(ChangeDetectorRef); getData(): Observable{{ getData() | async }}
{{ getCached() | async }}
{{ stable$ | async }}
`, @@ -837,9 +874,10 @@ describe('pipes collector', () => { it('does not mark an async pipe whose source changed once', async () => { class Feed { source$ = new BehaviorSubject('one'); - cdr = inject(ChangeDetectorRef); + cdr = injectHere(ChangeDetectorRef); } Component({ + ...STANDALONE, selector: 'app-switch', imports: [AsyncPipe], template: `{{ source$ | async }}
`, diff --git a/packages/devtools/src/__tests__/pipes-runtime.test.ts b/packages/devtools/src/__tests__/pipes-runtime.test.ts index 6d6f97ef..ceb5c49c 100644 --- a/packages/devtools/src/__tests__/pipes-runtime.test.ts +++ b/packages/devtools/src/__tests__/pipes-runtime.test.ts @@ -1,9 +1,8 @@ // @vitest-environment jsdom import '@angular/compiler'; -import { Component, Pipe, TemplateRef, signal } from '@angular/core'; +import { Component, Pipe, TemplateRef } from '@angular/core'; import { TestBed } from '@angular/core/testing'; -import { CurrencyPipe, NgTemplateOutlet, UpperCasePipe } from '@angular/common'; -import { BrowserTestingModule, platformBrowserTesting } from '@angular/platform-browser/testing'; +import { CurrencyPipe, NgForOf, NgIf, NgTemplateOutlet, UpperCasePipe } from '@angular/common'; import { afterEach, describe, expect, it } from 'vitest'; import { findPipeUsages, @@ -14,12 +13,15 @@ import { staleCheckFor, type PipeCall, } from '../pipes-runtime.ts'; +import { + controlFlow, + initAngularTestBed, + testModuleFor, + writableSignal, + STANDALONE, +} from './angular-version.ts'; -try { - TestBed.initTestEnvironment(BrowserTestingModule, platformBrowserTesting()); -} catch { - // already initialized in this worker -} +initAngularTestBed(); afterEach(() => { TestBed.resetTestingModule(); @@ -27,6 +29,8 @@ afterEach(() => { }); async function mount{{ amount | currency }}
{{ name | uppercase }}
`, @@ -100,9 +105,10 @@ describe('pipe runtime discovery (real Angular render)', () => { }); class Cart { - items = signal{{ value | uppercase }}
`, @@ -162,17 +169,21 @@ describe('stale pure-pipe check (experimental, real Angular render)', () => { }); class Badge {} -Component({ selector: 'app-badge', template: `badge` })(Badge); +Component({ ...STANDALONE, selector: 'app-badge', template: `badge` })(Badge); class Board { - show = signal(true); - items = signal(['x', 'y']); + show = writableSignal(true); + items = writableSignal(['x', 'y']); title = 'board'; } Component({ + ...STANDALONE, selector: 'app-board', - imports: [Badge, UpperCasePipe], - template: `{{ a() | shout }}
{{ b() | shout }}
`, @@ -196,19 +208,21 @@ class _Frame { tpl: TemplateRef