Angular懒加载模块时*ngIf绑定组件无法显示问题排查

在Angular应用的某路由父页面中，通过*ngIf控制多个自定义库组件的显示/隐藏，HTML代码如下：

<div *ngIf="active_slot_one"> <component-one></component-one> </div>
<div *ngIf="active_slot_two"> <component-two></component-two> </div>
<div *ngIf="active_slot_three"> <component-three></component-three> </div>
<div *ngIf="active_slot_four"> <component-four></component-four> </div>

这些组件来自不同自定义库，原本静态导入所有对应库模块时，激活*ngIf后组件可正常渲染。改为懒加载后，编译后main.js体积减小，目标模块生成了懒加载chunk且能按需加载，但激活*ngIf后组件仅显示标签，内容为空。当前懒加载模块的函数实现如下：

loadModule(value: boolean, module: string) {
    switch(module) {
        case 'one': 
            !!value && (await import('lib-one').then(m => m.LibOneModule));  // 懒加载模块的代码
            this.active_slot_one = value;
        case other_case:
            // 其他模块逻辑
    }
}

核心问题 #

你只是异步加载了库模块的类，但没有将模块注册到当前Angular模块的注入器中，Angular无法识别模块内的组件，自然无法渲染组件内容。此外代码还存在语法和逻辑问题：

1. 函数未标记async却使用await
loadModule函数内用了await，但未添加async修饰符，会触发语法错误，直接打断模块加载流程。

2. switch case无break
case 'one'后未加break，会导致代码继续执行后续case分支，引发意外逻辑。

3. 模块未注册到当前注入器
   异步加载模块类后，必须将其编译并注册到当前组件/模块的注入器中，Angular才能解析组件的模板、依赖并完成渲染。

修正方案 #

方案1：动态加载模块并注册注入器

适合非独立组件的场景，需要借助Angular的Compiler和Injector来动态编译模块：

import { Compiler, Injector } from '@angular/core';
// 假设ComponentOne是lib-one导出的组件类
import { ComponentOne } from 'lib-one';

// 组件类内注入Injector
constructor(private injector: Injector) {}

async loadModule(value: boolean, module: string) {
    if (!value) {
        this[`active_slot_${module}`] = false;
        return;
    }

    switch(module) {
        case 'one': 
            // 加载模块类
            const { LibOneModule } = await import('lib-one');
            // 编译模块为工厂
            const compiler = this.injector.get(Compiler);
            const moduleFactory = await compiler.compileModuleAsync(LibOneModule);
            // 创建模块引用，关联当前注入器
            const moduleRef = moduleFactory.create(this.injector);
            // 解析组件工厂，确保Angular能识别该组件
            moduleRef.componentFactoryResolver.resolveComponentFactory(ComponentOne);
            this.active_slot_one = true;
            break;
        case 'two':
            // 重复上述逻辑处理lib-two
            const { LibTwoModule } = await import('lib-two');
            const moduleFactoryTwo = await compiler.compileModuleAsync(LibTwoModule);
            const moduleRefTwo = moduleFactoryTwo.create(this.injector);
            // 对应组件解析
            moduleRefTwo.componentFactoryResolver.resolveComponentFactory(ComponentTwo);
            this.active_slot_two = true;
            break;
        default:
            break;
    }
}

方案2：利用独立组件懒加载（Angular 14+）

如果你的自定义库组件是独立组件（标记了standalone: true），可以直接懒加载组件类，无需处理模块：

async loadModule(value: boolean, module: string) {
    if (!value) {
        this[`active_slot_${module}`] = false;
        return;
    }

    switch(module) {
        case 'one': 
            // 直接加载独立组件类
            await import('lib-one').then(m => m.ComponentOne);
            this.active_slot_one = true;
            break;
        case 'two':
            await import('lib-two').then(m => m.ComponentTwo);
            this.active_slot_two = true;
            break;
        default:
            break;
    }
}

同时在父组件所在模块的imports中添加动态导入：

@NgModule({
  imports: [
    // 其他静态导入
    import('lib-one').then(m => m.ComponentOne),
    import('lib-two').then(m => m.ComponentTwo),
  ],
  declarations: [ParentComponent],
})
export class ParentModule {}

方案3：路由级懒加载替代（更简洁）

如果每个组件对应独立的路由，可以把组件放到懒加载路由中，完全不用手动处理模块加载：

const routes: Routes = [
  { path: 'slot-one', loadChildren: () => import('lib-one').then(m => m.LibOneModule) },
  { path: 'slot-two', loadChildren: () => import('lib-two').then(m => m.LibTwoModule) },
];

然后用<router-outlet>切换显示，替代*ngIf的逻辑，这种方式是Angular官方推荐的懒加载方案，无需手动处理注入器注册。

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