Skip to content

fix(elements): resolve environment injector for custom elements - #70454

Open
surajy93 wants to merge 1 commit into
angular:mainfrom
surajy93:fix-70452-devtools-elements-recursion
Open

fix(elements): resolve environment injector for custom elements#70454
surajy93 wants to merge 1 commit into
angular:mainfrom
surajy93:fix-70452-devtools-elements-recursion

Conversation

@surajy93

Copy link
Copy Markdown
Contributor

Resolve the correct EnvironmentInjector from the provided injector in ComponentNgElementStrategy instead of casting a NodeInjector directly. This prevents a malformed injector hierarchy which causes infinite loop recursion when Angular DevTools resolves the injector resolution path.

Also, add a defensive check in getModuleInjectorOfNodeInjector to ensure we don't cycle when a NodeInjector is configured as the parent of an R3Injector.

Fixes #70452

@pullapprove
pullapprove Bot requested a review from crisbeto August 28, 2026 13:41
@angular-robot angular-robot Bot added the area: elements Issues related to Angular Elements label Aug 28, 2026
@ngbot ngbot Bot added this to the Backlog milestone Aug 28, 2026
Comment thread packages/core/test/acceptance/injector_profiler_spec.ts Outdated
@surajy93
surajy93 force-pushed the fix-70452-devtools-elements-recursion branch from 7150d13 to ce35cce Compare August 28, 2026 13:49
Comment thread packages/elements/src/component-factory-strategy.ts Outdated
@surajy93
surajy93 force-pushed the fix-70452-devtools-elements-recursion branch from ce35cce to 4e73a95 Compare August 28, 2026 14:21
@surajy93
surajy93 requested a review from JeanMeche August 28, 2026 14:33

@JeanMeche JeanMeche left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AGENT: Thanks for this fix. I've left an inline suggestion because the current implementation accidentally introduces a dependency injection regression for custom elements created with a NodeInjector. Please review the suggested change.

const environmentInjector =
this.injector instanceof EnvironmentInjector
? this.injector
: this.injector.get(EnvironmentInjector);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AGENT: I looked into this, and changing childInjector's parent from this.injector to environmentInjector causes a major regression in dependency injection. If this.injector is a NodeInjector, any custom element created with it will completely lose access to the NodeInjector's provider hierarchy because it's bypassed in favor of the EnvironmentInjector.

The core issue of the DevTools infinite recursion is actually fixed perfectly by your changes in injector_discovery_utils.ts, which now gracefully skips NodeInjectors when walking up the parent chain!

Because of that fix, we can revert childInjector's parent back to this.injector while still correctly setting environmentInjector: environmentInjector in the createComponent options. This satisfies DevTools and preserves DI resolution from the NodeInjector.

Suggested change
: this.injector.get(EnvironmentInjector);
const childInjector = Injector.create({providers: [], parent: this.injector});

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes total sense! I've updated childInjector's parent back to this.injector to preserve the NodeInjector provider hierarchy while keeping the resolved environmentInjector passed to createComponent. Amended and pushed.

@JeanMeche
JeanMeche removed the request for review from crisbeto August 28, 2026 23:15
Resolve the correct EnvironmentInjector from the provided injector in
ComponentNgElementStrategy instead of casting a NodeInjector directly.
This prevents a malformed injector hierarchy which causes infinite loop
recursion when Angular DevTools resolves the injector resolution path.

Also, add a defensive check in getModuleInjectorOfNodeInjector to ensure
we don't cycle when a NodeInjector is configured as the parent of an R3Injector.

Fixes angular#70452
@surajy93
surajy93 force-pushed the fix-70452-devtools-elements-recursion branch from 4e73a95 to c08039a Compare August 29, 2026 05:19
@surajy93
surajy93 requested a review from JeanMeche August 29, 2026 05:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: elements Issues related to Angular Elements

Projects

None yet

Development

Successfully merging this pull request may close these issues.

app/devtools fail with 'RangeError: Maximum call stack size exceeded' when inspecting apps containing angular based custom elements

2 participants