[SOLVED] Routing Issue [Ionic 5]

Hi everyone - I’ve been away from Ionic for a year and the routing in Ionic 5 (or better yet, Angular) is messing with me. I want to pass an ID to a page when it’s called however when I do so I get this error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'edit-printer/-Ma1zLBxs3EHhnsLtzLw'
Error: Cannot match any routes. URL Segment: 'edit-printer/-Ma1zLBxs3EHhnsLtzLw'

As context, edit-printer is the page and ~Ma1… is the firebase ID I am passing to the edit-printer page. I am linking to the edit-printer page via the HTML of my home page as follows:

<button ion-button clear [routerLink]="['/edit-printer/', printer.$key]">

And finally in edit-printer.page.ts:

export class EditPrinterPage implements OnInit {
  updatePrinterForm: FormGroup;
  id: any;

  constructor(
    private prtService: PrinterService,
    private actRoute: ActivatedRoute,
    private router: Router,
    public fb: FormBuilder
  ) {
    this.id = this.actRoute.snapshot.paramMap.get('id');
    this.prtService.getPrinter(this.id).valueChanges().subscribe(res => {
      this.updatePrinterForm.setValue(res);
    });
  }

I am sure I am doing something stupid but why won’t this work?

The problem of “Cannot match any routes” isn’t really a problem of your PrinterPage, but of the routing configuration of your app!

You should check that in whatever you use to declare your routes (normally app-routing.module.ts) you have an entry that covers the URL like:

{
    path: 'edit-printer/:id',
    loadChildren: () => import('../editPrinter/editPrinter.module').then(m => m.EditPrinterPageModule)
}

Of course the path to that file depends on your file structure.

@Saimon thank yuou, doh, I was looking in the wrong place. In my routing configuration I have this defined, which I assume is not correct?

  {
    path: 'edit-printer',
    loadChildren: () => import('./edit-printer/edit-printer.module').then( m => m.EditPrinterPageModule)
  }

Oh how foolish I Was, so yeah, in app-routing.module.ts… I had defined edit-printer without the /:id to accept the parameter. Your example made it obvious to me. Changing my path to this instantly fixed the issue, thank you so much, I learned something new today.

  {
    path: 'edit-printer/:id',
    loadChildren: () => import('./edit-printer/edit-printer.module').then( m => m.EditPrinterPageModule)
  }