0

I have a requirement to render HTML coming from DB. So I created a dynamic component at runtime and passing the HTML in it. Then I created a dynamic module and passed this dynamic component class to the module. Then I rendered this module using the angular compiler and create a factory and insert that view into the view container of the component. The code is working fine for the case of ng serve but when I am doing ng serve --prod the dynamic templet is not rendering.

      export class ParentLoginComponent implements AfterViewInit {
            /**
             * Preview HTML variable
             */
            previewHtml: any;
/**
     * hold Dynamic Template Variablee
     */
    dynamicTemplate: any = `<app-login></app-login>`;
        
            @ViewChild('dynamic', { read: ViewContainerRef, static: false })
            dynamic: ViewContainerRef;re
    constructor(
            private compiler: Compiler,
            private injector: Injector,
            private moduleRef: NgModuleRef<any>,
            private authenticationService: AuthenticationService,
        ) {
            this.getLoginPage();
        }
           ngAfterViewInit() {
                 const template = this.dynamicTemplate;
    
            /**
             * Create Component at run Time
             */
            const tmpCmp = Component({ template })(class Dynamic {});
            debugger;
            /**
             * Create Module and initialize the Component at run Time
             */
            const tmpModule = NgModule({
                declarations: [tmpCmp],
                imports: [BrowserModule, BaseLoginModuleModule],
            })(class DynamicModule {});
    
            /**
             * Compile all the code in runtime
             */
            debugger;
            this.compiler.compileModuleAndAllComponentsAsync(tmpModule).then((factories) => {
                debugger;
                // const f = factories.componentFactories[0];
                const factory = Array.from(factories.componentFactories);
                const f: any = factory.find((x: any) => x.componentType.name === 'Dynamic');
                const cmpRef = f.create(this.injector, [], null, this.moduleRef);
                this.dynamic.clear();
                this.dynamic.insert(cmpRef.hostView);
            });
        }

I am not sure why this is happening. Any leads will be helpful.

Amit Singh
  • 279
  • 2
  • 7
  • did you get any solution to this? please write down the answer here if so. – burhanuddin abbas Aug 29 '21 at 07:15
  • @burhanuddinabbas I have changed the approach and done it using webcomponent in Angular as the Angular team is not supporting this in new IVY Implementatios – Amit Singh Aug 30 '21 at 08:11
  • but can you able to load the template from the database now? and if possible can you please share an example with your new approach – burhanuddin abbas Aug 30 '21 at 13:29
  • For binding simple HTML Only u can just insert in innerHTML of the container.
    renderDynamic() { const container = document.getElementById('container'); container.innerHTML = this.dynamicTemplate; } call function in ngAfterviewinit     – Amit Singh Aug 31 '21 at 13:39
  • but then how did you map NgDirectives, Input, Output, and RouterLinks dynamically? – burhanuddin abbas Aug 31 '21 at 15:18
  • I have created a component(have all the dynamic functionalities in it ) and loading it at runtime using entry component – Amit Singh Sep 08 '21 at 10:04

0 Answers0