Ionic Components are not destroyed after navigation to another page

Question

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

Answer 1

Ionic cache pages on navigation and destroy and init hooks doesn't work.

If you need to do some actions on navigation you need to use ionic-router-outlet hooks.

• ionViewWillEnter - Fired when the component being routed to is about to animate in.
• ionViewDidEnter - Fired when the component being routed to has animated in.
• ionViewWillLeave - Fired when the component being routed from is about to animate.
• ionViewDidLeave - Fired when the component being routed from has animated.

You doesn't need to use any interfaces like OnInit or OnDestroy. Just use a hook.

Example:

@Component({   selector: 'app-login',   templateUrl: './login.component.html',   styleUrls: ['./login.component.scss'] }) export class LoginComponent {   ionViewDidLeave() {     // Do actions here   } }