title: Ionic / Angular: Error: Cannot match any routes. URL Segment
body: <p>I get this error, when I want to open the detail view from a component in my list. I'm working with Ionic 4.</p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'algodetail'</p>
  </blockquote>
  
  <p>I found many topics with this error, but didn't find a solution there. I'm not sure, perhaps just a misspelling?</p>
  
  <p>The List view:</p>
  
  <pre><code>&lt;ion-content padding&gt;
    &lt;ion-card *ngFor="let algo of algoList | async" routerLink="/algodetail/{{algo.id}}"&gt;
      &lt;ion-card-header&gt;
        {{ algo.title }}
      &lt;/ion-card-header&gt;
    &lt;/ion-card&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>Routes in app-routing.module.ts:</p>
  
  <pre><code>const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
    { path: 'algodetail/:id', loadChildren: './algodetail/algodetail.module#AlgodetailPageModule' } 
  ];
  </code></pre>
  
  <p>algodetail.page.ts:</p>
  
  <pre><code>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&lt;Algo&gt;
  
    constructor(private firestoreService: FirestoreService, private route: ActivatedRoute ) { 
  
    }
  
    ngOnInit() {
  
    }
  
  }
  </code></pre>
  
  <p>algodetail.module.ts</p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>My Filesystem</p>
  
  <p><a href="https://i.stack.imgur.com/jBOLS.png" rel="noreferrer"><img src="https://i.stack.imgur.com/jBOLS.png" alt="Filesystem"></a></p>