Angular 19中维护组件类型映射表实现动态渲染的问题

方案1：通过InjectionToken实现无耦合的组件映射 #

这种方式让服务不直接依赖组件类型，而是通过依赖注入收集组件映射，从根源避免循环依赖。

1. 定义一个用于存储组件映射的InjectionToken：

import { InjectionToken, Type } from '@angular/core';

export const COMPONENT_MAP = new InjectionToken<Record<string, Type<any>>>('COMPONENT_MAP');

2. 在每个组件所属的模块（或独立组件的providers配置）中，向该Token提供组件映射（开启multi: true实现多模块合并）：
   比如Component1的模块：

import { NgModule } from '@angular/core';
import { Component1 } from './component1.component';
import { COMPONENT_MAP } from './component-map.token';

@NgModule({
  declarations: [Component1],
  providers: [
    {
      provide: COMPONENT_MAP,
      useValue: { comp1: Component1 },
      multi: true
    }
  ]
})
export class Component1Module {}

3. 在动态组件服务中注入该Token，合并所有映射：

import { Injectable, Inject } from '@angular/core';
import { COMPONENT_MAP } from './component-map.token';
import { Type } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DynamicComponentService {
  private componentMap: Record<string, Type<any>> = {};

  constructor(@Inject(COMPONENT_MAP) mapEntries: Record<string, Type<any>>[]) {
    // 合并所有模块提供的组件映射
    this.componentMap = Object.assign({}, ...mapEntries);
  }

  getComponentType(key: string): Type<any> | undefined {
    return this.componentMap[key];
  }
}

方案2：动态导入组件（适合独立组件/懒加载场景） #

如果你的组件是独立组件（standalone: true），可以用动态导入的方式，在需要时才加载组件，完全避免提前引用导致的依赖问题，还能优化初始包体积。

import { Injectable, Type } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class DynamicComponentService {
  async getComponentType(key: string): Promise<Type<any> | undefined> {
    switch(key) {
      case 'comp1':
        const { Component1 } = await import('./components/component1.component');
        return Component1;
      case 'comp2':
        const { Component2 } = await import('./components/component2.component');
        return Component2;
      default:
        console.warn(`No component found for key: ${key}`);
        return undefined;
    }
  }
}

使用时异步获取组件类型再渲染：

async renderComponent(key: string, container: ViewContainerRef) {
  const componentType = await this.dynamicComponentService.getComponentType(key);
  if (componentType) {
    container.clear();
    container.createComponent(componentType);
  }
}

版本差异原因 #

Angular 14+之后的编译优化和依赖检测机制更严格，之前版本中隐式的循环依赖会被编译器直接识别并抛出错误；同时独立组件的普及也改变了组件的依赖声明方式，旧的直接引用组件类型的写法不再适配新的模块解析逻辑。

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