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

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? — DeborahK
@DeborahK You are right, for routerLink="/algodetail/{{algo.id}}" I need a value with id in my firebase collection, I thought that is the key from the document. You can add this as an answer, I will accept it. — Laire

DeborahK DeborahK · Accepted Answer · 2018-11-29T15:52:00

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?

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

2 Answers