Angular 7 Создание динамических модулей с помощью compileModuleAndAllComponentsAsync не вызывает проблем со сборкой

Question

Проблема:

Я должен отобразить динамический HTML, который генерирует во время выполнения в виде строки, поэтому для этой цели я использовал подход динамических компонентов как innerHTML простоне обрабатывает угловые атрибуты, такие как *ngIf, formGroup, router-link и т. д., но получает следующую ошибку после развертывания на локальном сервере.

Ошибка:

Ошибка: неожиданное значение 'function () {}' импортировано модулем 'function () {}'.Пожалуйста, добавьте аннотацию @NgModule.

Я пытался создать динамический модуль, но получал ошибку при создании aot build, потому что он был внутри не загруженного модулем модуля и в соответствии с решением IОбнаружено, что aot не будет работать для динамических компонентов, генерируемых в модуле с отложенной загрузкой.

Теперь, когда я переместил его в модуль не lazy-loaded, я не получаю никакой ошибки локально при генерации aot сборки, но получаю эту ошибку после развертывания, однако развертывание прошло успешно и там ничего не сломалось.

ДИНАМИЧЕСКИЙ МОДУЛЬ

export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}
@NgModule({
  declarations: [StepComponent],
  imports: [
    CommonModule
  ],
  exports: [StepComponent],
  entryComponents: [StepComponent],
  providers: [
    { provide: COMPILER_OPTIONS, useValue: {}, multi: true },
    { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
    { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
  ]
})
export class DynamicStepModule { }

ШАГОВЫЙ КОМПОНЕНТ

export class StepComponent implements OnInit, OnChanges {

@Input() step: Steps;
@ViewChild('dynamicComponent', { read: ViewContainerRef }) container: ViewContainerRef;

  constructor(private compiler: Compiler) { }

  ngOnInit() { }

  ngOnChanges(change: SimpleChanges) {
    if (this.step && change.step.currentValue !== change.step.previousValue) {
      this.addComponent(this.step);
    }
  }

  addComponent(step: Steps) {
    const cmp = Component({ template: step.formattedText })(class DynamicComponent {
      stepFormGroup: FormGroup;
      constructor(
      ) {
      // Some Component related code
     }

});
    const meta = NgModule({
      imports: [
        CommonModule,
        FormsModule,
        MaterialModule,
        ReactiveFormsModule,
        LibSharedModule,
        BrowserModule,
        BrowserAnimationsModule
      ],
      declarations: [cmp]
    })(class DynamicModule {
    });

    this.compiler
      .compileModuleAndAllComponentsAsync(meta)
      .then(factories => {
        const factory = factories.componentFactories.find(component => component.componentType === cmp);
        this.container.remove();
        this.container.createComponent(factory);
      });
}
}   

Локально при генерации aot build не появляется ошибка, но после развертывания на локальном сервере возникает эта проблема:

Ошибка: Ошибка: неожиданное значение 'function () {}' импортировано функцией модуля 'function () {}».Пожалуйста, добавьте аннотацию @NgModule.