diff --git a/nativescript-angular/common/detached-loader.ts b/nativescript-angular/common/detached-loader.ts
index a2dab3643..b98fbb3b9 100644
--- a/nativescript-angular/common/detached-loader.ts
+++ b/nativescript-angular/common/detached-loader.ts
@@ -1,4 +1,4 @@
-import { ComponentRef, ComponentFactory, ViewContainerRef, Component, Type, ComponentFactoryResolver, ChangeDetectorRef } from '@angular/core';
+import { ComponentRef, ComponentFactory, ViewContainerRef, Component, Type, ComponentFactoryResolver, ChangeDetectorRef, ApplicationRef, OnDestroy } from '@angular/core';
import { Trace } from '@nativescript/core';
/**
@@ -10,13 +10,20 @@ import { Trace } from '@nativescript/core';
selector: 'DetachedContainer',
template: ``,
})
-export class DetachedLoader {
+export class DetachedLoader implements OnDestroy {
+ private disposeFunctions: Array<() => void> = [];
// tslint:disable-line:component-class-suffix
- constructor(private resolver: ComponentFactoryResolver, private changeDetector: ChangeDetectorRef, private containerRef: ViewContainerRef) {}
+ constructor(private resolver: ComponentFactoryResolver, private changeDetector: ChangeDetectorRef, private containerRef: ViewContainerRef, private appRef: ApplicationRef) {}
private loadInLocation(componentType: Type): Promise> {
const factory = this.resolver.resolveComponentFactory(componentType);
- const componentRef = this.containerRef.createComponent(factory, this.containerRef.length, this.containerRef.injector);
+ const componentRef = factory.create(this.containerRef.injector);
+ this.appRef.attachView(componentRef.hostView);
+
+ this.disposeFunctions.push(() => {
+ this.appRef.detachView(componentRef.hostView);
+ componentRef.destroy();
+ });
// Component is created, built may not be checked if we are loading
// inside component with OnPush CD strategy. Mark us for check to be sure CD will reach us.
@@ -27,6 +34,10 @@ export class DetachedLoader {
return Promise.resolve(componentRef);
}
+ public ngOnDestroy() {
+ this.disposeFunctions.forEach((fn) => fn());
+ }
+
public detectChanges() {
this.changeDetector.markForCheck();
}
diff --git a/nativescript-angular/renderer.ts b/nativescript-angular/renderer.ts
index bc6f8a5f8..c91d0abc5 100644
--- a/nativescript-angular/renderer.ts
+++ b/nativescript-angular/renderer.ts
@@ -31,7 +31,8 @@ export class NativeScriptRenderer extends Renderer2 {
}
@profile
- insertBefore(parent: NgView, newChild: NgView, { previous, next }: ElementReference): void {
+ insertBefore(parent: NgView, newChild: NgView, refChild: NgView | ElementReference): void {
+ let { previous, next } = refChild instanceof View ? this.nextSibling(refChild) : refChild;
if (NativeScriptDebug.isLogEnabled()) {
NativeScriptDebug.rendererLog(`NativeScriptRenderer.insertBefore child: ${newChild} ` + `parent: ${parent} previous: ${previous} next: ${next}`);
}