fix(angular): viewContainer in overlays

angular/src/providers/angular-delegate.ts

@@ -1,4 +1,4 @@
-import { ComponentFactoryResolver, Injectable, InjectionToken, Injector, NgZone, ViewContainerRef } from '@angular/core';
+import { ApplicationRef, ComponentFactoryResolver, Injectable, InjectionToken, Injector, NgZone, ViewContainerRef } from '@angular/core';
 import { FrameworkDelegate, ViewLifecycle } from '@ionic/core';
 import { NavParams } from '../directives/navigation/nav-params';
 
@@ -7,15 +7,16 @@ import { NavParams } from '../directives/navigation/nav-params';
 export class AngularDelegate {
 
   constructor(
-    private zone: NgZone
+    private zone: NgZone,
+    private appRef: ApplicationRef
   ) {}
 
   create(
     resolver: ComponentFactoryResolver,
     injector: Injector,
-    location: ViewContainerRef,
+    location?: ViewContainerRef,
   ) {
-    return new AngularFrameworkDelegate(resolver, injector, location, this.zone);
+    return new AngularFrameworkDelegate(resolver, injector, location, this.appRef, this.zone);
   }
 }
 
@@ -28,6 +29,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
     private location: ViewContainerRef,
+    private appRef: ApplicationRef,
     private zone: NgZone,
   ) {}
 
@@ -35,7 +37,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     return new Promise(resolve => {
       this.zone.run(() => {
         const el = attachView(
-          this.resolver, this.injector, this.location, this.elRefMap,
+          this.resolver, this.injector, this.location, this.appRef, this.elRefMap,
           container, component, params, cssClasses
         );
         resolve(el);
@@ -60,12 +62,17 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
 export function attachView(
   resolver: ComponentFactoryResolver,
   injector: Injector,
-  location: ViewContainerRef,
+  location: ViewContainerRef|undefined,
+  appRef: ApplicationRef,
   elRefMap: WeakMap<HTMLElement, any>,
-  container: any, component: any, params?: any, cssClasses?: string[]) {
+  container: any, component: any, params: any, cssClasses: string[]
+) {
   const factory = resolver.resolveComponentFactory(component);
   const childInjector = Injector.create(getProviders(params), injector);
-  const componentRef = location.createComponent(factory, location.length, childInjector);
+  const componentRef = (location)
+    ? location.createComponent(factory, location.length, childInjector)
+    : factory.create(childInjector);
+
   const hostElement = componentRef.location.nativeElement;
   if (params) {
     Object.assign(hostElement, params);
@@ -76,6 +83,10 @@ export function attachView(
   bindLifecycleEvents(componentRef.instance, hostElement);
   container.appendChild(hostElement);
 
+  if (!location) {
+    appRef.attachView(componentRef.hostView);
+  }
+
   componentRef.changeDetectorRef.reattach();
   elRefMap.set(hostElement, componentRef);
   return hostElement;

angular/src/providers/modal-controller.ts

@@ -1,4 +1,4 @@
-import { ComponentFactoryResolver, Injectable, Injector, ViewContainerRef } from '@angular/core';
+import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
 import { ModalOptions } from '@ionic/core';
 import { OverlayBaseController } from '../util/overlay';
 import { AngularDelegate } from './angular-delegate';
@@ -10,7 +10,6 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
-    private location: ViewContainerRef,
   ) {
     super('ion-modal-controller');
   }
@@ -18,7 +17,7 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
   create(opts?: ModalOptions): Promise<HTMLIonModalElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver, this.injector, this.location)
+      delegate: this.angularDelegate.create(this.resolver, this.injector)
     });
   }
 }

angular/src/providers/popover-controller.ts

@@ -1,4 +1,4 @@
-import { ComponentFactoryResolver, Injectable, Injector, ViewContainerRef } from '@angular/core';
+import { ComponentFactoryResolver, Injectable, Injector } from '@angular/core';
 import { PopoverOptions } from '@ionic/core';
 import { OverlayBaseController } from '../util/overlay';
 import { AngularDelegate } from './angular-delegate';
@@ -10,7 +10,6 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
     private angularDelegate: AngularDelegate,
     private resolver: ComponentFactoryResolver,
     private injector: Injector,
-    private location: ViewContainerRef,
   ) {
     super('ion-popover-controller');
   }
@@ -18,7 +17,7 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
   create(opts?: PopoverOptions): Promise<HTMLIonPopoverElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver, this.injector, this.location)
+      delegate: this.angularDelegate.create(this.resolver, this.injector)
     });
   }
 }