I have issue in creating dynamic components at AOT angular 16

puneet — Fri, 29 Sep 2023 09:07:27 +0000

I m creating a dynamic component in angular 16 but when i creating a build and running on the server i m geeting
Can't bind to 'ngIf' since it isn't a known property of 'div' (used in the 'DynamicFetchLocationTemp' component template).
If the 'ngIf' is an Angular control flow directive, please make sure that either the 'NgIf' directive or the 'CommonModule' is a part of an @NgModule where this component is declared. these kind of error. So what i m thinking dynamic components does not read the angular at dynamic way in angular 16 version. Can any body please provide me the way so i can do that. i m using

createComponentFactory(config: IDynamicCompilerData) {
let confObj: any = {};

confObj[config.template ? 'template' : 'templateUrl'] =
  config.template || config.templateUrl;
confObj[config.css ? 'styles' : 'stylesURL'] =
  [config.css || config.stylesURL];
if(config.animations) {
   confObj['animations'] = config.animations;
}
if(config.encapsulation) {
  confObj['encapsulation'] = config.encapsulation;

}
const tmpCmp = Component(confObj)(config.rootClass);
const tmpModule = NgModule({
declarations: [tmpCmp],
imports: config.imports,
schemas:[CUSTOM_ELEMENTS_SCHEMA]
})(class { });

return this.compiler
  .compileModuleAndAllComponentsAsync(tmpModule)
  .then(factories => {
    const f = factories.componentFactories.find(
      _ => _.componentType === config.rootClass
    );
    const cmpRef = config.templateRef.createComponent(f);
    if (config.inputData) {
      for (const val in config.inputData) {
        if (config.inputData[val]) {
          cmpRef.instance[val] = config.inputData[val];
        }
      }
    }
  });

}

this function to create a dynamic component in angular 16.

DEV Community: puneet

I have issue in creating dynamic components at AOT angular 16