Skip to content

Add DI graph AI debugging tool#68030

Open
dgp1130 wants to merge 6 commits intoangular:mainfrom
dgp1130:di-graph-tool
Open

Add DI graph AI debugging tool#68030
dgp1130 wants to merge 6 commits intoangular:mainfrom
dgp1130:di-graph-tool

Conversation

@dgp1130
Copy link
Copy Markdown
Contributor

@dgp1130 dgp1130 commented Apr 4, 2026

NOTE FOR REVIEWERS: This PR is dependent on #67985, you can ignore the first 4 commits which will be merged in that PR and rebased here before landing.

This is part of an experiment with chrome-devtools-mcp to expose runtime data about framework internal state such as the dependency injection graph to AI agents and see if it improves debuggability of Angular applications.

Unlike the signal graph tool, I'm far from convinced this is a good output structure for agents to consume. It misses some important edges (notably connecting elements to specific environment injectors) and is likely too much information for an AI to usefully consume. I suspect more targeted tools will be more useful for certain use cases. However, this gives us an initial implementation to experiment with and see what evals best with various agents.

/cc @wolfib

dgp1130 added 6 commits April 1, 2026 17:28
These serve as the type definitions for interacting with the `chrome-devtools-mcp` AI runtime debugging functionality. Eventually this will hopefully be upstreamed to some more authoritative location, but for now this will do.
This provides an `angular:signal_graph` in-page tool which exposes the signal graph from the component rendered for a particular DOM element. It leverages the algorithm defined for Angular DevTools, which essentially means it takes the effects registered on the components injector and walks transitive dependencies to find all signals referenced by the component in an effect or the template.
This will centrally manage all the AI tools supported by Angular out of the box.
This registers AI runtime debugging tools during platform creation and unregisters them when the platform is destroyed. This roughly matches existing usage of global utils with respect to timing. It is limited to dev mode only because these tools are exclusively for debugging Angular's internals and not something production users would leverage.
This walks all transitive descendant directives via the `LView` structure of the given input. This is a generic utility, but useful for finding all components in a tree to look for their associated `Injector` objects.

One known limitation is that this does not cover child components of i18n messages as that was more complicated than I wanted to get into right now.
This creates a new `angular:di-graph` in-page tool which returns the entire dependency injection graph for the application.

We use the following rough algorithm for discovering all element injectors:
1. Find all root `LView` objects by querying for `[ng-version]`.
2. Walk all the transitive `LView` descendants of the roots.
3. Filter these `LView` objects to just directives.
4. Find the injector for a given directive and walk up its ancestors to find all element injectors.

Discovering environment injectors works mostly the same way, just following the environment injector graph instead.

This approach has a few known limitations which are out of scope for the moment:
1. Any given component typically has both an element injector *and* an environment injector. The relationship of "component -> environment injector" is not expressed in the result as of now, meaning the AI doesn't really have any insight into _which_ environment injector is being used for a particular component, though the injector will be one of the returned values.
2. The implementation does not support MFE use cases of multiple applications on the page at the same time.
3. The performance is not ideal, as we walk `LView` descendants twice and walk up the injector tree for every directive, repeatedly covering the same scope (ideally we'd just walk up every *leaf* directive, which would cover the same result for less effort). However for a debug tool, this is likely fine for now and we can optimize later if/when it becomes necessary.

I did consider reusing more of the existing implementation in `global_utils` which exists to support Angular DevTools (we are already using some of it), however the existing support in `@angular/core` is actually fairly limited, returning very primitive data structures and relying on Angular DevTools to do the heavier lifting of collapsing the code into a usable graph representation. There's a potential path in the future to converge these implementations and potentially have `global_utils` use some of this code instead, but I will leave that for a future cleanup effort.
@dgp1130 dgp1130 added action: review The PR is still awaiting reviews from at least one requested reviewer area: core Issues related to the framework runtime target: major This PR is targeted for the next major release core: debug tools labels Apr 4, 2026
@ngbot ngbot bot added this to the Backlog milestone Apr 4, 2026
@pullapprove pullapprove bot requested review from crisbeto April 4, 2026 03:18
@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Apr 4, 2026
milehighxworld-sys

This comment was marked as spam.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

action: review The PR is still awaiting reviews from at least one requested reviewer area: core Issues related to the framework runtime core: debug tools detected: feature PR contains a feature commit target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants