fix(cdk/portal): fix incorrect injector hierarchy with DomPortalOutlet and child environment injectors

This commit fixes a regression that was introduced in #27427, where the injector hierarchy
did not respect nested environment injectors. `DomPortalOutlet` was always using the application
root as environment injector, yet the element injector may have a custom child environment injector
as ancestor. This child environment injector has to be retrieved manually and passed as environment
injector of the portal component.

Fixes #30609

Author: JoostK

src/cdk/portal/dom-portal-outlet.ts

@@ -10,6 +10,7 @@ import {
   ApplicationRef,
   ComponentRef,
   EmbeddedViewRef,
+  EnvironmentInjector,
   Injector,
   NgModuleRef,
   createComponent,
@@ -66,9 +67,11 @@ export class DomPortalOutlet extends BasePortalOutlet {
         throw Error('Cannot attach component portal to outlet without an ApplicationRef.');
       }
 
+      const elementInjector = portal.injector || this._defaultInjector || Injector.NULL;
+      const environmentInjector = elementInjector.get(EnvironmentInjector, this._appRef!.injector);
       componentRef = createComponent(portal.component, {
-        elementInjector: portal.injector || this._defaultInjector || Injector.NULL,
-        environmentInjector: this._appRef!.injector,
+        elementInjector,
+        environmentInjector,
         projectableNodes: portal.projectableNodes || undefined,
       });
 

src/cdk/portal/portal.spec.ts

@@ -5,12 +5,15 @@ import {
   ComponentRef,
   Directive,
   ElementRef,
+  EnvironmentInjector,
   Injector,
   QueryList,
   TemplateRef,
   ViewChild,
   ViewChildren,
   ViewContainerRef,
+  createComponent,
+  createEnvironmentInjector,
   inject,
 } from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
@@ -614,6 +617,9 @@ describe('Portals', () => {
       expect(someDomElement.textContent)
         .withContext('Expected the static string "Pizza" in the DomPortalOutlet.')
         .toContain('Pizza');
+      expect(someDomElement.textContent)
+        .withContext('Did not expect the bound string "Chocolate" in the DomPortalOutlet')
+        .not.toContain('Chocolate');
 
       componentInstance.snack = new Chocolate();
       someFixture.detectChanges();
@@ -628,6 +634,30 @@ describe('Portals', () => {
         .toBe('');
     });
 
+    it('should support a component portal with element injector that has a child environment injector as parent', () => {
+      // https://github.com/angular/components/issues/30609
+      const childEnvironment = createEnvironmentInjector(
+        [Chocolate],
+        someInjector.get(EnvironmentInjector),
+        'Child environment',
+      );
+
+      @Component({template: ''})
+      class ChildComponent {
+        readonly injector = inject(Injector);
+      }
+
+      const component = createComponent(ChildComponent, {
+        environmentInjector: childEnvironment,
+      });
+      const portal = new ComponentPortal(PizzaMsg, null, component.injector);
+
+      const componentInstance = portal.attach(host).instance;
+      expect(componentInstance.snack)
+        .withContext('Expected Chocolate to have been injected')
+        .toBeInstanceOf(Chocolate);
+    });
+
     it('should call the dispose function even if the host has no attached content', () => {
       let spy = jasmine.createSpy('host dispose spy');