Ionic V5 后退按钮不会回到上一个

Question

I'm setting up an ionic application with multiple pages.

I use RouterModule from @angular/router for navigation.

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { DetailComponent } from './detail/detail.component';

const routes: Routes = [
  {
    path: "home",
    loadChildren: () =>
      import("./home/home.module").then((m) => m.HomePageModule),
  },
  {
    path: "",
    redirectTo: "home",
    pathMatch: "full",
  },
  {
    path: "detail", component: DetailComponent
  }
];

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

On the main page i got this:

<ion-col size="2" class="ion-align-self-end">
    <button type="submit" class="btn btn-primary" [routerLink]="['/detail']">Go</button>
</ion-col>

When i click on the button I navigate to the detailPage and there is my detail component:

<ion-header translucent>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button ></ion-back-button>
    </ion-buttons>
    <ion-title>Page Two</ion-title>
  </ion-toolbar>
</ion-header>
<ion-content fullscreen class="ion-padding">
  <p>Back-Button is displayed when there is history</p>
</ion-content>

The back button arrow is displayed but when I click on it nothing happens On the inspector i got the ion-router-outlet and it seems ok

<ion-router-outlet>
  <app-home>
  <app-detail>
</ion-router-outlet>

I also tried to use this:

<ion-back-button defaultHref="/"></ion-back-button>

Not better:(

Answer 1

I tried using pages instead of just component (using ionic CLI) and it worked just well. I don't know why yet, generating pages did also generate routing path like

{
    path: 'detail',
    loadChildren: () => import('./detail/detail.module').then( m => m.DetailPageModule)
}

Answer 2

Ionic by default uses LazyLoading, that means, when the route is accessed the Module where the path directs is downloaded.

So get used to Route towards Pages(components doesnt have a Module file). This is a really good performance trick and the recommended way.

Since Modules define their Component dependencies, then lazy loading helps not to load unneeded dependencies making Angular to be served faster.

Ion-router-outlet is a wrapper around the Angular router-outlet which adds some animations and a “odd behavior” of caching these Pages. While Angular always destroys the previous Component when a new Component is loaded in < router-outlet >, Ionic (when using < ion-router-outlet >) keeps in the DOM the Pages already Loaded. This is done to make smooth animations when moving from one Page to the previous one, it can reduce the number of request to the server but the cost is that Pages (and its child Components) already loaded doesnt trigger “ngOnInit” because they are already in the DOM and never gets destroyed.

Ionic, as said, doesnt destroy Pages but cache them and just uses CSS tricks to “hide” and “show” them. So if you want to force a refresh you would need to use “ionViewWillEnter” and related friends. Otherwise your Page will never get refreshed. (Usually in ngOnInit a call to a service is done to perform a request which is binded to the view)