Angular组件无法在app.component.html中使用，ng serve报错求助

这个报错的核心是Angular找不到你在模板里使用的<app-test>组件，分两种场景针对性处理：

场景1：<app-test>是你自己创建的Angular组件 #

情况A：项目使用NgModule模式（存在app.module.ts文件） #

1. 打开app.module.ts，确认已正确导入TestComponent
2. 将TestComponent添加到@NgModule的declarations数组中
   示例代码：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   import { TestComponent } from './test/test.component'; // 注意路径要和你的文件结构匹配
   
   @NgModule({
     declarations: [
       AppComponent,
       TestComponent // 必须在这里声明组件
     ],
     imports: [BrowserModule],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

情况B：项目使用独立组件模式（Angular14+默认模式，组件带有standalone: true标识） #

1. 打开app.component.ts，确认已正确导入TestComponent
2. 将TestComponent添加到@Component的imports数组中
   示例代码：

   import { Component } from '@angular/core';
   import { TestComponent } from './test/test.component'; // 注意路径要和你的文件结构匹配
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css'],
     standalone: true,
     imports: [TestComponent] // 必须在这里导入组件
   })
   export class AppComponent {
     title = 'your-app-name';
   }
   

场景2：<app-test>是第三方Web组件/自定义元素 #

如果<app-test>不是你编写的Angular组件，而是外部Web组件，需要添加CUSTOM_ELEMENTS_SCHEMA让Angular识别：

情况A：NgModule模式 #

在app.module.ts的@NgModule中添加schemas数组：

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

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA], // 添加该行
  bootstrap: [AppComponent]
})
export class AppModule { }

情况B：独立组件模式 #

在app.component.ts的@Component中添加schemas数组：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA] // 添加该行
})
export class AppComponent {
  title = 'your-app-name';
}

额外检查点 #

• 确认test.component.ts中的selector字段值确实是app-test，和模板里使用的标签一致
• 确认组件导入路径正确，比如TestComponent在src/app/test/test.component.ts时，导入路径./test/test.component是正确的

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