Angular 9（Ivy）动态加载渲染组件遇路径错误，求解决方案

我来帮你梳理下你遇到的动态组件加载问题，以及Ivy环境下的正确实现思路：

一、为什么旧方式行不通了？ #

你之前依赖componentFactoryResolver['_factories']的方式，本质是利用了Angular的私有API——Ivy渲染引擎移除了这个内部的工厂缓存，所以这种hack式的查找组件类型的方法在Angular 9+完全失效，必须改用官方推荐的动态import()方案。

二、动态import路径报错的核心原因 #

你遇到的Cannot find module错误，以及"静态路径可行、变量路径不行"的问题，根源在于Webpack的模块打包机制：
Webpack需要在编译时就能分析出所有可能被加载的模块，完全动态的路径（比如import(src)，其中src是任意变量）无法被静态分析，导致对应的组件模块没有被打包进最终产物，运行时自然找不到。

解决路径问题的关键步骤： #

1. 使用可静态分析的路径模板
   路径里可以包含变量，但必须有固定的前缀，让Webpack能预编译所有可能的组件模块。比如维护一个组件名到固定路径的映射：

   // 提前定义组件名称与相对路径的映射
   const componentPathMap = {
     'details-products': '../details-products/details-products.component',
     'foo': '../foo/foo.component'
   };
   

2. 确保路径相对关系正确
   路径是相对于当前服务/组件文件的位置，比如你的加载服务在src/app/services/，组件在src/app/details-products/，那路径应该是../details-products/details-products.component。

3. 正确导出组件类
   确保目标组件文件里，组件类是直接导出的：

   // details-products.component.ts
   export class DetailsProductsComponent { /* ... */ }
   

三、修正后的动态加载实现示例 #

结合你的原有逻辑，调整后的完整代码大概是这样：

async loadComponent(componentName: string, data: any) {
  // 1. 从映射表获取可静态分析的路径
  const path = componentPathMap[componentName];
  if (!path) throw new Error(`未知组件：${componentName}`);

  // 2. 动态加载组件模块
  const module = await import(path);

  // 3. 根据组件名推导类名（假设组件类是大驼峰+Component后缀）
  const componentClassName = componentName
    .split('-')
    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
    .join('') + 'Component';
  
  const componentType = module[componentClassName];

  // 4. 后续渲染逻辑和你原有代码一致
  const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentType);
  const componentRef = componentFactory.create(new DialogInjector(this.injector, data));
  
  this.appRef.attachView(componentRef.hostView);
  const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
  document.querySelector('.flyout').firstChild.appendChild(domElem);
  
  this.dialogComponentRef = componentRef;
  return componentRef;
}

四、Ivy下更简洁的动态组件渲染方式 #

除了上述基于ComponentFactoryResolver的方式，Ivy还提供了更直观的API：

1. 使用ViewContainerRef.createComponent（推荐） #

如果你的组件是挂载到某个模板容器里，无需手动操作DOM，可以直接用这个方法：

async loadIntoContainer(componentName: string, container: ViewContainerRef, data: any) {
  const path = componentPathMap[componentName];
  const module = await import(path);
  const componentClassName = // 同上述推导逻辑
  const componentType = module[componentClassName];

  // 直接通过容器创建组件，自动管理视图
  const componentRef = container.createComponent(componentType, {
    injector: new DialogInjector(this.injector, data)
  });
  
  // 给组件传递输入属性
  componentRef.instance.data = data;
  return componentRef;
}

2. 使用NgComponentOutlet指令（声明式方案） #

如果可以在模板中提前预留位置，用这个指令更简洁：
模板代码：

<ng-container *ngComponentOutlet="currentComponent; injector: customInjector"></ng-container>

组件逻辑：

currentComponent: Type<any>;
customInjector: Injector;

async loadComponent(componentName: string, data: any) {
  const path = componentPathMap[componentName];
  const module = await import(path);
  const componentClassName = // 同上述推导逻辑
  this.currentComponent = module[componentClassName];
  this.customInjector = new DialogInjector(this.injector, data);
}

五、常见坑点提醒 #

• 不要尝试用完全动态的路径，必须给Webpack留足静态分析的线索；
• Angular 9还不支持独立组件，目标组件必须声明在某个NgModule的declarations数组中；
• 如果组件属于懒加载模块，需要确保模块已经被正确预加载或按需加载。

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