Angular新手遭遇NG8001、TS2306、NG1010错误求助

错误列表 #

• src/app/app.component.html:2:1 - error NG8001: 'courses' 不是已知元素
  • 提示：若'courses'是Angular组件，请确认它已加入当前模块；若要允许任意元素，可在组件的@NgModule.schemas中添加'NO_ERRORS_SCHEMA'。
• src/app/app.module.ts:6:34 - error TS2306: 文件'C:/Users/user/hello-world/src/app/courses.component.ts'不是模块
• src/app/app.module.ts:9:17 - error NG1010: AppModule的NgModule.declarations中位置1的值不是引用，无法静态确定该值

问题根源 #

所有错误的核心原因是courses.component.ts中模板字符串的转义符使用错误：模板里的<和>被不必要地转义，导致TypeScript无法将该文件识别为有效的Angular模块，进而引发后续的导入失败、组件未声明等连锁错误。

修复方案 #

1. 修正courses.component.ts #

将模板中的转义符移除，直接使用正常的HTML标签：

import { Component } from "@angular/core";

@Component({
  selector: 'courses',
  template: `<h2>Courses</h2>`
})
export class CoursesComponent {
}

2. 验证其他文件（无需修改） #

你的app.component.html和app.module.ts代码逻辑本身是正确的，只要courses.component.ts修复后，组件能被正常导入，另外两个文件无需改动：

app.component.html

<h1>Angular</h1>
<courses></courses>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoursesComponent } from './courses.component';

@NgModule({
  declarations: [
    AppComponent,
    CoursesComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

验证修复 #

执行ng serve重启开发服务器，此时所有错误应该都会消失，页面会正常显示<h1>Angular</h1>和<h2>Courses</h2>内容。

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