Angular 7 Creating dynamic modules with compileModuleAndAllComponentsAsync aot build issue

Viewed 412

Problem :

I have to render a dynamic html which generates at run-time as a string, so for that purpose I've used dynamic components approach as innerHTML just not cater angular attributues like *ngIf, formGroup, router-link etc, but getting following error after deploying on local server.

Error :

Error: Unexpected value 'function(){}' imported by the module 'function(){}'. Please add a @NgModule annotation.

I tried creating the dynamic module but was getting error when making aot build because it was inside a non lazy-loaded module and according to a solution I found that aot will not work for dynamic components generating in a lazy-loaded module.

Now when I have moved it in a non lazy-loaded module I am not getting any error locally when generating aot build but getting this error after deployment however deployment is successful and nothing is breaking there.

DYNAMIC MODULE

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 { }

STEP COMPONENT

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);
      });
}
}   

Locally when generating aot build not getting error but after deploying on a local server getting this issue:

ERROR Error: Unexpected value 'function(){}' imported by the module 'function(){}'. Please add a @NgModule annotation.

0 Answers
Related