Angular 14+：如何导入NgModule中声明的非独立组件至独立组件

核心前提 #

要导入的非独立组件必须在其所属的NgModule中完成declarations声明，同时添加到exports数组中，确保外部组件（包括独立组件）可以访问到它。

示例：非独立组件所属的NgModule配置

// shared.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LegacyNonStandaloneComponent } from './legacy-non-standalone.component';

@NgModule({
  declarations: [LegacyNonStandaloneComponent],
  imports: [CommonModule],
  exports: [LegacyNonStandaloneComponent] // 必须导出，否则独立组件无法引用
})
export class SharedModule { }

实现步骤 #

• 直接导入非独立组件所属的NgModule
  在独立组件的@Component装饰器中，将包含目标非独立组件的NgModule添加到imports数组即可。独立组件会自动识别并使用该NgModule导出的所有非独立组件。

  示例：独立组件的配置

  // standalone-component.component.ts
  import { Component } from '@angular/core';
  import { SharedModule } from '../shared/shared.module';
  
  @Component({
    selector: 'app-standalone-component',
    standalone: true,
    imports: [SharedModule],
    template: `
      <h2>独立组件容器</h2>
      <app-legacy-non-standalone></app-legacy-non-standalone>
    `
  })
  export class StandaloneComponent { }
  

注意事项 #

• 禁止直接导入非独立组件本身：非独立组件未标记standalone: true，Angular不允许直接在独立组件的imports中引入，必须通过其所属NgModule中转。
• 依赖自动传递：如果非独立组件依赖其他模块（如CommonModule、FormsModule），这些依赖已在所属NgModule中导入，独立组件无需重复导入。

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