Angular 2新手使用自定义组件报错，寻求解决方案

我是Angular新手，创建组件后使用时出现错误，相关代码如下：

app.component.ts

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

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

ProjectListComponent（文件路径：./components/project-list/project-list.component.ts）

import { Component, OnInit } from '@angular/core';
import { ProjectService } from '../../services/project.service';
import { Project } from '../../models/Project';

@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.scss']
})
export class ProjectListComponent implements OnInit {

  projects: Project[] = [];

  constructor(private projectService: ProjectService) { }

  ngOnInit(): void {
    this.projectService.getProjects().subscribe(data => {
      this.projects = data;
    });
  }

}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ProjectListModule } from './components/project-list/project-list.module';  

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

我在app.component.html中使用组件：<app-project-list />

错误信息 #

• 若app-project-list是Angular组件，请确认它属于当前模块。
• 若app-project-list是Web组件，请将'CUSTOM_ELEMENTS_SCHEMA'添加到该组件的@NgModule.schemas中以抑制此消息。

解决方法 #

错误根源是你虽然在AppModule中导入了ProjectListModule，但该模块未将ProjectListComponent导出，导致AppComponent所在模块无法识别该组件。

1. 检查/创建project-list.module.ts
   确保该模块文件存在，且内容如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ProjectListComponent } from './project-list.component';
// 若ProjectService用到HttpClient，需导入此模块
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    ProjectListComponent // 声明组件属于当前模块
  ],
  imports: [
    CommonModule,
    HttpClientModule // 按需添加
  ],
  exports: [
    ProjectListComponent // 导出组件，允许其他模块使用
  ]
})
export class ProjectListModule { }

2. 确保服务全局可用
   修改ProjectService，使用providedIn: 'root'让服务全局可注入，无需手动添加到模块的providers数组：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Project } from '../models/Project';

@Injectable({
  providedIn: 'root'
})
export class ProjectService {
  constructor(private http: HttpClient) { }

  getProjects(): Observable<Project[]> {
    return this.http.get<Project[]>('你的API接口地址');
  }
}

完成以上修改后，重新启动项目，错误即可解决。

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