Angular带PathParam的路由无法加载course信息页问题求助

我正在学习Angular，遇到了路由相关问题：尝试访问带PathParam路径参数的路由时出现错误，页面无法加载。

主页面截图：

目标路由页截图：

app.module.ts文件代码如下：

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 { }

InfoComponent类代码如下：

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')!
    }
}

负责渲染课程列表的HTML组件代码如下：

<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>

路由访问时预期渲染的内容如下：

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

完整代码可访问对应GitHub仓库查看：https://github.com/LeoManzini/BootcampSantander/tree/main/Angular/course-manager
恳请各位开发者帮忙定位解决问题，不胜感激！

内容的提问来源于stack exchange，提问作者Leonardo Manzini