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

* 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

* refactor(cdk/portal): store application in local variable to avoid repeated non-null assertion

This also has the benefit of minimizing more effectively, as the local variable can be renamed
but the separate field accesses could not.

(cherry picked from commit d0d5de4)

Author: JoostK

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

@@ -10,6 +10,7 @@ import {
   ApplicationRef,
   ComponentRef,
   EmbeddedViewRef,
+  EnvironmentInjector,
   Injector,
   NgModuleRef,
   createComponent,
@@ -83,19 +84,22 @@ export class DomPortalOutlet extends BasePortalOutlet {
       if ((typeof ngDevMode === 'undefined' || ngDevMode) && !this._appRef) {
         throw Error('Cannot attach component portal to outlet without an ApplicationRef.');
       }
+      const appRef = this._appRef!;
 
+      const elementInjector = portal.injector || this._defaultInjector || Injector.NULL;
+      const environmentInjector = elementInjector.get(EnvironmentInjector, appRef.injector);
       componentRef = createComponent(portal.component, {
-        elementInjector: portal.injector || this._defaultInjector || Injector.NULL,
-        environmentInjector: this._appRef!.injector,
+        elementInjector,
+        environmentInjector,
         projectableNodes: portal.projectableNodes || undefined,
       });
 
-      this._appRef!.attachView(componentRef.hostView);
+      appRef.attachView(componentRef.hostView);
       this.setDisposeFn(() => {
         // Verify that the ApplicationRef has registered views before trying to detach a host view.
         // This check also protects the `detachView` from being called on a destroyed ApplicationRef.
-        if (this._appRef!.viewCount > 0) {
-          this._appRef!.detachView(componentRef.hostView);
+        if (appRef.viewCount > 0) {
+          appRef.detachView(componentRef.hostView);
         }
         componentRef.destroy();
       });

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,28 @@ 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 {}
+
+      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');