Angular router does not load the mine page with the PathParam

Question

I'm studying about Angular and having some router troubles, because I'm trying to access one of the routes with a path parameter and having an error, the page doesn't load.

The main page:

The routed one:

The app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { CourseListComponents } from './courses/course-list.component';
import { StarComponent } from './star/star.component';
import { ReplacePipe } from './pipe/replace.pipe';
import { NavBar } from './nav-bar/nav-bar.component';
import { Error404Component } from './error-404/error-404.component';
import { InfoComponent } from './courses/course-info.component';

@NgModule({
  declarations: [
    AppComponent,
    CourseListComponents,
    StarComponent,
    ReplacePipe,
    NavBar,
    Error404Component,
    InfoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'courses', component: CourseListComponents
      },
      {
        path: 'course/info:id', component: InfoComponent
      },
      {
        path: '', redirectTo: 'courses', pathMatch: 'full'
      },
      {
        path: '**', component: Error404Component
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The InfoComponent class:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
    templateUrl: './course-info.component.html'
})
export class InfoComponent implements OnInit {

    courseId!: number;

    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit(): void {
        this.courseId = +this.activatedRoute.snapshot.paramMap.get('id')!
    }
}

The HTML component responsable by render the contents:

<h2>Course List</h2>

<div class="form-group row">
    <label class="col-sm 2 col-form-label">Filter by course name:</label>

    <div class="col-sm-10">
        <input [(ngModel)]="filter" class="form-control">
    </div>
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Image</th>
            <th>Name</th>
            <th>Price</th>
            <th>Code</th>
            <th>Release Date</th>
            <th>Rating</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let course of filteredCourses">
            <td><img [src]="course.imageUrl" alt="Courses icons" width="40" height="40"></td>
            <td>{{ course.name }}</td>
            <td>{{ course.price }}</td>
            <td>{{ course.code | lowercase | replace: '-' : ' ' }}</td>
            <td>{{ course.releaseDate | date: 'dd/MM/yyyy' }}</td>
            <td>
                <app-star-component [rating]="course.rating"></app-star-component>
            </td>
            <td>
                <a [routerLink]="['/course/info', course.id]" class="btn btn-primary mr-2">Info</a>
            </td>
        </tr>
    </tbody>
</table>

What it should render when the page is accessed:

<h2>Course ID: {{ courseId }}</h2>

Who wants to see the full code, it's at the link below:

https://github.com/LeoManzini/BootcampSantander/tree/main/Angular/course-manager

Someone who could help me with this, I'll be so thankfull!!

Answer 1

You have missed the slash in route:

path: 'course/info:id', component: InfoComponent

should be:

path: 'course/info/:id', component: InfoComponent