feat(material/dialog): add support for explicit injector

src/cdk-experimental/dialog/dialog-config.ts

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {ViewContainerRef} from '@angular/core';
+import {Injector, ViewContainerRef} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
 import {ComponentType} from '@angular/cdk/overlay';
 import {CdkDialogContainer} from './dialog-container';
@@ -36,6 +36,12 @@ export class DialogConfig<D = any> {
    */
   viewContainerRef?: ViewContainerRef;
 
+  /**
+   * Injector used for the instantiation of the component to be attached. If provided,
+   * takes precedence over the injector indirectly provided by `ViewContainerRef`.
+   */
+  injector?: Injector;
+
   /** The id of the dialog. */
   id?: string;
 

src/cdk-experimental/dialog/dialog.ts

@@ -213,7 +213,7 @@ export class Dialog implements OnDestroy {
    */
   protected _attachDialogContainer(overlay: OverlayRef, config: DialogConfig): CdkDialogContainer {
     const container = config.containerComponent || this._injector.get(DIALOG_CONTAINER);
-    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+    const userInjector = config.injector ?? config.viewContainerRef?.injector;
     const injector = Injector.create({
       parent: userInjector || this._injector,
       providers: [{provide: DialogConfig, useValue: config}],

src/material-experimental/mdc-dialog/dialog.spec.ts

@@ -17,9 +17,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   ComponentFactoryResolver,
+  createNgModuleRef,
   Directive,
   Inject,
+  Injectable,
   Injector,
+  NgModule,
   NgZone,
   TemplateRef,
   ViewChild,
@@ -2018,6 +2021,37 @@ describe('MDC-based MatDialog with animations enabled', () => {
   }));
 });
 
+describe('MatDialog with explicit injector provided', () => {
+  let overlayContainerElement: HTMLElement;
+  let fixture: ComponentFixture<ModuleBoundDialogParentComponent>;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [MatDialogModule, BrowserAnimationsModule],
+      declarations: [ModuleBoundDialogParentComponent],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
+    overlayContainerElement = oc.getContainerElement();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModuleBoundDialogParentComponent);
+  });
+
+  it('should use the standalone injector and render the dialog successfully', () => {
+    fixture.componentInstance.openDialog();
+    fixture.detectChanges();
+
+    expect(
+      overlayContainerElement.querySelector('module-bound-dialog-child-component')!.innerHTML,
+    ).toEqual('<p>Pasta</p>');
+  });
+});
+
 @Directive({selector: 'dir-with-view-container'})
 class DirectiveWithViewContainer {
   constructor(public viewContainerRef: ViewContainerRef) {}
@@ -2131,3 +2165,38 @@ class DialogWithoutFocusableElements {}
   encapsulation: ViewEncapsulation.ShadowDom,
 })
 class ShadowDomComponent {}
+
+@Component({template: ''})
+class ModuleBoundDialogParentComponent {
+  constructor(private _injector: Injector, private _dialog: MatDialog) {}
+
+  openDialog(): void {
+    const ngModuleRef = createNgModuleRef(
+      ModuleBoundDialogModule,
+      /* parentInjector */ this._injector,
+    );
+
+    this._dialog.open(ModuleBoundDialogComponent, {injector: ngModuleRef.injector});
+  }
+}
+
+@Injectable()
+class ModuleBoundDialogService {
+  name = 'Pasta';
+}
+
+@Component({
+  template: '<module-bound-dialog-child-component></module-bound-dialog-child-component>',
+})
+class ModuleBoundDialogComponent {}
+
+@Component({selector: 'module-bound-dialog-child-component', template: '<p>{{service.name}}</p>'})
+class ModuleBoundDialogChildComponent {
+  constructor(public service: ModuleBoundDialogService) {}
+}
+
+@NgModule({
+  declarations: [ModuleBoundDialogComponent, ModuleBoundDialogChildComponent],
+  providers: [ModuleBoundDialogService],
+})
+class ModuleBoundDialogModule {}

src/material/dialog/dialog-config.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ViewContainerRef, ComponentFactoryResolver} from '@angular/core';
+import {ViewContainerRef, ComponentFactoryResolver, Injector} from '@angular/core';
 import {Direction} from '@angular/cdk/bidi';
 import {ScrollStrategy} from '@angular/cdk/overlay';
 import {defaultParams} from './dialog-animations';
@@ -44,6 +44,12 @@ export class MatDialogConfig<D = any> {
    */
   viewContainerRef?: ViewContainerRef;
 
+  /**
+   * Injector used for the instantiation of the component to be attached. If provided,
+   * takes precedence over the injector indirectly provided by `ViewContainerRef`.
+   */
+  injector?: Injector;
+
   /** ID for the dialog. If omitted, a unique one will be generated. */
   id?: string;
 

src/material/dialog/dialog.spec.ts

@@ -20,6 +20,9 @@ import {
   ComponentFactoryResolver,
   NgZone,
   ViewEncapsulation,
+  Injectable,
+  NgModule,
+  createNgModuleRef,
 } from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {BrowserAnimationsModule, NoopAnimationsModule} from '@angular/platform-browser/animations';
@@ -2072,6 +2075,37 @@ describe('MatDialog with animations enabled', () => {
   }));
 });
 
+describe('MatDialog with explicit injector provided', () => {
+  let overlayContainerElement: HTMLElement;
+  let fixture: ComponentFixture<ModuleBoundDialogParentComponent>;
+
+  beforeEach(fakeAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [MatDialogModule, BrowserAnimationsModule],
+      declarations: [ModuleBoundDialogParentComponent],
+    });
+
+    TestBed.compileComponents();
+  }));
+
+  beforeEach(inject([OverlayContainer], (oc: OverlayContainer) => {
+    overlayContainerElement = oc.getContainerElement();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ModuleBoundDialogParentComponent);
+  });
+
+  it('should use the standalone injector and render the dialog successfully', fakeAsync(() => {
+    fixture.componentInstance.openDialog();
+    fixture.detectChanges();
+
+    expect(
+      overlayContainerElement.querySelector('module-bound-dialog-child-component')!.innerHTML,
+    ).toEqual('<p>Pasta</p>');
+  }));
+});
+
 @Directive({selector: 'dir-with-view-container'})
 class DirectiveWithViewContainer {
   constructor(public viewContainerRef: ViewContainerRef) {}
@@ -2188,3 +2222,38 @@ class DialogWithoutFocusableElements {}
   encapsulation: ViewEncapsulation.ShadowDom,
 })
 class ShadowDomComponent {}
+
+@Component({template: ''})
+class ModuleBoundDialogParentComponent {
+  constructor(private _injector: Injector, private _dialog: MatDialog) {}
+
+  openDialog(): void {
+    const ngModuleRef = createNgModuleRef(
+      ModuleBoundDialogModule,
+      /* parentInjector */ this._injector,
+    );
+
+    this._dialog.open(ModuleBoundDialogComponent, {injector: ngModuleRef.injector});
+  }
+}
+
+@Injectable()
+class ModuleBoundDialogService {
+  name = 'Pasta';
+}
+
+@Component({
+  template: '<module-bound-dialog-child-component></module-bound-dialog-child-component>',
+})
+class ModuleBoundDialogComponent {}
+
+@Component({selector: 'module-bound-dialog-child-component', template: '<p>{{service.name}}</p>'})
+class ModuleBoundDialogChildComponent {
+  constructor(public service: ModuleBoundDialogService) {}
+}
+
+@NgModule({
+  declarations: [ModuleBoundDialogComponent, ModuleBoundDialogChildComponent],
+  providers: [ModuleBoundDialogService],
+})
+class ModuleBoundDialogModule {}

src/material/dialog/dialog.ts

@@ -257,7 +257,7 @@ export abstract class _MatDialogBase<C extends _MatDialogContainerBase> implemen
    * @returns A promise resolving to a ComponentRef for the attached container.
    */
   private _attachDialogContainer(overlay: OverlayRef, config: MatDialogConfig): C {
-    const userInjector = config && config.viewContainerRef && config.viewContainerRef.injector;
+    const userInjector = config.injector ?? config.viewContainerRef?.injector;
     const injector = Injector.create({
       parent: userInjector || this._injector,
       providers: [{provide: MatDialogConfig, useValue: config}],

tools/public_api_guard/material/dialog.md

@@ -173,6 +173,7 @@ export class MatDialogConfig<D = any> {
     hasBackdrop?: boolean;
     height?: string;
     id?: string;
+    injector?: Injector;
     maxHeight?: number | string;
     maxWidth?: number | string;
     minHeight?: number | string;