chore(portals): replace deprecated DynamicComponentLoader (#501)

Author: jelbourn

src/core/overlay/overlay.ts

@@ -1,5 +1,5 @@
 import {
-  DynamicComponentLoader,
+  ComponentResolver,
   OpaqueToken,
   Inject,
   Injectable,
@@ -39,7 +39,7 @@ let defaultState = new OverlayState();
 export class Overlay {
   constructor(
       @Inject(OVERLAY_CONTAINER_TOKEN) private _overlayContainerElement: HTMLElement,
-      private _dynamicComponentLoader: DynamicComponentLoader,
+      private _componentResolver: ComponentResolver,
       private _positionBuilder: OverlayPositionBuilder) {
   }
 
@@ -82,7 +82,7 @@ export class Overlay {
   private _createPortalHost(pane: HTMLElement): DomPortalHost {
     return new DomPortalHost(
         pane,
-        this._dynamicComponentLoader);
+        this._componentResolver);
   }
 
   /**

src/core/portal/dom-portal-host.ts

@@ -1,4 +1,4 @@
-import {DynamicComponentLoader, ComponentRef, EmbeddedViewRef} from '@angular/core';
+import {ComponentResolver, ComponentRef, EmbeddedViewRef} from '@angular/core';
 import {BasePortalHost, ComponentPortal, TemplatePortal} from './portal';
 import {MdComponentPortalAttachedToDomWithoutOriginError} from './portal-errors';
 
@@ -12,18 +12,20 @@ import {MdComponentPortalAttachedToDomWithoutOriginError} from './portal-errors'
 export class DomPortalHost extends BasePortalHost {
   constructor(
       private _hostDomElement: Element,
-      private _componentLoader: DynamicComponentLoader) {
+      private _componentResolver: ComponentResolver) {
     super();
   }
 
-  /** Attach the given ComponentPortal to DOM element using the DynamicComponentLoader. */
+  /** Attach the given ComponentPortal to DOM element using the ComponentResolver. */
   attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef<any>> {
     if (portal.viewContainerRef == null) {
       throw new MdComponentPortalAttachedToDomWithoutOriginError();
     }
 
-    return this._componentLoader.loadNextToLocation(
-        portal.component, portal.viewContainerRef).then(ref => {
+    return this._componentResolver.resolveComponent(portal.component).then(componentFactory => {
+      let ref = portal.viewContainerRef.createComponent(
+          componentFactory, portal.viewContainerRef.length, portal.viewContainerRef.parentInjector);
+
       let hostView = <EmbeddedViewRef<any>> ref.hostView;
       this._hostDomElement.appendChild(hostView.rootNodes[0]);
       this.setDisposeFn(() => ref.destroy());

src/core/portal/portal-directives.ts

@@ -2,7 +2,7 @@ import {
     ComponentRef,
     Directive,
     TemplateRef,
-    DynamicComponentLoader,
+    ComponentResolver,
     ViewContainerRef
 } from '@angular/core';
 import {Portal, TemplatePortal, ComponentPortal, BasePortalHost} from './portal';
@@ -45,7 +45,7 @@ export class PortalHostDirective extends BasePortalHost {
   private _portal: Portal<any>;
 
   constructor(
-      private _dynamicComponentLoader: DynamicComponentLoader,
+      private _componentResolver: ComponentResolver,
       private _viewContainerRef: ViewContainerRef) {
     super();
   }
@@ -58,7 +58,7 @@ export class PortalHostDirective extends BasePortalHost {
     this._replaceAttachedPortal(p);
   }
 
-  /** Attach the given ComponentPortal to this PortlHost using the DynamicComponentLoader. */
+  /** Attach the given ComponentPortal to this PortlHost using the ComponentResolver. */
   attachComponentPortal(portal: ComponentPortal): Promise<ComponentRef<any>> {
     portal.setAttachedHost(this);
 
@@ -68,12 +68,13 @@ export class PortalHostDirective extends BasePortalHost {
         portal.viewContainerRef :
         this._viewContainerRef;
 
-    // Typecast is necessary for Dart transpilation.
-    return this._dynamicComponentLoader.loadNextToLocation(portal.component, viewContainerRef)
-      .then(ref => {
-        this.setDisposeFn(() => ref.destroy());
-        return ref;
-      });
+    return this._componentResolver.resolveComponent(portal.component).then(componentFactory => {
+      let ref = viewContainerRef.createComponent(
+          componentFactory, viewContainerRef.length, viewContainerRef.parentInjector);
+
+      this.setDisposeFn(() => ref.destroy());
+      return ref;
+    });
   }
 
   /** Attach the given TemplatePortal to this PortlHost as an embedded View. */

src/core/portal/portal.spec.ts

@@ -13,7 +13,7 @@ import {
   ViewChildren,
   QueryList,
   ViewContainerRef,
-  DynamicComponentLoader
+  ComponentResolver
 } from '@angular/core';
 import {TemplatePortalDirective, PortalHostDirective} from './portal-directives';
 import {Portal, ComponentPortal} from './portal';
@@ -180,12 +180,12 @@ describe('Portals', () => {
   });
 
   describe('DomPortalHost', function () {
-    let componentLoader: DynamicComponentLoader;
+    let componentLoader: ComponentResolver;
     let someViewContainerRef: ViewContainerRef;
     let someDomElement: HTMLElement;
     let host: DomPortalHost;
 
-    beforeEach(inject([DynamicComponentLoader], (dcl: DynamicComponentLoader) => {
+    beforeEach(inject([ComponentResolver], (dcl: ComponentResolver) => {
       componentLoader = dcl;
     }));