Angular路由无法加载HTML文件：详情路由失效求助

• 修正路由路径格式
  Angular路由配置中，path属性不需要以斜杠/开头，你的详情路由路径写法错误会导致路由匹配异常。修改路由配置：

  const routes: Routes = [
    {path : '', redirectTo: '/courses', pathMatch: 'full'},
    {path : 'courses', component: CoursesComponent},
    {path : 'courses/:id', component: CoursesDetailComponent} // 去掉路径开头的斜杠
  ]
  

• 确认CoursesDetailComponent的基础实现
  确保该组件的模板（courses-detail.component.html）有实际内容输出，比如：

  <h2>课程详情ID：{{ courseId }}</h2>
  

  同时组件类需正确获取路由参数并赋值：

  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  
  @Component({
    selector: 'app-courses-detail',
    templateUrl: './courses-detail.component.html',
    styleUrls: ['./courses-detail.component.css']
  })
  export class CoursesDetailComponent implements OnInit {
    courseId: string | null = null;
  
    constructor(private route: ActivatedRoute) { }
  
    ngOnInit(): void {
      this.courseId = this.route.snapshot.paramMap.get('id');
    }
  }
  

• 检查路由出口是否存在
  确认AppComponent的模板中包含<router-outlet></router-outlet>标签，Angular必须通过这个标签渲染路由对应的组件。

• 验证组件声明与导入
  确保CoursesDetailComponent已经在AppModule（或对应特性模块）中声明并导入：

  import { CoursesDetailComponent } from './courses-detail/courses-detail.component';
  import { CoursesComponent } from './courses/courses.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      CoursesComponent,
      CoursesDetailComponent // 确认该组件已声明
    ],
    imports: [
      BrowserModule,
      AppRoutingModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  

内容的提问来源于stack exchange，提问作者Carlos Borges