Ionic Components are not destroyed after navigation to another page

Issue

I am currently working on legacy code where the project is an Angular 6, Ionic 4 hybrid. All the feature modules are being lazy loaded.

The problem is that after navigating to another page I can see on the memory tab on nav tool that the previous page is still there and the ngOnDestroy hasn't really been fired.

To give you more details, my app-routing-module is:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';


 @NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: false, useHash: false  
 })],
  exports: [RouterModule],
 })
 export class AppRoutingModule { }  

My routes are:

  export const routes: Routes = [
     { 
       path: '', redirectTo: '/home',
       pathMatch: 'full' 
     },
     { 
     path: 'accounts',
     loadChildren: 
    '../pages/accounts/accounts.page.module#AccountsPageModule',
      canActivate: [AuthGuardService] 
     },
     {
     path: 'administration',
     loadChildren:      
'../pages/administration/administration.page.module#AdministrationPageModule' 
     },
    { 
     path: 'bookings',
     loadChildren: 
     '../pages/bookings/bookings.page.module#BookingsPageModule',
     canActivate: [AuthGuardService],

  },

and in the app.component.html, together with a ion-menu structure the router:

 <ion-router-outlet id="content" swipeBackEnabled="false"></ion-router-outlet>

And finally in the navbar component on every link I use the [routerLink]="['/something']" directive of the router.

The navigation is working properly. The issue is that after some time the site is very slow as it still has every component, page and module in memory even though the user is navigated to another page and Angular should have destroyed the previous.

I am using:

• Angular: 6.1.7
• Ionic: 4.1.2

Solution

I finally figured out why.

• I completely removed ionic from the application and use only Angular router for navigation.

Now ngOnDestroy is being called every time i navigate to another page and the page itself is removed from the DOM.

Answered By - kostas.kapasakis