Angular-NG8001 未知元素错误。怎么解决？

Question

我的 Angular 项目有问题。我有一个项目结构：。在我的 app.module.ts 中，代码如下：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { bmiComponent } from './bmi/bmi.component';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

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

在 bmi 文件夹中，我有一个 bmi.component.ts ，其中包含以下代码：

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

@Component({
    selector: 'app-bmi-calculator', 
    standalone : true,
    templateUrl: '.bmi.component.html',
    styleUrls: [
        '.bmi.component.css'
    ]
})
export class bmiComponent{
    weight : number;
    height : number;

constructor(){
    this.weight = 50;
    this.height = 1.6;
    }
}

在我的 app.component.html 中，如果我写了标签，我会收到错误： NG8001：“app-bmi-calculator”不是已知元素：

1. 如果“app-bmi-calculator”是 Angular 组件，则验证它是否包含在该组件的“@Component.imports”中。
2. 如果“app-bmi-calculator”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@Component.schemas”以抑制此消息。 我该如何解决该错误？ 谢谢您的帮助！

我在bmi.component.ts独立中尝试过：true int @Component块，但没有解决问题。

Answer 1

独立组件是一种不属于任何特定 Angular 模块的组件。在 Angular 版本 14 之前，当您创建组件时，通常必须将其包含在模块的声明数组中；否则，Angular 会在编译过程中抛出错误。

最好的解决方案是创建一个项目，其所有组件都是独立的。

但在您的情况下，您可以使用模块并使您的 app.component.ts 独立并在 app.config.ts 中引导它。从 AppModule 的声明中删除 bmiComponent 并将其插入到 app.component.ts 的导入数组中。

@Component({
  selector: 'app-bmi-calculator', 
  standalone : true,
  imports: [bmiComponent, ...],
  .
  .
  .
})
export class AppComponent{
  .
  .
}

重要：

但是如果你的 app.component.ts 不是独立的，并且你想使用 bmiComponent 作为独立的，你必须从 AppModule 的声明中删除 bmiComponent 并将其插入到 AppModule 的导入数组中。