角度错误：[错误] NG8001：不是已知元素

Question

我使用 Angular 框架启动了一个小型 Web 项目，这标志着我第一次尝试 Angular 开发。我成功地完成了提供的教程和指南，并构建了我的前端。到目前为止，专门处理组件的工作进展顺利。然而，当我开始使用模块时，问题就开始了。在导入自定义模块和组件期间，我遇到了令人困惑的情况。

构建过程的 CLI 输出：

✘ [ERROR] NG8001: 'app-header' is not a known element:
1. If 'app-header' is an Angular component, then verify that it is part of this module.
2. If 'app-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message

其他组件同样的错误又出现两次。

尽管进行了研究并尝试了各种解决方案，但我发现自己仍然停留在同一点上。我不确定这个问题的根本原因。任何建议、帮助和最佳实践建议将不胜感激。

国王问好！

为了有效地指出情况，我想在这里发布代码结构。我只发布了一个组件和模块，因为其他两个 Components.ts 和 module.ts 文件构建相同。

app.module.ts

import { RouterOutlet } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

import { HeaderComponentModule } from './header/header.module';
import { CertificateManagementComponentModule } from './certificate-management/certificate-management.module';
import { FooterComponentModule } from './footer/footer.module';

import { AppComponent } from "./app.component";
import { HeaderComponent } from './header/header.component';
import { CertificateManagementComponent } from './certificate-management/certificate-management.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
    declarations: [ 
        AppComponent,
        HeaderComponent,
        CertificateManagementComponent,
        FooterComponent
    ],
    imports:[ 
        RouterOutlet,
        NgbModule,
        BrowserModule, 
        FormsModule, 
        ReactiveFormsModule,
        HeaderComponentModule,
        CertificateManagementComponentModule,
        FooterComponentModule
    ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
    bootstrap: [AppComponent]
})

export class AppModule { }

标头.module.ts

import { NgModule } from "@angular/core";
import { HeaderComponent } from "./header.component";

@NgModule({
    imports: [],
    exports: [HeaderComponent],
    declarations: [HeaderComponent],
    providers: [],
})

export class HeaderComponentModule {

}

header.component.ts

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

@Component({
  selector: 'app-header',
  standalone: true,
  imports:[],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}

根 src/app/app.component.html:

<main>
  <section>
    <app-header></app-header>
    <app-certificate-management></app-certificate-management>
    <app-footer></app-footer>
  </section>
</main>

Answer 1

从标头组件中删除独立和导入

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

@Component({
  selector: 'app-header',
  // standalone: true,
  // imports:[],
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent {

}

当一个组件是独立组件时，我们必须将其添加到模块的

imports

数组中，当它不是独立组件时，我们必须将其添加到模块的

declarations

数组中并导出！

import { NgModule } from "@angular/core";
import { HeaderComponent } from "./header.component";

@NgModule({
    imports: [],
    exports: [HeaderComponent],
    declarations: [HeaderComponent],
    providers: [],
})

export class HeaderComponentModule {

}