LazyLoading routing each time creates new Component in memory and does not destroy it after loading new same component

Question

I use:

• nativescript 4.2
• angular 6.0.0
• page-router-outlet

• navigation from page to page by 'lazyloading' (lateral navigation):

  export const routes = [ { path: "", loadChildren: "~/pages/start-page/start-page.module#StartPageModule" },
  { path: "login", loadChildren: "~/pages/login/login.module#LoginModule" }, ...

• navigate with RouterExtensions with 'clearHistory = true'

When i navigate from page 'Home' to another page and return to 'Home' i see in memory two component 'HomeComponent'. When I repeat the operation their becomes three, four, five, .....

chrome debug window

Answer 1

Try to this for lazy loading routing.

app-routing.module.ts :-

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
{ path: "", redirectTo: "/login", pathMatch: "full" },
{ path: "startpage", loadChildren: "~/pages/start-page/start-page.module#StartPageModule" },
{ path: "login", loadChildren: "~/pages/login/login.module#LoginModule" }
]

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

Redirection Code:-

import { NgZone } from "@angular/core";
import { isIOS } from "tns-core-modules/platform";
import { RouterExtensions } from "nativescript-angular/router";

constructor(private zone: NgZone,
private _routerExtensions: RouterExtensions){ }

gotoStartPage() {
setTimeout(() => {
    this.zone.run(() => {
        this._routerExtensions.navigate(["startpage"], {
            clearHistory: (isIOS) ? true : false,
        });
    });
}, 500);
}