Angular 17引入Heroes组件后启动报NG8001错误求助

这个错误的核心原因是Angular 17默认启用独立组件模式，组件不再通过NgModule自动声明，必须在使用它的父组件中显式导入。以下是具体解决步骤：

步骤1：确认Heroes组件的独立属性 #

打开src/app/heroes/heroes.component.ts，检查@Component装饰器中是否包含standalone: true（Angular CLI创建组件时默认会添加该配置）：

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

@Component({
  selector: 'app-heroes',
  standalone: true,
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent {
  // 组件内部逻辑
}

步骤2：在AppComponent中导入Heroes组件 #

修改src/app/app.component.ts，导入Heroes组件并添加到@Component的imports数组中：

import { Component } from '@angular/core';
import { HeroesComponent } from './heroes/heroes.component'; // 导入Heroes组件

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [HeroesComponent], // 将Heroes组件加入到imports数组
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'your-app-name';
}

若使用NgModule模式（非默认） #

如果你手动创建了NgModule而非使用独立组件，需在app.module.ts的declarations数组中声明Heroes组件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HeroesComponent } from './heroes/heroes.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    HeroesComponent // 添加Heroes组件到声明列表
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

完成以上修改后，重新执行ng serve --open，错误即可解决。

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