feat(dialog): Support passing custom ComponentFactoryResolver (#1978)

Allows for a different `ComponentFactoryResolver` to be passed in when creating a dialog.

#### Potential use case
Support lazy loaded dialog components; allowing code modularity and precise code splitting.

Author: trimox

demos/src/app/components/dialog-demo/api.html

@@ -70,6 +70,10 @@ <h4 mdcSubtitle2>MdcDialogConfig</h4>
         <td>Enable or disable the stacking of action buttons, if they can't fit
           on a single line.</td>
       </tr>
+      <tr>
+        <td>componentFactoryResolver?: ComponentFactoryResolver</td>
+        <td>Allows for a different `ComponentFactoryResolver` to be passed in when creating a dialog.</td>
+      </tr>
       <tr>
         <td>data: any</td>
         <td>Data that can be assigned inside child component.</td>

demos/src/app/components/dialog-demo/usage.html

@@ -1,15 +1,45 @@
 <div class="demo-content">
+  <h3 class="demo-content__headline">Configuring Dialog via
+    entryComponents</h3>
+  <p mdcBody2>Because <code class="docs-markdown-code">MdcDialog</code>
+    instantiates components at run-time, the
+    Angular compiler needs extra information to create the necessary
+    ComponentFactory for your dialog content component.</p>
+  <p mdcBody2>For any component loaded into a dialog, you must include your
+    component
+    class in the list of <code class="docs-markdown-code">entryComponents</code>
+    in your NgModule definition so that
+    the Angular compiler knows to create the ComponentFactory.</p>
+  <pre><code highlight="@NgModule({
+  imports: [
+    // ...
+    MdcDialogModule
+  ],
+  declarations: [
+    AppComponent,
+    ExampleDialogComponent
+  ],
+  entryComponents: [
+    ExampleDialogComponent
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}"></code></pre>
+
   <h3 class="demo-content__headline">Usage</h3>
-  A dialog is opened by calling the <code class="docs-markdown-code">open</code> method with a component to be loaded
-  and an optional config object. The <code class="docs-markdown-code">open</code> method will return an instance of
+  A dialog is opened by calling the <code class="docs-markdown-code">open</code>
+  method with a component to be loaded
+  and an optional config object. The <code
+    class="docs-markdown-code">open</code> method will return an instance of
   <code class="docs-markdown-code">MdcDialogRef</code>:
 
   <pre><code highlight="let dialogRef = dialog.open(UserProfileComponent, {
   clickOutsideToClose: true,
   escapeToClose: true,
 });"></code></pre>
 
-  The <code class="docs-markdown-code">MdcDialogRef</code> provides a handle on the opened dialog. It can be used to
+  The <code class="docs-markdown-code">MdcDialogRef</code> provides a handle on
+  the opened dialog. It can be used to
   close the dialog and to receive notification when the dialog has been closed.
 
   <pre><code highlight="dialogRef.afterClosed().subscribe(result => {
@@ -18,9 +48,12 @@ <h3 class="demo-content__headline">Usage</h3>
 
 dialogRef.close('Pizza!');"></code></pre>
 
-  <p>Components created via <code class="docs-markdown-code">MdcDialog</code> can inject <code class="docs-markdown-code">MdcDialogRef</code>
-    and use it to close the dialog in which they are contained. When closing, an optional result value can be
-    provided. This result value is forwarded as the result of the <code class="docs-markdown-code">afterClosed</code>
+  <p>Components created via <code class="docs-markdown-code">MdcDialog</code>
+    can inject <code class="docs-markdown-code">MdcDialogRef</code>
+    and use it to close the dialog in which they are contained. When closing, an
+    optional result value can be
+    provided. This result value is forwarded as the result of the <code
+      class="docs-markdown-code">afterClosed</code>
     promise.</p>
 
   <pre><code highlight="@Component({/* ... */})
@@ -34,7 +67,8 @@ <h3 class="demo-content__headline">Usage</h3>
 }"></code></pre>
 
   <h3 class="demo-content__headline">Sharing data with the Dialog component</h3>
-  If you want to share data with your dialog, you can use the <code class="docs-markdown-code">data</code> option to
+  If you want to share data with your dialog, you can use the <code
+    class="docs-markdown-code">data</code> option to
   pass information to the dialog component.
 
   <pre><code highlight="let dialogRef = dialog.open(YourDialog, {
@@ -59,26 +93,4 @@ <h3 class="demo-content__headline">Sharing data with the Dialog component</h3>
     userName: string = data.name;
   }
 }"></code></pre>
-  <h3 class="demo-content__headline">Configuring dialog content via entryComponents</h3>
-  <p mdcBody2>Because <code class="docs-markdown-code">MdcDialog</code> instantiates components at run-time, the
-    Angular compiler needs extra information to create the necessary
-    ComponentFactory for your dialog content component.</p>
-  <p mdcBody2>For any component loaded into a dialog, you must include your component
-    class in the list of <code class="docs-markdown-code">entryComponents</code> in your NgModule definition so that
-    the Angular compiler knows to create the ComponentFactory.</p>
-  <pre><code highlight="@NgModule({
-  imports: [
-    // ...
-    MdcDialogModule
-  ],
-  declarations: [
-    AppComponent,
-    ExampleDialogComponent
-  ],
-  entryComponents: [
-    ExampleDialogComponent
-  ],
-  bootstrap: [AppComponent]
-})
-export class AppModule {}"></code></pre>
-</div>
+</div>

packages/dialog/dialog-config.ts

@@ -1,4 +1,4 @@
-import {ViewContainerRef} from '@angular/core';
+import {ViewContainerRef, ComponentFactoryResolver} from '@angular/core';
 
 export class MdcDialogConfig<D = any> {
   viewContainerRef?: ViewContainerRef;
@@ -24,6 +24,9 @@ export class MdcDialogConfig<D = any> {
   /** Applied automatically when the dialog's action buttons can't fit on a single line and must be stacked. */
   buttonsStacked?: boolean = true;
 
+  /** Alternate `ComponentFactoryResolver` to use when resolving the associated component. */
+  componentFactoryResolver?: ComponentFactoryResolver;
+
   /** Data to be injected into the dialog content. */
   data?: D | null = null;
 }

packages/dialog/dialog.ts

@@ -66,7 +66,7 @@ export class MdcDialog implements OnDestroy {
     private _overlay: Overlay,
     private _injector: Injector,
     @Optional() @Inject(MDC_DIALOG_DEFAULT_OPTIONS) private _defaultOptions: MdcDialogConfig,
-    @Optional() @SkipSelf() private _parentDialog: MdcDialog) { }
+    @Optional() @SkipSelf() private _parentDialog: MdcDialog) {}
 
   /**
    * Opens a modal dialog containing the given template.
@@ -138,8 +138,8 @@ export class MdcDialog implements OnDestroy {
     const injector = new PortalInjector(userInjector || this._injector, new WeakMap([
       [MdcDialogConfig, config]
     ]));
-    const containerPortal =
-      new ComponentPortal(MdcDialogPortal, config.viewContainerRef, injector);
+    const containerPortal = new ComponentPortal(MdcDialogPortal,
+      config.viewContainerRef, injector, config.componentFactoryResolver);
     const containerRef = overlay.attach<MdcDialogPortal>(containerPortal);
 
     return containerRef.instance;
@@ -167,7 +167,7 @@ export class MdcDialog implements OnDestroy {
     if (componentOrTemplateRef instanceof TemplateRef) {
       dialogContainer.attachTemplatePortal(
         new TemplatePortal<T>(componentOrTemplateRef, null!,
-          <any>{ $implicit: config.data, dialogRef }));
+          <any>{$implicit: config.data, dialogRef}));
     } else {
       const injector = this._createInjector<T>(config, dialogRef, dialogContainer);
       const contentRef = dialogContainer.attachComponentPortal<T>(
@@ -255,5 +255,5 @@ export class MdcDialog implements OnDestroy {
  */
 function _applyConfigDefaults(
   config?: MdcDialogConfig, defaultOptions?: MdcDialogConfig): MdcDialogConfig {
-  return { ...defaultOptions, ...config };
+  return {...defaultOptions, ...config};
 }

test/dialog/dialog.test.ts

@@ -1,6 +1,7 @@
 import {
   NgModule, Directive, Component, Inject,
-  Injector, TemplateRef, ViewContainerRef, ViewChild
+  Injector, TemplateRef, ViewContainerRef, ViewChild,
+  ComponentFactoryResolver
 } from '@angular/core';
 import {inject, flush, fakeAsync, flushMicrotasks, tick, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Location} from '@angular/common';
@@ -218,6 +219,19 @@ describe('MdcDialog Service', () => {
     sibling.parentNode!.removeChild(sibling);
   }));
 
+  it('should be able to pass in an alternate ComponentFactoryResolver',
+    inject([ComponentFactoryResolver], (resolver: ComponentFactoryResolver) => {
+      spyOn(resolver, 'resolveComponentFactory').and.callThrough();
+
+      dialog.open(PizzaMsg, {
+        viewContainerRef: testViewContainerRef,
+        componentFactoryResolver: resolver
+      });
+      viewContainerFixture.detectChanges();
+
+      expect(resolver.resolveComponentFactory).toHaveBeenCalled();
+    }));
+
   it('should notify the observers if all open dialogs have finished closing', fakeAsync(() => {
     const ref1 = dialog.open(PizzaMsg, {viewContainerRef: testViewContainerRef});
     const ref2 = dialog.open(SimpleDialog, {viewContainerRef: testViewContainerRef});