Angular 4动态组件搭配动态路由时出现组件工厂未找到错误

看起来你遇到的问题很典型——顶级动态路由正常工作，但子路由的组件却找不到对应的工厂。我帮你分析下最可能的原因和解决方案：

最可能的根源：子路由的组件引用未被正确替换 #

你提到已经把"SingleComponent"替换为类引用，但大概率你的替换逻辑只处理了顶级路由，没有递归遍历子路由的children节点。比如你可能写了类似这样的代码：

// 错误示例：仅处理顶级路由，忽略子路由
loadedRoutes.forEach(route => {
  if (route.component === 'SingleComponent') {
    route.component = SingleComponent;
  }
});

这种情况下，payment路由下的子路由new里的component还是字符串"SingleComponent"，而非实际的类引用，Angular自然找不到对应的组件工厂。

解决方案：递归处理所有路由节点 #

写一个递归函数来遍历所有路由（包括嵌套的子路由），统一替换组件引用：

import { SingleComponent } from './path-to-your-component/single.component';

function resolveRouteComponents(routes: any[]): void {
  routes.forEach(route => {
    // 替换当前路由的组件
    if (route.component === 'SingleComponent') {
      route.component = SingleComponent;
    }
    // 递归处理子路由
    if (route.children && route.children.length > 0) {
      resolveRouteComponents(route.children);
    }
  });
}

// 加载config.json后先处理路由组件，再重置配置
resolveRouteComponents(loadedRoutes);
router.resetConfig(loadedRoutes);

额外的排查点 #

如果上面的方法解决不了问题，再检查以下几点：

• 确认组件的模块声明：确保SingleComponent已经加入到当前模块的declarations数组中；如果是Angular 8及以下版本，还需要把它加入entryComponents数组：

  @NgModule({
    declarations: [SingleComponent],
    entryComponents: [SingleComponent], // Angular 8及以下必填
    // ...其他模块配置
  })
  export class YourModule { }
  

• 检查组件导入的正确性：确保替换时使用的SingleComponent是同一个类（比如导入路径一致，没有重复定义的组件类）。
• 父路由的完整性：payment路由如果没有指定component，需要确保它有一个包含<router-outlet>的父组件，否则子路由无法渲染（不过这个问题的错误提示会不一样，大概率不是这个原因）。

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