Angular 14运行时动态设置路径导入模块失败问题求助

问题场景 #

在Angular 14中尝试实现运行时动态导入模块，模块路径通过@Input()传入时，出现错误：

Error: Cannot find module 'src/app/plugin1/plugin1.module'

手动硬编码导入路径时可以正常加载：

let module = await import("src/app/plugin1/plugin1.module").then(m => (m as any)[Object.keys(m)[0]]);

但使用动态值时加载失败：

@Input() path: string;
// ...
let module = await import(this.path).then(m => (m as any)[Object.keys(m)[0]]);

相关tsconfig配置已包含插件模块：
tsconfig.app.json：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": [],
    "module": "esnext"
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/app/plugin1/plugin1.module"
  ],
  "exclude": [
    "src/**/*.spec.ts",
    "src/test.ts",
    "src/environments/*"
  ]
}

tsconfig.json：

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": [
      "es2020",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

目标是替代在Angular 14中失效的@herodevs/hero-loader功能，当前临时方案需要显式声明所有模块路径，无法循环加载，希望得到更优解。

核心原因 #

Angular依赖Webpack打包，Webpack需要在编译阶段静态分析导入路径完成代码分割和模块打包。完全动态的字符串（如import(this.path)）无法被Webpack识别为有效模块路径，对应的模块不会被打包进最终产物，运行时自然找不到模块。

优化解决方案 #

方案1：固定前缀+动态后缀导入 #

如果所有插件模块都在统一目录下，用固定前缀配合动态后缀，让Webpack能预分析到可能的模块：

@Input() moduleName: string; // 传入"plugin1"即可，无需完整路径
// ...
const modulePath = `src/app/${this.moduleName}/${this.moduleName}.module`;
let module = await import(modulePath).then(m => (m as any)[Object.keys(m)[0]]);

这种方式下，Webpack会打包src/app/下所有符合[name]/[name].module结构的模块，运行时可动态指定模块名加载。

方案2：构建可扩展模块映射表 #

比临时方案更灵活，支持循环加载，只需维护映射表即可：

// 定义模块映射类型
type ModuleLoaderMap = Record<string, () => Promise<any>>;

@Injectable({ providedIn: "root" })
export class ModuleLoaderService {
  // 维护模块路径到导入函数的映射
  private moduleMap: ModuleLoaderMap = {
    "path/to/module1.module": () => import("path/to/module1.module"),
    "path/to/module2.module": () => import("path/to/module2.module"),
    // 新增模块只需在此添加条目
  };

  async loadModule(path: string): Promise<any> {
    const importFn = this.moduleMap[path];
    if (!importFn) {
      throw new Error(`模块路径 ${path} 未在加载器映射中找到`);
    }
    const module = await importFn();
    return module[Object.keys(module)[0]];
  }

  // 可选：预加载所有模块
  async preloadAllModules() {
    await Promise.all(Object.values(this.moduleMap).map(fn => fn()));
  }
}

使用时直接调用loadModule方法：

async ngOnInit() {
  if (!this.moduleName) return;
  const [path, moduleName] = this.moduleName.split("#");
  try {
    const module = await this.moduleLoader.loadModule(path);
    const moduleRef = createNgModule(module, this._injector);
    const component = (moduleRef as any)._bootstrapComponents[0];
    this._componentRef = this._viewRef.createComponent(component, { 
      injector: this._injector, 
      ngModuleRef: moduleRef 
    });
  } catch (e) {
    console.error(`加载动态模块 ${moduleName} 失败:`, e);
  }
}

这种方式既保留动态加载灵活性，又让Webpack能静态分析所有需打包的模块，新增模块只需更新映射表，无需修改加载逻辑。

方案3：使用Angular的NgModuleFactoryLoader（兼容旧版本） #

Angular提供NgModuleFactoryLoader服务用于动态加载模块，Angular 8+推荐用import()语法，此处仅作补充：

import { NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';

@Injectable({ providedIn: "root" })
export class ModuleLoaderService {
  constructor(private loader: NgModuleFactoryLoader) {}

  async loadModule(path: string): Promise<any> {
    // 路径格式为 "path/to/module#ModuleName"
    const factory = await this.loader.load(path);
    return factory.moduleType;
  }
}

需在app.module.ts中提供SystemJsNgModuleLoader：

import { NgModuleFactoryLoader, SystemJsNgModuleLoader } from '@angular/core';

@NgModule({
  providers: [
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }
  ]
})
export class AppModule {}

临时方案优化点 #

当前临时方案可行，但可通过批量注册映射表支持循环加载：

// 定义所有模块路径数组
const modulePaths = [
  "path/to/module1.module",
  "path/to/module2.module",
  "path/to/module3.module",
  "path/to/module4.module"
];

@Injectable({ providedIn: "root" })
export class ModuleLoaderService {
  preloadedModulesByPath: { [path: string]: any } = {};
  isModulesPreLoaded = false;

  async preloadLazyModules() {
    const promises = modulePaths.map(path => 
      import(path).then(module => {
        this.preloadedModulesByPath[path] = module;
      })
    );
    await Promise.all(promises);
    this.isModulesPreLoaded = true;
  }
}

新增模块只需在modulePaths数组中添加路径，即可循环预加载。

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