Ionic / Angular: Error: Cannot match any routes. URL Segment

Question

I get this error, when I want to open the detail view from a component in my list. I'm working with Ionic 4.

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'algodetail'

I found many topics with this error, but didn't find a solution there. I'm not sure, perhaps just a misspelling?

The List view:

<ion-content padding>
  <ion-card *ngFor="let algo of algoList | async" routerLink="/algodetail/{{algo.id}}">
    <ion-card-header>
      {{ algo.title }}
    </ion-card-header>
  </ion-card>
</ion-content>

Routes in app-routing.module.ts:

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'algodetail/:id', loadChildren: './algodetail/algodetail.module#AlgodetailPageModule' } 
];

algodetail.page.ts:

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { Algo } from '../models/algo';
import { FirestoreService } from '../services/data/firestore.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-algodetail',
  templateUrl: './algodetail.page.html',
  styleUrls: ['./algodetail.page.scss'],
})
export class AlgodetailPage implements OnInit {
  public algo: Observable<Algo>

  constructor(private firestoreService: FirestoreService, private route: ActivatedRoute ) { 

  }

  ngOnInit() {

  }

}

algodetail.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { AlgodetailPage } from './algodetail.page';

const routes: Routes = [
  {
    path: '',
    component: AlgodetailPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [AlgodetailPage]
})
export class AlgodetailPageModule {}

My Filesystem

Answer 1

Looking at the error message, it appears that the id is not set. If you turn on enableTracing on the route, does it give you any more information? Can you confirm that the id value is indeed being set for the route?

Answer 2

my solution:
1-In List page
a-constructor(private router: Router) {}
b-method: this.router.navigateByUrl('/algodetail/' + paramValue);

2-In detail page
a-constructor(private router: ActivatedRoute) {}
b-get value: this.router.snapshot.params.paramValue;