fix(devtools): clean up removed directive entries in IdentityTracker to prevent memory leak

The IdentityTracker singleton never deleted entries from its internal
  maps (_currentDirectiveId, _currentDirectivePosition, isComponent) for
  destroyed directives. This caused the maps to grow monotonically for
  the entire DevTools session, retaining references to destroyed component
  instances and preventing garbage collection.

  The cleanup was intentionally commented out because the profiler needs
  to resolve IDs and positions of removed components during recording.

  Introduce `setProfilingActive()` to gate cleanup: when profiling is
  inactive, removed entries are deleted immediately during `index()`.
  When profiling is active, removals are deferred into a `_pendingRemovals`
  set and flushed once profiling stops via `capture.ts` start/stop calls.

Author: AleksanderBodurri

devtools/projects/ng-devtools-backend/src/lib/hooks/capture.ts

@@ -21,6 +21,7 @@ import {isCustomElement, runOutsideAngular} from '../utils';
 
 import {initializeOrGetDirectiveForestHooks} from '.';
 import {DirectiveForestHooks} from './hooks';
+import {IdentityTracker} from './identity-tracker';
 import {Hooks} from './profiler';
 
 let inProgress = false;
@@ -40,6 +41,7 @@ export const start = (onFrame: (frame: ProfilerFrame) => void): void => {
   }
   eventMap = new Map<any, DirectiveProfile>();
   inProgress = true;
+  IdentityTracker.getInstance().setProfilingActive(true);
   hooks = getHooks(onFrame);
   initializeOrGetDirectiveForestHooks().profiler.subscribe(hooks);
 };
@@ -50,6 +52,7 @@ export const stop = (): ProfilerFrame => {
   initializeOrGetDirectiveForestHooks().profiler.unsubscribe(hooks);
   hooks = {};
   inProgress = false;
+  IdentityTracker.getInstance().setProfilingActive(false);
   return result;
 };
 

devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.spec.ts

@@ -0,0 +1,161 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {IdentityTracker} from './identity-tracker';
+
+describe('IdentityTracker', () => {
+  let tracker: IdentityTracker;
+
+  beforeEach(() => {
+    (IdentityTracker as any)._instance = undefined;
+    tracker = IdentityTracker.getInstance();
+  });
+
+  afterEach(() => {
+    (IdentityTracker as any)._instance = undefined;
+    document.querySelectorAll('[ng-version]').forEach((el) => el.remove());
+  });
+
+  function seedDirective(opts: {dir: object; id: number; isComponent?: boolean}): void {
+    const internal = tracker as any;
+    internal._currentDirectiveId.set(opts.dir, opts.id);
+    internal._currentDirectivePosition.set(opts.dir, [opts.id]);
+    internal.isComponent.set(opts.dir, opts.isComponent ?? false);
+  }
+
+  describe('setProfilingActive', () => {
+    it('removes pending directives from all maps when profiling stops', () => {
+      const dir = {};
+      seedDirective({dir, id: 0, isComponent: true});
+      (tracker as any)._pendingRemovals.add(dir);
+
+      tracker.setProfilingActive(false);
+
+      expect(tracker.hasDirective(dir)).toBeFalse();
+      expect(tracker.getDirectiveId(dir)).toBeUndefined();
+      expect(tracker.getDirectivePosition(dir)).toBeUndefined();
+    });
+
+    it('does not flush pending removals when profiling starts', () => {
+      const dir = {};
+      seedDirective({dir, id: 0, isComponent: true});
+      (tracker as any)._pendingRemovals.add(dir);
+
+      tracker.setProfilingActive(true);
+
+      expect(tracker.hasDirective(dir)).toBeTrue();
+      expect(tracker.getDirectiveId(dir)).toBe(0);
+      expect(tracker.getDirectivePosition(dir)).toEqual([0]);
+    });
+
+    it('clears the pending set after flushing', () => {
+      const dir = {};
+      (tracker as any)._pendingRemovals.add(dir);
+
+      tracker.setProfilingActive(false);
+
+      expect((tracker as any)._pendingRemovals.size).toBe(0);
+    });
+
+    it('handles an empty pending set gracefully', () => {
+      expect(() => tracker.setProfilingActive(false)).not.toThrow();
+    });
+
+    it('flushes multiple pending directives at once', () => {
+      const dirs = [{}, {}, {}];
+      dirs.forEach((dir, i) => {
+        seedDirective({dir, id: i});
+        (tracker as any)._pendingRemovals.add(dir);
+      });
+
+      tracker.setProfilingActive(false);
+
+      dirs.forEach((dir) => {
+        expect(tracker.hasDirective(dir)).toBeFalse();
+      });
+      expect((tracker as any)._pendingRemovals.size).toBe(0);
+    });
+  });
+
+  describe('index() cleanup behavior', () => {
+    it('immediately removes a stale directive from all maps when not profiling', () => {
+      const dir = {};
+      seedDirective({dir, id: 0});
+
+      tracker.index();
+
+      expect(tracker.hasDirective(dir)).toBeFalse();
+      expect(tracker.getDirectiveId(dir)).toBeUndefined();
+      expect(tracker.getDirectivePosition(dir)).toBeUndefined();
+    });
+
+    it('keeps a stale directive in maps during profiling, staging it for deferred cleanup', () => {
+      const dir = {};
+      seedDirective({dir, id: 0});
+
+      tracker.setProfilingActive(true);
+      tracker.index();
+
+      expect(tracker.hasDirective(dir)).toBeTrue();
+      expect(tracker.getDirectiveId(dir)).toBe(0);
+      expect(tracker.getDirectivePosition(dir)).toEqual([0]);
+      expect((tracker as any)._pendingRemovals.has(dir)).toBeTrue();
+    });
+
+    it('removes deferred directives from maps once profiling stops', () => {
+      const dir = {};
+      seedDirective({dir, id: 0});
+
+      tracker.setProfilingActive(true);
+      tracker.index();
+
+      expect(tracker.hasDirective(dir)).toBeTrue();
+
+      tracker.setProfilingActive(false);
+
+      expect(tracker.hasDirective(dir)).toBeFalse();
+    });
+
+    it('includes removed directives in the returned removedNodes regardless of profiling state', () => {
+      const dir = {};
+      seedDirective({dir, id: 0, isComponent: true});
+
+      const {removedNodes} = tracker.index();
+
+      expect(removedNodes.length).toBe(1);
+      expect(removedNodes[0].directive).toBe(dir);
+      expect(removedNodes[0].isComponent).toBeTrue();
+    });
+
+    it('does not add an already-pending directive to removedNodes twice on the next index call', () => {
+      const dir = {};
+      seedDirective({dir, id: 0});
+
+      tracker.setProfilingActive(true);
+      tracker.index();
+
+      const {removedNodes} = tracker.index();
+
+      expect(removedNodes.some((n) => n.directive === dir)).toBeTrue();
+    });
+
+    it('grows maps monotonically during profiling and fully clears on stop', () => {
+      const dirs = [{}, {}, {}];
+      dirs.forEach((dir, i) => seedDirective({dir, id: i}));
+
+      tracker.setProfilingActive(true);
+      tracker.index();
+
+      dirs.forEach((dir) => expect(tracker.hasDirective(dir)).toBeTrue());
+
+      tracker.setProfilingActive(false);
+
+      dirs.forEach((dir) => expect(tracker.hasDirective(dir)).toBeFalse());
+    });
+  });
+});

devtools/projects/ng-devtools-backend/src/lib/hooks/identity-tracker.ts

@@ -34,6 +34,14 @@ export class IdentityTracker {
   private _currentDirectiveId = new Map<any, number>();
   isComponent = new Map<any, boolean>();
 
+  /**
+   * Directives that were removed while profiling was active.
+   * Cleanup is deferred until profiling stops so that the profiler
+   * can still look up IDs / positions of destroyed components.
+   */
+  private _pendingRemovals = new Set<any>();
+  private _isProfiling = false;
+
   // private constructor for Singleton Pattern
   private constructor() {}
 
@@ -56,6 +64,18 @@ export class IdentityTracker {
     return this._currentDirectiveId.has(dir);
   }
 
+  /**
+   * Toggle profiling state. While profiling is active, removed directive
+   * entries are kept so the profiler can still resolve IDs and positions.
+   * When profiling stops, deferred removals are flushed.
+   */
+  setProfilingActive(active: boolean): void {
+    this._isProfiling = active;
+    if (!active) {
+      this._flushPendingRemovals();
+    }
+  }
+
   index(): {
     newNodes: NodeArray;
     removedNodes: NodeArray;
@@ -71,10 +91,11 @@ export class IdentityTracker {
     this._currentDirectiveId.forEach((_: number, dir: any) => {
       if (!allNodes.has(dir)) {
         removedNodes.push({directive: dir, isComponent: !!this.isComponent.get(dir)});
-        // We can't clean these up because during profiling
-        // they might be requested for removed components
-        // this._currentDirectiveId.delete(dir);
-        // this._currentDirectivePosition.delete(dir);
+        if (this._isProfiling) {
+          this._pendingRemovals.add(dir);
+        } else {
+          this._cleanupDirective(dir);
+        }
       }
     });
     return {newNodes, removedNodes, indexedForest, directiveForest};
@@ -110,9 +131,25 @@ export class IdentityTracker {
     }
   }
 
+  private _cleanupDirective(dir: any): void {
+    this._currentDirectiveId.delete(dir);
+    this._currentDirectivePosition.delete(dir);
+    this.isComponent.delete(dir);
+  }
+
+  private _flushPendingRemovals(): void {
+    for (const dir of this._pendingRemovals) {
+      this._cleanupDirective(dir);
+    }
+    this._pendingRemovals.clear();
+  }
+
   destroy(): void {
     this._currentDirectivePosition = new Map<any, ElementPosition>();
     this._currentDirectiveId = new Map<any, number>();
+    this.isComponent = new Map<any, boolean>();
+    this._pendingRemovals.clear();
+    this._isProfiling = false;
   }
 }