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

[reey]

PR Checklist

Please check if your PR fulfills the following requirements:

• [x] The commit message follows our guidelines: https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit
• [x] Tests for the changes have been added (for bug fixes / features)
• [x] Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• [ ] Bugfix
• [x] 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
• [x] No

Other information

[JeanMeche]

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]

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]

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

[thePunderWoman]

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

[reey]

@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.

[thePunderWoman]

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

The changes were merged into the following branches: main

[angular-automatic-lock-bot[bot]]

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.}