Angular 11非路由模态模块懒加载：通用加载函数实现问题

方案一：在MyModalModule中维护静态组件映射表（推荐） #

修改my-modal.module.ts，新增一个静态的组件映射对象，统一管理所有需要懒加载的模态组件：

@NgModule({
    declarations: [
        ModalComponentA,
        ModalComponentB,
        ComponentA,
        ComponentB,
        ComponentC,
        ComponentD,
    ],
    imports: [CommonModule, SharedModule, NgbModule, PipesModule],
    exports: [],
})
export class MyModalModule{
    // 静态映射表：键为组件标识，值为组件类本身
    static readonly modalComponents = {
        ModalComponentA,
        ModalComponentB
        // 后续新增模态组件直接在此添加即可，无需重复写get方法
    };

    // 原有静态方法可保留（如果已有代码依赖），也可以删除
    static getModalComponentA(): typeof ModalComponentA {
        return ModalComponentA;
    }
    static getModalComponentB(): typeof ModalComponentB {
        return ModalComponentB;
    }
}

然后修改lazy-loader.service.ts的通用加载函数，通过映射表获取组件：

@Injectable({
    providedIn: 'root',
})
export class LazyLoaderService{
    modalService = inject(NgbModal);

    async loadModal(
        componentKey: keyof typeof MyModalModule.modalComponents,
        options?: NgbModalOptions
    ): Promise<NgbModalRef> {
        const myModule = await import('../path-to-my-module');
        const targetComponent = myModule.MyModalModule.modalComponents[componentKey];
        
        if (!targetComponent) {
            throw new Error(`未找到指定的模态组件：${componentKey}`);
        }
        
        return this.modalService.open(targetComponent, options);
    }
}

调用示例：

// 直接传入映射表中的键，TypeScript会做类型校验，避免拼写错误
this.lazyLoaderService.loadModal('ModalComponentA', { size: 'lg' });

方案二：复用原有静态方法（无需修改MyModalModule结构） #

如果不想改动MyModalModule的现有结构，可以通过调用对应的静态方法来获取组件，调整通用函数逻辑即可：

@Injectable({
    providedIn: 'root',
})
export class LazyLoaderService{
    modalService = inject(NgbModal);

    async loadModal(
        methodName: 'getModalComponentA' | 'getModalComponentB',
        options?: NgbModalOptions
    ): Promise<NgbModalRef> {
        const myModule = await import('../path-to-my-module');
        const getComponentFn = myModule.MyModalModule[methodName];
        
        if (typeof getComponentFn !== 'function') {
            throw new Error(`不存在指定的组件获取方法：${methodName}`);
        }
        
        const targetComponent = getComponentFn();
        return this.modalService.open(targetComponent, options);
    }
}

调用示例：

this.lazyLoaderService.loadModal('getModalComponentA');

原有尝试失败的原因 #

你之前的代码中myModule.MyModalModule[componentName]返回undefined，核心原因是：

• MyModalModule类上并没有直接挂载ModalComponentA/ModalComponentB作为静态属性，只有getModalComponentA这类静态方法；
• 若传入的componentName是'ModalComponentA'，自然找不到对应属性；若传入的是'getModalComponentA'，拿到的是函数本身，需要调用它才能获取组件类。

方案一通过统一的静态映射表，让组件访问更直观，维护成本更低——新增组件时只需在映射表中添加一行，无需编写重复的加载函数。

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