Angular+NgRx中组件未被识别（NG8001）问题的解决方法

问题背景 #

在Angular+NgRx项目中使用<app-read-delete>组件时触发NG8001错误，尝试过独立组件和@NgModule两种配置方式，VSCode及Angular扩展显示代码无异常，但Angular编译器无法识别AppModule中引入的ReadDeleteComponent。

错误信息 #

Building...✘ [ERROR] NG8001: 'app-read-delete' is not a known element:

1. If 'app-read-delete' is an Angular component, then verify that it is part of this module.

2. If 'app-read-delete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. [plugin angular-compiler]

   src/app/app.component.html:3:4:
   3 │
   ╵ ~~~~~~~~~~~~~~~~~

Error occurs in the template of component AppComponent.

src/app/app.component.ts:5:15:
  5 │   templateUrl: './app.component.html',
    ╵                ~~~~~~~~~~~~~~~~~~~~~~

Application bundle generation failed. [2.311 seconds]
Watch mode enabled. Watching for file changes...

相关代码文件 #

src/app/app.component.html #

<app-read-delete></app-read-delete>

src/app/app.component.ts #

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngrx-store-hello-world';
}

src/app/app.module.ts #

// app.module.ts
import { StoreModule } from "@ngrx/store";
import { heroReducer } from "./heroes/reducers/hero-reducer";
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { ReadDeleteModule } from "./heroes/components/read-delete/read-delete.module";
import { AppComponent } from "./app.component";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ReadDeleteModule, // Import the module only once
    StoreModule.forRoot(
      { heroes: heroReducer }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/heroes/components/read-delete.component.ts #

// src/app/heroes/components/read-delete.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-read-delete',
  templateUrl: './read-delete.component.html',
  styleUrls: ['./read-delete.component.scss'],
})

export class ReadDeleteComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

src/app/shared/read-delete.module.ts #

// src/app/shared/read-delete.module.ts
import { NgModule } from '@angular/core';
import { ReadDeleteComponent } from './read-delete.component';

@NgModule({
  declarations: [ReadDeleteComponent],
  exports: [ReadDeleteComponent]
})
export class ReadDeleteModule { }

核心问题分析与解决方案 #

问题1：模块导入路径错误 #

AppModule中导入ReadDeleteModule的路径指向了./heroes/components/read-delete/read-delete.module，但实际该模块文件位于src/app/shared/目录下，导致Angular无法正确加载模块。

修复步骤：
修改app.module.ts中的导入路径：

// 将
import { ReadDeleteModule } from "./heroes/components/read-delete/read-delete.module";
// 改为
import { ReadDeleteModule } from "./shared/read-delete.module";

问题2：组件导入路径错误 #

ReadDeleteModule中导入ReadDeleteComponent的路径为./read-delete.component，但组件实际位于../heroes/components/目录下，导致模块无法正确声明组件。

修复步骤：
修改src/app/shared/read-delete.module.ts中的导入路径：

// 将
import { ReadDeleteComponent } from './read-delete.component';
// 改为
import { ReadDeleteComponent } from '../heroes/components/read-delete.component';

额外验证（若使用独立组件） #

如果采用独立组件模式，需确保ReadDeleteComponent添加了standalone: true配置，并在AppComponent或AppModule中直接导入该组件：

// 在read-delete.component.ts中添加standalone配置
@Component({
  selector: 'app-read-delete',
  templateUrl: './read-delete.component.html',
  styleUrls: ['./read-delete.component.scss'],
  standalone: true // 新增配置
})
export class ReadDeleteComponent implements OnInit { /* ... */ }

// 在app.component.ts中导入组件
import { Component } from '@angular/core';
import { ReadDeleteComponent } from './heroes/components/read-delete.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  imports: [ReadDeleteComponent] // 新增导入
})
export class AppComponent { /* ... */ }

环境信息 #

Angular CLI: 17.0.5
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin x64

内容的提问来源于stack exchange，提问作者Syed Shaheer Ali Zaidi