如何解决Angular独立组件与非独立组件间的循环依赖问题

我正在开发一个Angular库，包含两个组件：LibAComponent（非独立组件，声明在MyLibraryModule中）和LibBComponent（独立组件）。目前已经实现LibA引用LibB（通过在模块中导入LibB），但尝试让LibB引用LibA时，直接导入MyLibraryModule会报TypeError: type is undefined，用forwardRef则触发NG0200: Circular dependency in DI detected循环依赖错误，请问如何解决？

可行方案一：将LibA改为独立组件 #

这是最简洁的方案，让两个组件都成为独立组件，互相直接导入即可，彻底避免模块级循环依赖：

// lib-a.component.ts
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibBComponent } from './lib-b.component';

@Component({
  selector: 'lib-a',
  template: `a
    <ng-container *ngIf="renderChild"> 
      -> <lib-b></lib-b> 
    </ng-container>`,
  standalone: true,
  imports: [CommonModule, LibBComponent]
})
export class LibAComponent {
  @Input() renderChild: boolean = false;
}

// lib-b.component.ts
import { Component, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibAComponent } from './lib-a.component';

@Component({
  selector: 'lib-b',
  template: `b 
    <ng-container *ngIf="renderChild">
      ->  <lib-a></lib-a>
    </ng-container>`,
  standalone: true,
  imports: [CommonModule, LibAComponent]
})
export class LibBComponent {
  @Input() renderChild: boolean = false;
}

// MyLibraryModule.ts（可选，用于批量导出组件，方便使用者导入）
import { NgModule } from '@angular/core';
import { LibAComponent } from './lib-a.component';
import { LibBComponent } from './lib-b.component';

@NgModule({
  imports: [LibAComponent, LibBComponent],
  exports: [LibAComponent, LibBComponent],
})
export class MyLibraryModule {}

可行方案二：保留LibA为非独立组件，使用动态加载 #

如果必须维持LibA的非独立状态，可以通过动态组件加载避免模板中直接引用导致的循环依赖：

1. 调整模块配置，确保LibA可被动态加载：

// MyLibraryModule.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibAComponent } from './lib-a.component';
import { LibBComponent } from './lib-b.component';

@NgModule({
  imports: [CommonModule, LibBComponent],
  declarations: [LibAComponent],
  exports: [LibAComponent, LibBComponent],
  entryComponents: [LibAComponent] // Angular 9+后可选，但显式声明确保组件被编译
})
export class MyLibraryModule {}

2. 修改LibB，通过ViewContainerRef动态渲染LibA：

// lib-b.component.ts
import { Component, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibAComponent } from './lib-a.component';

@Component({
  selector: 'lib-b',
  template: `b 
    <ng-container *ngIf="renderChild">
      -> <div #libAHost></div>
    </ng-container>`,
  standalone: true,
  imports: [CommonModule]
})
export class LibBComponent implements OnInit, OnDestroy {
  @Input() renderChild: boolean = false;
  @ViewChild('libAHost', { read: ViewContainerRef, static: false }) libAHost!: ViewContainerRef;
  private componentRef: any;

  constructor(private cfr: ComponentFactoryResolver) {}

  ngOnInit() {
    if (this.renderChild) {
      this.loadLibA();
    }
  }

  ngOnDestroy() {
    this.componentRef?.destroy();
  }

  private loadLibA() {
    this.libAHost.clear();
    const factory = this.cfr.resolveComponentFactory(LibAComponent);
    this.componentRef = this.libAHost.createComponent(factory);
    // 注意：这里建议设置renderChild为false，避免无限递归渲染
    this.componentRef.instance.renderChild = false;
  }
}

问题根源说明 #

你遇到的错误是因为模块级循环依赖：MyLibraryModule导入了LibBComponent，而LibBComponent又尝试导入MyLibraryModule，形成闭环。forwardRef仅能解决依赖注入（DI）层面的组件间循环引用，无法处理模块导入的循环问题，因此会触发NG0200错误。

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