Ionic5 / Angular9: navController.navigateForward not working (Error: Cannot match any routes.)

Question

I'm new to Ionic 5 and trying to use Angular 9 lazy loading with navController.navigateForward, but it's not working.

I don't know if it's something in relation to the way I'm setting up the routers, or what. And I couldn't find official information about navigateForward anywhere.

When I click "go to details" (below), I get an error Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details/'

This is the TabsPage:

tabs-routing.module.ts router:

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: 'films',
        pathMatch: 'full'
      },
      {
        path: 'films',
        children: [
          {
            path: '',
            loadChildren: () => import('../films/films.module').then(m => m.FilmsPageModule),
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'people',
        children: [
          {
            path: '',
            loadChildren: () => import('../people/people.module').then(m => m.PeoplePageModule),
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'planets',
        children: [
          {
            path: '',
            loadChildren: () => import('../planets/planets.module').then(m => m.PlanetsPageModule),
            pathMatch: 'full'
          }
        ]
      }
    ]
  }
];

films.page.html :

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Films</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button expand="full" (click)="openDetails()">Go to Details</ion-button>
  <ion-button expand="full" (click)="goToPlanets()">Switch to Planets</ion-button>
</ion-content>

films.page.ts :

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';

@Component({
  selector: 'app-films',
  templateUrl: './films.page.html',
  styleUrls: ['./films.page.scss'],
  providers: [NavController, NavParams]
})
export class FilmsPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  ngOnInit() {
  }

  openDetails() {
    // original code adapted to ionic 5
    // this.navCtrl.push('FilmDetailsPage');

    this.navCtrl.navigateForward('/details/'); // not working !!
  }

  goToPlanets() {
    // original code adapted to ionic 5
    // this.navCtrl.parent.select(2);

    this.navCtrl.navigateRoot('/tabs/planets'); // working fine
  }

}

films-routing.module.ts router:

const routes: Routes = [
  {path: '', component: FilmsPage, children: [

    // if I don't comment this, I get an error
    // {path: '', redirectTo: 'details'},

    {path:'details', children: [
        {
          path: '', loadChildren: ()=> import('../film-details/film-details.module').then(m => m.FilmDetailsPageModule), pathMatch: 'full'
        }
      ]
    }
  ]}
];

film-details.page.html :

<ion-header>
  <ion-toolbar>
    <ion-title>filmDetails</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

Answer 1

I did the same with a detail page but we did it with a variable id. Your case should be this

const routes: Routes = [
{
    path: '', 
    component: FilmsPage
},
{
    path: 'details',
    children: [
    {
       path: '', 
       loadChildren: () => 
       import('../film-details/film-details.module')
           .then(m => m.FilmDetailsPageModule), 
       pathMatch: 'full'
    }]
}
];

To set the id instead of "detail" to the route so you can access it via deep linking for the future.

const routes: Routes = [
{
    path: '', 
    component: FilmsPage
},
{
    path: ':filmsID',
    children: [
    {
       path: '', 
       loadChildren: () => 
       import('../film-details/film-details.module')
           .then(m => m.FilmDetailsPageModule), 
    }]
}
];