Angular7中ngComponentOutlet与ndcDynamicComponent无输出问题求助

API 探路者

2026-10-7

问题原因

DynamicModule导入格式错误：你在app.module.ts的imports数组里嵌套了多余的方括号包裹DynamicModule，且ng-dynamic-component要求导入时必须调用.forRoot()方法完成初始化，否则ndc-dynamic指令无法正常工作。
动态组件未加入entryComponents（适配低版本/非IVY环境）：如果你的项目使用Angular8及更早版本，或者关闭了IVY编译，动态加载的组件必须显式声明到entryComponents数组，否则Angular不会生成该组件的工厂类，动态渲染时就会显示空白。Angular9+默认开启IVY的环境可以省略该配置，但建议加上保证兼容性。
无报错情况下还空白，可排查两种动态渲染指令是否存在冲突，或者组件内部初始化时抛出未捕获的异常导致渲染中断。

解决方法

修正app.module.ts的配置：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeatSealComponent } from './heat-seal/heat-seal.component';
import { PrinterComponent } from './printer/printer.component';
import { DynamicModule } from 'ng-dynamic-component';

@NgModule({
  declarations: [
    AppComponent,
    HeatSealComponent,
    PrinterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // 移除多余的嵌套方括号，添加forRoot()初始化
    DynamicModule.forRoot(),
  ],
  // 低版本Angular/关闭IVY环境必须添加，高版本可省略
  entryComponents: [
    HeatSealComponent,
    PrinterComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

测试渲染时先保留一种动态渲染方式，排查冲突：

<!-- 先测试原生Angular的动态组件指令，确认组件能正常渲染 -->
<ng-container *ngComponentOutlet="dumm"></ng-container>
<!-- 暂时注释ng-dynamic-component的调用，后续再逐步启用 -->
<!-- <ndc-dynamic [ndcDynamicComponent]="dumm"></ndc-dynamic> -->

打开浏览器开发者工具的控制台，检查是否有其他报错信息，比如HeatSealComponent内部的初始化报错，这类异常也会导致组件渲染空白。

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