如何在StackBlitz的Angular项目中正确添加组件？

针对你遇到的两个错误，核心原因是当前项目的根组件（AppComponent）是独立组件（Standalone Component），但生成的Test组件默认是基于NgModule的非独立组件，两者的导入规则不匹配。以下是两种可行的解决方法：

方法一：将Test组件改为独立组件 #

1. 编辑src/test/test.component.ts，在@Component装饰器中添加standalone: true属性：

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

@Component({
  selector: 'app-test',
  standalone: true, // 新增独立组件标识
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent { }

2. 删除自动生成的src/test/test.module.ts文件（独立组件无需依赖NgModule）。
3. 在src/app/app.component.ts中，将TestComponent添加到组件的imports数组：

import { Component } from '@angular/core';
import { TestComponent } from '../test/test.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TestComponent], // 导入独立组件
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-nbb1n5';
}

此时即可在app.component.html中正常使用<app-test></app-test>标签。

方法二：通过NgModule导入非独立组件 #

如果不想修改Test组件的模式，可以通过NgModule来关联：

1. 确保src/test/test.module.ts正确声明并导出Test组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test.component';

@NgModule({
  declarations: [TestComponent],
  imports: [CommonModule],
  exports: [TestComponent] // 必须导出才能在外部组件中使用
})
export class TestModule { }

2. 在src/app/app.component.ts中，将TestModule添加到组件的imports数组：

import { Component } from '@angular/core';
import { TestModule } from '../test/test.module';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [TestModule], // 导入组件所属的NgModule
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-nbb1n5';
}

完成后即可在模板中使用<app-test>标签。

内容的提问来源于stack exchange，提问作者sam sergiy klok