santoshyadavdev · abiramcodes · Sep 28, 2026 · coderabbitai · Sep 28, 2026 · coderabbitai
diff --git a/app/src/pages/component-tree.ts b/app/src/pages/component-tree.ts
@@ -16,6 +16,8 @@ interface ComponentInfo {
   inputs: string[];
   outputs: string[];
   isStandalone: boolean;
+  changeDetection?: 'OnPush' | 'Eager' | 'unknown';
+  changeDetectionDeclared?: 'OnPush' | 'Eager' | 'Default';
 }
 
 interface OutletInfo {
@@ -96,6 +98,19 @@ interface ProviderEntry {
                     }
                   </ul>
                 }
+                @if (comp.changeDetection) {
+                  <h4>Change detection</h4>
+                  <p class="cd-row">
+                    <span
+                      class="prop-chip cd-chip"
+                      [class.cd-onpush]="comp.changeDetection === 'OnPush'"
+                      [class.cd-eager]="comp.changeDetection === 'Eager'"
+                      [class.cd-unknown]="comp.changeDetection === 'unknown'"
+                      >{{ comp.changeDetection }}</span
+                    >
+                    <span class="cd-note">{{ changeDetectionNote(comp) }}</span>
+                  </p>
+                }
                 @if (selectedProviders().length) {
                   <h4>Injected Providers</h4>
                   <ul class="provider-list" role="list">
@@ -235,6 +250,31 @@ interface ProviderEntry {
       background: #3b1d1d;
       color: #fca5a5;
     }
+    .cd-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin: 0 0 12px;
+    }
+    .cd-chip {
+      margin: 0;
+    }
+    .cd-onpush {
+      background: #14532d;
+      color: #bbf7d0;
+    }
+    .cd-eager {
+      background: #3f3f46;
+      color: #d4d4d8;
+    }
+    .cd-unknown {
+      background: #3f3f46;
+      color: #71717a;
+    }
+    .cd-note {
+      font-size: 12px;
+      color: #71717a;
+    }
     dl {
       display: grid;
       grid-template-columns: auto 1fr;
@@ -411,6 +451,17 @@ export class ComponentTree {
     return this.formOwners().filter((form) => form.file === file);
   }
 
+  changeDetectionNote(comp: ComponentInfo): string {
+    if (comp.changeDetection === 'unknown') {
+      return comp.changeDetectionDeclared
+        ? 'Set via an expression the scan cannot resolve'
+        : 'Angular version not detected';
+    }
-    if (comp.changeDetection === 'unknown') {
-      return comp.changeDetectionDeclared
-        ? 'Set via an expression the scan cannot resolve'
-        : 'Angular version not detected';
-    }
+    if (comp.changeDetection === 'unknown') {
+      return comp.changeDetectionUnresolved
+        ? 'Set via an expression the scan cannot resolve'
+        : 'Angular version not detected';
+    }
-    if (comp.changeDetection === 'unknown') {
-      return comp.changeDetectionDeclared
-        ? 'Set via an expression the scan cannot resolve'
-        : 'Angular version not detected';
-    }
+    if (comp.changeDetection === 'unknown') {
+      return comp.changeDetectionUnresolved
+        ? 'Set via an expression the scan cannot resolve'
+        : 'Angular version not detected';
+    }
+    if (comp.changeDetectionDeclared === 'Default') return 'Declared as Default, alias of Eager';
+    if (comp.changeDetectionDeclared) return 'Declared explicitly';
+    return 'Implicit default';
+  }
+
   isSelected(comp: ComponentInfo): boolean {
     return this.selected()?.selector === comp.selector;
   }

diff --git a/...ts/browser-agent-rpc-BXhoSh1z-D1NJaqR8.js → ...ts/browser-agent-rpc-BXhoSh1z-Dd6Eedf_.js b/...ts/browser-agent-rpc-BXhoSh1z-D1NJaqR8.js → ...ts/browser-agent-rpc-BXhoSh1z-Dd6Eedf_.js
diff --git a/extension/ui/assets/index-TNlU-6c2.js → extension/ui/assets/index-ByEDlaDR.js b/extension/ui/assets/index-TNlU-6c2.js → extension/ui/assets/index-ByEDlaDR.js
diff --git a/extension/ui/index.html b/extension/ui/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Angular DevTools</title>
     <style>*,:before,:after{box-sizing:border-box;margin:0}:root{--accent:#ff6b85}body{color:#e4e4e7;background:#0f0f11;font-family:system-ui,-apple-system,sans-serif}</style>
-    <script type="module" crossorigin src="./assets/index-TNlU-6c2.js"></script>
+    <script type="module" crossorigin src="./assets/index-ByEDlaDR.js"></script>
   </head>
   <body>
     <app-root></app-root>

diff --git a/packages/ng-devtools/src/rpc/__tests__/angular-version.test.ts b/packages/ng-devtools/src/rpc/__tests__/angular-version.test.ts
@@ -0,0 +1,64 @@
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import { describe, expect, it } from 'vitest';
+import { fixtureDir } from './fixture-dir.ts';
+import { angularMajor } from '../angular-version.ts';
+
+describe('angularMajor', () => {
+  it('reads the major from the installed package', () => {
+    const dir = fixtureDir('ng-devtools-version-');
+    const coreDir = join(dir, 'node_modules', '@angular', 'core');
+    mkdirSync(coreDir, { recursive: true });
+    writeFileSync(join(coreDir, 'package.json'), JSON.stringify({ version: '22.1.7' }));
+    expect(angularMajor(dir)).toBe(22);
+  });
+
+  it('prefers the installed version over the declared range', () => {
+    const dir = fixtureDir('ng-devtools-version-');
+    const coreDir = join(dir, 'node_modules', '@angular', 'core');
+    mkdirSync(coreDir, { recursive: true });
+    writeFileSync(join(coreDir, 'package.json'), JSON.stringify({ version: '22.1.7' }));
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({ dependencies: { '@angular/core': '^20.0.0' } }),
+    );
+    expect(angularMajor(dir)).toBe(22);
+  });
+
+  it('falls back to a pinned or ^/~ range in package.json', () => {
+    const dir = fixtureDir('ng-devtools-version-');
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({ dependencies: { '@angular/core': '^21.0.0' } }),
+    );
+    expect(angularMajor(dir)).toBe(21);
+
+    const dir2 = fixtureDir('ng-devtools-version-');
+    writeFileSync(
+      join(dir2, 'package.json'),
+      JSON.stringify({ devDependencies: { '@angular/core': '~21.1.0' } }),
+    );
+    expect(angularMajor(dir2)).toBe(21);
+  });
+
+  it('gives up on a range that names no single version', () => {
+    const dir = fixtureDir('ng-devtools-version-');
+    writeFileSync(
+      join(dir, 'package.json'),
+      JSON.stringify({ dependencies: { '@angular/core': '>=20.0.0' } }),
+    );
+    expect(angularMajor(dir)).toBeUndefined();
+
+    const dir2 = fixtureDir('ng-devtools-version-');
+    writeFileSync(
+      join(dir2, 'package.json'),
+      JSON.stringify({ dependencies: { '@angular/core': 'latest' } }),
+    );
+    expect(angularMajor(dir2)).toBeUndefined();
+  });
+
+  it('returns undefined when nothing names a version at all', () => {
+    const dir = fixtureDir('ng-devtools-version-');
+    expect(angularMajor(dir)).toBeUndefined();
+  });
+});
diff --git a/packages/ng-devtools/src/rpc/__tests__/get-components.test.ts b/packages/ng-devtools/src/rpc/__tests__/get-components.test.ts
@@ -5,10 +5,15 @@ import { scan } from './scan.ts';
 import { describe, expect, it } from 'vitest';
 import { getComponents } from '../get-components.ts';
 
-async function componentsFor(source: string) {
+async function componentsFor(source: string, angularVersion?: string) {
   const dir = fixtureDir('ng-devtools-components-');
   mkdirSync(join(dir, 'src'));
   writeFileSync(join(dir, 'src', 'widgets.ts'), source);
+  if (angularVersion) {
+    const coreDir = join(dir, 'node_modules', '@angular', 'core');
+    mkdirSync(coreDir, { recursive: true });
+    writeFileSync(join(coreDir, 'package.json'), JSON.stringify({ version: angularVersion }));
+  }
   return scan(getComponents, dir);
 }
 
@@ -106,4 +111,94 @@ describe('get-components', () => {
     expect(component.inputs).toEqual(['name']);
     expect(component.outputs).toEqual(['saved']);
   });
+
+  describe('change detection', () => {
+    it('reads an explicit OnPush, however it is spelled', async () => {
+      const source = `
+        @Component({ selector: 'app-a', changeDetection: ChangeDetectionStrategy.OnPush })
+        export class A {}
+        @Component({ selector: 'app-b', changeDetection: CDS.OnPush })
+        export class B {}
+        @Component({ selector: 'app-c', changeDetection: 0 })
+        export class C {}
+      `;
+      const components = await componentsFor(source);
+      for (const c of components) {
+        expect(c.changeDetection).toBe('OnPush');
+        expect(c.changeDetectionDeclared).toBe('OnPush');
+      }
+    });
+
+    it('reads an explicit Eager, the v22+ name for the old default', async () => {
+      const [component] = await componentsFor(`
+        @Component({ selector: 'app-a', changeDetection: ChangeDetectionStrategy.Eager })
+        export class A {}
+      `);
+      expect(component.changeDetection).toBe('Eager');
+      expect(component.changeDetectionDeclared).toBe('Eager');
+    });
+
+    it('reads an explicit Default (<=v21 spelling, or the deprecated v22+ alias) as Eager', async () => {
+      const sources = [
+        `@Component({ selector: 'app-a', changeDetection: ChangeDetectionStrategy.Default }) export class A {}`,
+        `@Component({ selector: 'app-a', changeDetection: 1 }) export class A {}`,
+      ];
+      for (const source of sources) {
+        const [component] = await componentsFor(source);
+        expect(component.changeDetection).toBe('Eager');
+        expect(component.changeDetectionDeclared).toBe('Default');
+      }
+    });
+
+    it('resolves an implicit strategy from the installed Angular version', async () => {
+      const source = `@Component({ selector: 'app-a' }) export class A {}`;
+      const [onV22] = await componentsFor(source, '22.1.0');
+      expect(onV22.changeDetection).toBe('OnPush');
+      expect(onV22.changeDetectionDeclared).toBeUndefined();
+
+      const [onV21] = await componentsFor(source, '21.0.0');
+      expect(onV21.changeDetection).toBe('Eager');
+      expect(onV21.changeDetectionDeclared).toBeUndefined();
+    });
+
+    it('reports unknown when the version cannot be resolved', async () => {
+      const [component] = await componentsFor(
+        `@Component({ selector: 'app-a' }) export class A {}`,
+      );
+      expect(component.changeDetection).toBe('unknown');
+    });
+
+    it('reports unknown for a value the scan cannot resolve, without guessing', async () => {
+      const [component] = await componentsFor(
+        `@Component({ selector: 'app-a', changeDetection: someHelper() }) export class A {}`,
+        '22.1.0',
+      );
+      expect(component.changeDetection).toBe('unknown');
+      expect(component.changeDetectionDeclared).toBeUndefined();
+    });
+
+    it('ignores a changeDetection key quoted inside a template', async () => {
+      const [component] = await componentsFor(
+        `
+        @Component({
+          selector: 'app-a',
+          template: \`<pre>changeDetection: ChangeDetectionStrategy.Eager</pre>\`,
+        })
+        export class A {}
+      `,
+        '22.1.0',
+      );
+      expect(component.changeDetection).toBe('OnPush');
+      expect(component.changeDetectionDeclared).toBeUndefined();
+    });
+
+    it('gives a directive no change detection field', async () => {
+      const [directive] = await componentsFor(
+        `@Directive({ selector: '[appA]' }) export class A {}`,
+        '22.1.0',
+      );
+      expect(directive.changeDetection).toBeUndefined();
+      expect(directive.changeDetectionDeclared).toBeUndefined();
+    });
+  });
 });
diff --git a/packages/ng-devtools/src/rpc/angular-version.ts b/packages/ng-devtools/src/rpc/angular-version.ts
@@ -0,0 +1,47 @@
+import { existsSync, readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+/**
+ * The major version of `@angular/core` the project builds against, or
+ * `undefined` when it cannot be told apart from the workspace root.
+ *
+ * Angular 22 made `OnPush` the implicit change detection strategy, so a
+ * component without a `changeDetection` key means something different
+ * depending on which major the project is on; this resolves that once per
+ * scan rather than per file.
+ *
+ * Only one version is resolved for the whole workspace root, so a monorepo
+ * that mixes Angular majors across packages is not distinguished per package.
+ */
+export function angularMajor(cwd: string): number | undefined {
+  const installed = readJson(join(cwd, 'node_modules', '@angular', 'core', 'package.json'))[
+    'version'
+  ];
+  if (typeof installed === 'string') {
+    const major = majorOf(installed);
+    if (major !== undefined) return major;
+  }
+
+  const pkg = readJson(join(cwd, 'package.json'));
+  const deps = { ...pkg['dependencies'], ...pkg['devDependencies'] };
+  const range = deps['@angular/core'];
+  // Only a pinned or `^`/`~` range names one version; `>=20`, `latest`,
+  // `workspace:*` and the like could resolve to anything and are left alone
+  // rather than guessed at.
+  if (typeof range === 'string') return majorOf(range.replace(/^[\^~]/, ''));
+  return undefined;
+}
+
+function majorOf(version: string): number | undefined {
+  const match = /^(\d+)\./.exec(version);
+  return match ? Number(match[1]) : undefined;
+}
+
+function readJson(path: string): Record<string, any> {
+  try {
+    if (!existsSync(path)) return {};
+    return JSON.parse(readFileSync(path, 'utf-8'));
+  } catch {
+    return {};
+  }
+}
-function readJson(path: string): Record<string, any> {
-  try {
-    if (!existsSync(path)) return {};
-    return JSON.parse(readFileSync(path, 'utf-8'));
-  } catch {
-    return {};
-  }
-}
+function readJson(path: string): Record<string, unknown> {
+  try {
+    if (!existsSync(path)) return {};
+    const parsed: unknown = JSON.parse(readFileSync(path, 'utf-8'));
+    return parsed && typeof parsed === 'object'
+      ? (parsed as Record<string, unknown>)
+      : {};
+  } catch {
+    return {};
+  }
+}
-function readJson(path: string): Record<string, any> {
-  try {
-    if (!existsSync(path)) return {};
-    return JSON.parse(readFileSync(path, 'utf-8'));
-  } catch {
-    return {};
-  }
-}
+function readJson(path: string): Record<string, unknown> {
+  try {
+    if (!existsSync(path)) return {};
+    const parsed: unknown = JSON.parse(readFileSync(path, 'utf-8'));
+    return parsed && typeof parsed === 'object'
+      ? (parsed as Record<string, unknown>)
+      : {};
+  } catch {
+    return {};
+  }
+}