Angular报错selector is not a known element故障排查咨询

• 同模块下使用组件：确认组件已添加到当前模块@NgModule的declarations配置中，仅配置imports不会生效
• 跨模块使用组件：首先在组件所属模块的exports配置中导出该组件，再在使用组件的模块的imports配置中引入组件所属的完整模块
• Angular 14+ 独立组件使用：如果组件标记了standalone: true，需要在使用它的组件的@Component的imports配置中直接引入该组件，或在所属模块的imports中引入该独立组件

配置示例 #

同模块使用配置 #

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 引入你创建的组件
import { Component1 } from './component1/component1.component';

@NgModule({
  declarations: [
    AppComponent,
    Component1 // 必须添加到declarations数组
  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

跨模块使用配置 #

// 组件所属共享模块 shared.module.ts
import { NgModule } from '@angular/core';
import { Component1 } from './component1.component';

@NgModule({
  declarations: [Component1],
  exports: [Component1] // 必须导出组件，外部模块才能使用
})
export class SharedModule { }

// 使用组件的模块 app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SharedModule } from './shared/shared.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SharedModule // 引入组件所属的共享模块
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

独立组件使用配置 #

// 独立组件 component1.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-component1',
  standalone: true,
  template: `<p>component1 works</p>`
})
export class Component1 {}

// 使用独立组件的组件 app.component.ts
import { Component } from '@angular/core';
import { Component1 } from './component1.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [Component1], // 直接引入独立组件
  template: `<app-component1></app-component1>`
})
export class AppComponent {}

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