Fix/ns views not cleaned on removal

nativescript-angular/directives/templated-items-comp.ts

@@ -100,6 +100,11 @@ export abstract class TemplatedItemsComponent implements DoCheck, OnDestroy, Aft
 
     ngOnDestroy() {
         this.templatedItemsView.off("itemLoading", this.onItemLoading, this);
+        this.templatedItemsView = null;
+
+        if (this._templateMap) {
+            this._templateMap.clear();
+        }
     }
 
     private setItemTemplates() {

nativescript-angular/renderer.ts

@@ -73,6 +73,16 @@ export class NativeScriptRendererFactory implements RendererFactory2 {
         this.componentRenderers.set(type.id, renderer);
         return renderer;
     }
+
+    ngOnDestroy(): void {
+        if (isLogEnabled()) {
+            traceLog(`NativeScriptRendererFactory.ngOnDestroy()`);
+        }
+
+        while (this.rootNgView && this.rootNgView.firstChild) {
+            this.viewUtil.removeChild(this.rootNgView, this.rootNgView.firstChild);
+        }
+    }
 }
 
 export class NativeScriptRenderer extends Renderer2 {
@@ -129,7 +139,7 @@ export class NativeScriptRenderer extends Renderer2 {
     @profile
     parentNode(node: NgView): any {
         if (isLogEnabled()) {
-            traceLog(`NativeScriptRenderer.parentNode for node: ${node}`);
+            traceLog(`NativeScriptRenderer.parentNode for node: ${node} is ${node.parentNode}`);
         }
         return node.parentNode;
     }

nativescript-angular/router/ns-location-strategy.ts

@@ -744,4 +744,13 @@ export class NSLocationStrategy extends LocationStrategy {
     private getOutletKey(path: string, outletName: string): string {
         return path ? path + "-" + outletName : outletName;
     }
+
+    ngOnDestroy() {
+        if (isLogEnabled()) {
+            routerLog("NSLocationStrategy.ngOnDestroy()");
+        }
+
+        this.outlets = [];
+        this.currentOutlet = null;
+    }
 }

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

@@ -198,7 +198,16 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
             });
             this.locationStrategy.clearOutlet(this.frame);
         } else {
-            log("NSLocationStrategy.ngOnDestroy: no outlet available for page-router-outlet");
+            log("PageRouterOutlet.ngOnDestroy: no outlet available for page-router-outlet");
+        }
+
+        if (this.isActivated) {
+            const c = this.activated.instance;
+            this.activated.hostView.detach();
+            destroyComponentRef(this.activated);
+
+            this.deactivateEvents.emit(c);
+            this.activated = null;
         }
     }
 
@@ -348,9 +357,9 @@ export class PageRouterOutlet implements OnDestroy { // tslint:disable-line:dire
         // Component loaded. Find its root native view.
         const componentView = componentRef.location.nativeElement;
         // Remove it from original native parent.
-        this.viewUtil.removeChild(componentView.parent, componentView);
+        this.viewUtil.removeChild(componentView.parent, componentView, false);
         // Add it to the new page
-        page.content = componentView;
+        this.viewUtil.insertChild(page, componentView);
 
         const navigatedFromCallback = (<any>global).Zone.current.wrap((args: NavigatedData) => {
             if (args.isBackNavigation) {

nativescript-angular/view-util.ts

@@ -157,9 +157,10 @@ export class ViewUtil {
         return next;
     }
 
-    public removeChild(parent: View, child: View) {
+    public removeChild(parent: View, child: View, removeGrandchildren = true) {
         if (isLogEnabled()) {
-           traceLog(`ViewUtil.removeChild parent: ${parent} child: ${child}`);
+           traceLog(`ViewUtil.removeChild parent: ${parent} child: ${child} `
+            + `remove grandchildren: ${removeGrandchildren}`);
         }
 
         if (!parent) {
@@ -169,6 +170,17 @@ export class ViewUtil {
         const extendedParent = this.ensureNgViewExtensions(parent);
         const extendedChild = this.ensureNgViewExtensions(child);
 
+        // Remove the child's children and their children
+        // Unless called from PageRouterOutlet when the child is moved from once parent to another.
+        while (extendedChild && extendedChild.firstChild && removeGrandchildren) {
+            const grandchild = extendedChild.firstChild;
+            if (isLogEnabled()) {
+                traceLog(`ViewUtil.removeChild parent: ${parent} child: ${extendedChild} grandchild: ${grandchild}`);
+            }
+
+            this.removeChild(extendedChild, grandchild);
+        }
+
         this.removeFromQueue(extendedParent, extendedChild);
         this.removeFromVisualTree(extendedParent, extendedChild);
     }
@@ -181,6 +193,7 @@ export class ViewUtil {
         if (parent.firstChild === child && parent.lastChild === child) {
             parent.firstChild = null;
             parent.lastChild = null;
+            child.nextSibling = null;
             return;
         }
 
@@ -196,6 +209,8 @@ export class ViewUtil {
         if (previous) {
             previous.nextSibling = child.nextSibling;
         }
+
+        child.nextSibling = null;
     }
 
     // NOTE: This one is O(n) - use carefully
@@ -240,7 +255,7 @@ export class ViewUtil {
 
     private removeFromVisualTree(parent: NgView, child: NgView) {
         if (isLogEnabled()) {
-            traceLog(`ViewUtil.findPreviousElement parent: ${parent} child: ${child}`);
+            traceLog(`ViewUtil.removeFromVisualTree parent: ${parent} child: ${child}`);
         }
 
         if (parent.meta && parent.meta.removeChild) {
@@ -249,8 +264,11 @@ export class ViewUtil {
             this.removeLayoutChild(parent, child);
         } else if (isContentView(parent) && parent.content === child) {
             parent.content = null;
-            parent.lastChild = null;
-            parent.firstChild = null;
+        } else if (child.nodeName === "DetachedContainer") {
+            // Skip - DetachedContainer is... well detached from its parent
+            // Used with ListViews and other TemplatedItemsComponent views.
+        } else if (child.nodeName === "FormattedString" || child.nodeName === "Span") {
+            // Removing FormattedString and its Spans from a Label throws an exception
         } else if (isView(parent)) {
             parent._removeView(child);
         }
@@ -273,14 +291,15 @@ export class ViewUtil {
     }
 
     public createView(name: string): NgView {
-        if (isLogEnabled()) {
-            traceLog(`Creating view: ${name}`);
-        }
-
+        const originalName = name;
         if (!isKnownView(name)) {
             name = "ProxyViewContainer";
         }
 
+        if (isLogEnabled()) {
+            traceLog(`Creating view: ${originalName} ${name}`);
+        }
+
         const viewClass = getViewClass(name);
         const view = <NgView>new viewClass();
         const ngView = this.setNgViewExtensions(view, name);
@@ -300,6 +319,10 @@ export class ViewUtil {
     }
 
     private setNgViewExtensions(view: View, name: string): NgView {
+        if (isLogEnabled()) {
+            traceLog(`Make into a NgView view: ${view} name: "${name}"`);
+        }
+
         const ngView = view as NgView;
         ngView.nodeName = name;
         ngView.meta = getViewMeta(name);