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.
Depending on the client app version, either show "OnPush" (pre-v22) or "Eager" (v22+); As part of the change, `APP_DATA` root signal has been introduced along with a minor bug fix related to component metadata displaying.
Utilize the new `ng.getControlFlowBlocks` API by refactoring the existing render tree extraction code; Slighly modify @for loop details view
PR Close#66167
- Handle @for data in tree strategies and view extraction
- Show @for details in the UI and property tab
- Persist @for state and update UI accordingly
PR Close#66167
Due to the design of the `ng.getComponent` spy and a race condition where sometimes a `<script>` is added to the test DOM, the `getRootElements` tests used to fail sometimes because those `<script>`s were marked as roots which caused a distortion in the roots count checks. The commit addresses that and also adds an additional test for non-application root Angular components.
Add support for `@defer`-only blocks (previously, they weren't rendered in the component tree at all); Fix declared blocks section in the details
PR Close#66546
Do not call `getSupportedApis` in a prod app since it throws an error due to the absence of `ng`, which prevents the FE from getting the `ngAvailability` message and, respectively, the proper info screen that DevTools cannot be used on a prod app.
When signals throw errors on read, the devtools will show the same error message as the signal custom formatter.
We also don't log errors anymore to the console as those might be surprising to see as errors and are buggy behavior of the devtools.
Show the signal graph button only when a signal-graph-eligible node from the directive explorer is selected; Fix client app error when a `defer` node is selected (related)
Replace URL-based active route detection with direct traversal of the ActivatedRoute tree.
This solution is more reliable than the previous approach because it directly compares router tree configuration objects against the active router instance state with router.routerState.
Previously we would look in the DI tree for a token named 'Router' and resolve its value.
Now we use the already existing getRouterInstance, which depends on ng global debug APIs to get the router instance of an application.
Previously '/' could cause confusion with other routes that use a path here. I think because this node is unique in that it is not actually a "Route" we should make it clear with the label that is simply the App Root.
Adding some typing to infer the expected types and drop the usages of `arguments` which isn't really typesafe.
The argument mis-match didn't result in an issue because they didn't end up being used futher down the line.
fix 63973
PR Close#64260
Previously this would take ~3500ms adev.
This updated logic avoids the constant JSON.stringify implementation and instead checks for serializable values directly.
After this change this code path for adev takes less than 20ms.
(Benchmarks taken on an M1 Macbook Pro)
PR Close#64234
Stop multiple component tree traversals if the app root is the body tag. This caused the devtools ui to duplicate the component information, if the app root was the body tag
PR Close#64161
This commit updates the TypeScript configuration across the project to use `moduleResolution: "bundler"`. This modernizes our module resolution strategy to align with current TypeScript best practices and bundler behaviors.
The following changes are included:
- Updated `tsconfig.json` files to set `moduleResolution` to `"bundler"`.
- Updated the `rules_angular` bazel dependency to a version compatible with these changes.
- Adjusted related test files and golden files to reflect the new module resolution strategy.
PR Close#64125
Some properties (like gets) might throw when we try to read them.
With this commit we fail gracefuly and show a warning message for the property that can't be read.
fixes#56755
PR Close#64096
Addresses some cleanup items for the router tree:
- No longer loads router ng global APIs as a side effect of importing the router. Rather this is now a runtime step that occurs when provideRouter is called.
- No longer depends on router.navigateByUrl in Angular DevTools. There is now a dedicated global util for this
- Router instance logic no longer depends on token name
- Prevents navigating to lazy or redirect routes (these don't have an associated component)
PR Close#63081
Change direct deps in bazel targets and import specifiers within files to maintain strict deps requirements ahead of enabling strict deps tests in the repo
PR Close#63323
Add "Show graph" button to the signal properties in the side pane only for Angular apps. This required storing the signal graph in a separate service.
PR Close#62853
Previously, Angular devtools would mistakenly traverse the same DOM elements multiple times while doing traversal for the component tree explorer. This error case would occur when more than 1 Angular application root component was present on the same page and in distinct DOM branches.
Some example cases that did work previously:
```html
<app-root>
...
</app-root>
```
```html
<app-root>
...
<app-root-2></app-root-2>
...
</app-root>
```
An example of where it would enter the irregular behaviour
```html
<app-root>
...
</app-root>
<app-root-2>
...
</app-root-2>
```
Now, we properly ignore duplicate DOM paths when looking for application and non-application root component to begin the Angular DevTools component discovery logic.
PR Close#62719
Add transfer state tab, which is taking transfer state script by using APP_ID. Created internal api ɵgetTransferState to retrieve transfer state value from app into devtools app.
PR Close#62465
Use the packaged versions of the packages instead of the local ts_project dependencies to prevent multiple versions of the deps to enter test bundles
PR Close#62413
The serialization of route data does not support cyclic data objects. We sanitize nested route data object by replacing invalid values with a placeholder string.
PR Close#62339
