DEV Community

Cover image for I have issue in creating dynamic components at AOT angular 16
puneet
puneet

Posted on

I have issue in creating dynamic components at AOT angular 16

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;
Enter fullscreen mode Exit fullscreen mode

}
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];
        }
      }
    }
  });
Enter fullscreen mode Exit fullscreen mode

}

this function to create a dynamic component in angular 16.

Top comments (0)