Fix PageRouterOutlet crash with beta 16+

Author: hdeshev

src/nativescript-angular/common/detached-loader.ts

@@ -1,5 +1,10 @@
 import {DynamicComponentLoader, ComponentRef, ViewContainerRef, Component, Type, ViewChild} from '@angular/core';
 
+interface PendingLoadEntry {
+    componentType: Type;
+    resolveCallback: (ComponentRef) => void;
+}
+
 /**
  * Wrapper component used for loading components when navigating
  * It uses DetachedContainer as selector so that it is containerRef is not attached to the visual tree.
@@ -9,14 +14,42 @@ import {DynamicComponentLoader, ComponentRef, ViewContainerRef, Component, Type,
     template: `<Placeholder #loader></Placeholder>`
 })
 export class DetachedLoader {
-        
+    @ViewChild('loader', { read: ViewContainerRef }) containerRef: ViewContainerRef;
+    private viewLoaded = false;
+
+    private pendingLoads: PendingLoadEntry[] = [];
+
     constructor(
-        private containerRef: ViewContainerRef,
         private loader: DynamicComponentLoader
     ) {
     }
 
-    public loadComponent(componentType: Type): Promise<ComponentRef> {
+    public ngAfterViewInit() {
+        this.viewLoaded = true;
+
+        this.pendingLoads.forEach(loadEntry => {
+            this.loadInLocation(loadEntry.componentType).then(loadedRef => {
+                loadEntry.resolveCallback(loadedRef);
+            });
+        });
+    }
+
+    private loadInLocation(componentType: Type): Promise<ComponentRef> {
         return this.loader.loadNextToLocation(componentType, this.containerRef);
     }
+
+    public loadComponent(componentType: Type): Promise<ComponentRef> {
+        // Check if called before placeholder is initialized.
+        // Delay load if so.
+        if (this.viewLoaded) {
+            return this.loadInLocation(componentType);
+        } else {
+            return new Promise((resolve, reject) => {
+                this.pendingLoads.push({
+                    componentType: componentType,
+                    resolveCallback: resolve
+                });
+            });
+        }
+    }
 }

src/nativescript-angular/router/page-router-outlet.ts

@@ -2,8 +2,12 @@ import {PromiseWrapper} from '@angular/core/src/facade/async';
 import {isBlank, isPresent} from '@angular/core/src/facade/lang';
 import {StringMapWrapper} from '@angular/core/src/facade/collection';
 
-import {Attribute, DynamicComponentLoader, ComponentRef, ViewContainerRef,
-    ElementRef, ReflectiveInjector, provide, Type, Component} from '@angular/core';
+import {
+    Attribute, DynamicComponentLoader, ComponentRef,
+    ViewContainerRef, ViewChild, ElementRef,
+    ReflectiveInjector, provide, Type,
+    Component, Inject
+} from '@angular/core';
 
 import * as routerHooks from '@angular/router/src/lifecycle/lifecycle_annotations';
 import {hasLifecycleHook} from '@angular/router/src/lifecycle/route_lifecycle_reflector';
@@ -13,9 +17,12 @@ import {Router, RouterOutlet, RouteData, RouteParams, ComponentInstruction,
 import {LocationStrategy} from '@angular/common';
 import {topmost} from "ui/frame";
 import {Page, NavigatedData} from "ui/page";
+import {DEVICE} from "../platform-providers";
+import {Device} from "platform";
 import {log} from "./common";
 import {NSLocationStrategy} from "./ns-location-strategy";
 import {DetachedLoader} from "../common/detached-loader";
+import {ViewUtil} from "../view-util";
 
 let _resolveToTrue = PromiseWrapper.resolve(true);
 
@@ -66,13 +73,19 @@ export class PageRouterOutlet extends RouterOutlet {
 
     private componentRef: ComponentRef = null;
     private currentInstruction: ComponentInstruction = null;
+    private viewUtil: ViewUtil;
+    @ViewChild('loader', { read: ViewContainerRef }) childContainerRef: ViewContainerRef;
 
-    constructor(private containerRef: ViewContainerRef,
+    constructor(
+        private containerRef: ViewContainerRef,
         private loader: DynamicComponentLoader,
         private parentRouter: Router,
         @Attribute('name') nameAttr: string,
-        private location: NSLocationStrategy) {
+        private location: NSLocationStrategy,
+        @Inject(DEVICE) device: Device
+        ) {
         super(containerRef, loader, parentRouter, nameAttr);
+        this.viewUtil = new ViewUtil(device);
     }
 
     /**
@@ -128,7 +141,7 @@ export class PageRouterOutlet extends RouterOutlet {
 
             const page = new Page();
             providersArray.push(provide(Page, { useValue: page }));
-            resultPromise = this.loader.loadNextToLocation(DetachedLoader, this.containerRef, ReflectiveInjector.resolve(providersArray))
+            resultPromise = this.loader.loadNextToLocation(DetachedLoader, this.childContainerRef, ReflectiveInjector.resolve(providersArray))
                 .then((pageComponentRef) => {
                     loaderRef = pageComponentRef;
                     return (<DetachedLoader>loaderRef.instance).loadComponent(componentType);
@@ -154,9 +167,7 @@ export class PageRouterOutlet extends RouterOutlet {
         //Component loaded. Find its root native view.
         const componentView = componentRef.location.nativeElement;
         //Remove it from original native parent.
-        if (<any>componentView.parent) {
-            (<any>componentView.parent).removeChild(componentView);
-        }
+        this.viewUtil.removeChild(componentView.parent, componentView);
         //Add it to the new page
         page.content = componentView;