Skip to content

feat(common): add support for a custom EnvironmentInjector to NgComponentOutlet directive #54764

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from

Conversation

reey
Copy link
Contributor

@reey reey commented Mar 8, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • angular.io application / infrastructure changes
  • Other... Please describe:

What is the current behavior?

Currently the NgComponentOutlet directive does not provide a way to specify a custom EnvironmentInjector.
For our usecase we are using webpack Module Federation to load a remote module into our shell application. This remote module uses a different EnvironmentInjector, which is a child of the shells EnvironmentInjector. Without being able to specify the EnvironmentInjector of the remote module when creating the component, the component is unable to use dependency injection for e.g. services provided as part of the remote module.
Issue Number: N/A

What is the new behavior?

This PR adds an additional Input to the NgComponentOutlet directive to provide a custom EnvironmentInjector.

Does this PR introduce a breaking change?

  • Yes
  • No

Other information

@angular-robot angular-robot bot added the detected: feature PR contains a feature commit label Mar 8, 2024
@JeanMeche
Copy link
Member

Hi, I'm curious what happens when you pass the environment injector as the injector input ? Could it replace the environment if it's an environment Injector ?

@reey
Copy link
Contributor Author

reey commented Mar 8, 2024

Hi, I'm curious what happens when you pass the environment injector as the injector input ? Could it replace the environment if it's an environment Injector ?

When passing the environment injector as the injector input we are able to inject the services provided in the remote module, but we are then unable to access the component tree via DI, so e.g. we can't inject a parent component.

@reey
Copy link
Contributor Author

reey commented Mar 21, 2024

@JeanMeche sorry if I might be a bit impatient, but is there anything I've missed to get this PR reviewed? 😅

@dylhunn dylhunn added the area: common Issues related to APIs in the @angular/common package label Mar 27, 2024
@ngbot ngbot bot added this to the Backlog milestone Mar 27, 2024
@thePunderWoman thePunderWoman marked this pull request as draft May 21, 2025 15:27
@thePunderWoman thePunderWoman removed the request for review from pkozlowski-opensource June 3, 2025 11:04
@thePunderWoman thePunderWoman added the target: patch This PR is targeted for the next patch release label Jun 5, 2025
@thePunderWoman thePunderWoman marked this pull request as ready for review June 5, 2025 12:40
@pullapprove pullapprove bot requested a review from crisbeto June 5, 2025 12:40
@thePunderWoman thePunderWoman reopened this Jun 5, 2025
thePunderWoman
thePunderWoman previously approved these changes Jun 5, 2025
Copy link
Contributor

@thePunderWoman thePunderWoman left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks!

@thePunderWoman thePunderWoman removed the request for review from crisbeto June 5, 2025 12:42
@thePunderWoman thePunderWoman dismissed their stale review June 5, 2025 12:52

Offline discussion about needing more clarification.

@thePunderWoman
Copy link
Contributor

@reey We're unclear on this use-case as it seems a bit unusual. Can you clarify why this is a need?

@reey
Copy link
Contributor Author

reey commented Jun 17, 2025

@reey We're unclear on this use-case as it seems a bit unusual. Can you clarify why this is a need?

@thePunderWoman We are using the Module Federation feature of webpack to dynamically load further angular modules into our shell application.

The remote modules are then instantiated using createNgModule which gives them their own injector which is a child of the environment injector of the shell application. These remote modules are then registering some of the components that they provide in a service which is provided in root.
This service then allows us to access components, that are part of these remote modules, in our shell application.

In order to instantiate these components as part of our shell application, we need to use the injector of the remote module since it might otherwise not have access to e.g. services that were only provided as part of the remote module the component was part of. To do so, we would need to have the option to also provide a different environment injector via the NgComponentOutlet directive.

reey and others added 2 commits June 25, 2025 17:04
…nentOutlet directive

Signed-off-by: Tristan Bastian <tristan.bastian@cumulocity.com>
Copy link
Contributor

@thePunderWoman thePunderWoman left a comment

Choose a reason for hiding this comment

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

LGTM! Thank you!

reviewed-for: fw-general, public-api

@thePunderWoman thePunderWoman added the action: merge The PR is ready for merge by the caretaker label Jun 25, 2025
Copy link
Contributor

@mmalerba mmalerba left a comment

Choose a reason for hiding this comment

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

reviewed-for: public-api

@thePunderWoman thePunderWoman removed the request for review from AndrewKushnir June 25, 2025 15:30
@thePunderWoman thePunderWoman removed the request for review from crisbeto June 25, 2025 15:30
@thePunderWoman thePunderWoman added target: minor This PR is targeted for the next minor release and removed target: patch This PR is targeted for the next patch release labels Jun 25, 2025
@thePunderWoman
Copy link
Contributor

This PR was merged into the repository by commit 58aedc3.

The changes were merged into the following branches: main

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 26, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker area: common Issues related to APIs in the @angular/common package detected: feature PR contains a feature commit target: minor This PR is targeted for the next minor release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy