Angular通过配置文件动态加载组件报错求助

问题重现 #

通过环境配置文件定义组件路径实现动态加载时，出现如下错误：

ERROR TypeError: Failed to fetch dynamically imported module: http://localhost:4200/page404/page404.component?import

配置与代码情况 #

环境配置文件：

routes: [
  {
    name: 'auth/logout',
    path: '../../components/logout/logout.component',
    class: 'LogoutComponent',
  },
  {
    name: 'base/home',
    path: '../../components/home/home.component',
    class: 'LogoutComponent', // 明显笔误
  }
]

app.component.ts核心代码：

@ViewChild('dynamicComponentContainerPage', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;

constructor(private injector: Injector) { }

ngOnInit(): void {
    this.loadThemeComponent(routeFromBackend); // 方法名不匹配
}

async loadDynamicComponent(route: { name: string, path: string, class: string }) {
    this.container.createComponent(import(route.path).then(m => m[route.class]), { injector: this.injector });
}

核心问题与解决步骤 #

1. 修正组件类名配置错误 #

base/home项的class字段写错成了LogoutComponent，必须改为对应的HomeComponent，否则即使路径正确，也无法找到目标组件类。

2. 修复动态导入路径 #

Angular的动态import()对路径要求严格，你当前使用的../../components/...会跳出当前组件所在的app目录，导致编译后无法定位到模块：

• 若app.component.ts位于src/app/，components目录在src/app/components/，则路径应改为相对当前文件的./components/logout/logout.component
• 或者使用绝对路径写法：src/app/components/logout/logout.component（配置文件中直接写该路径）

3. 修正方法调用名 #

ngOnInit中调用的loadThemeComponent与定义的方法loadDynamicComponent名称不匹配，这会导致加载逻辑未执行，甚至触发路由重定向到404，进而出现你看到的错误。将调用改为this.loadDynamicComponent(routeFromBackend)。

4. 调整动态组件创建逻辑 #

container.createComponent需要传入组件类，而非Promise对象，需先等待模块加载完成再获取组件类：

async loadDynamicComponent(route: { name: string, path: string, class: string }) {
  // 先加载模块
  const module = await import(route.path);
  // 取出目标组件类
  const component = module[route.class];
  // 创建组件
  this.container.createComponent(component, { injector: this.injector });
}

5. 确认组件配置正确性 #

• 若使用Angular 14+独立组件，确保组件添加了standalone: true
• 若非独立组件，需确保组件所在模块已被正确导入到当前模块中

6. 排查路由冲突 #

检查应用的路由配置，确保auth/logout、base/home这些路径未与现有路由规则冲突，避免被重定向到404页面导致组件加载路径错误。

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