Here is what you need to know about dynamic components in Angular

[maxkoretskyi]

We start with the comparison of dynamic components functionality in Angular and AngularJS and then continue with main concepts that enable dynamic components to you an extensive overview of the dynamic components functionality in Angular.

Read the article here.

[Amit221060]

Hi i am trying to use the same but it's not working in production
https://stackoverflow.com/questions/68591198/angular-dynamic-component-not-loading-in-bu

[maxkoretskyi]

const tmpCmp = Component({ template })(class Dynamic {});
const tmpModule = NgModule({
	declarations: [tmpCmp],
	imports: [BrowserModule, BaseLoginModuleModule],
})(class DynamicModule {});

this.compiler.compileModuleAndAllComponentsAsync(tmpModule)

Yes, unfortunately Angular team decided to not support this approach in new Ivy implementation. What you can do is to pre-compile your components and load the factory dynamically.

[thambu77]

@maxkoretskyi is there a way we can pass Custom Events to the created component's instance? I want to trap the events using HostListener in parent and pass on those events to the child component dynamically created. Currently i am type casting the component's instance to the component and calling the corresponding method

const childComponentInstance = compRef.instance as ChildComponent;
childComponentInstance.methodTobeCalled();

Is there a better way? For us, our component creation happens at a generic place for many components. so if there is a generic way, it will be helpful.

[maxkoretskyi]

and pass on those events to the child component dynamically created

can you show the syntax you'd use to do that with regural (not dynamic) components?

The thing with dynamic components is that there inputs and outputs can't be processed by Angular's compiler, so usually your only option is to assign values or call methods directly on an instance. Another way is to extend an injector and pass values through some service:

const injectorForDynamicComponent = Injector.create({providers, parent: parentInjector});
componentFactory.create(injectorForDynamicComponent );

[thambu77]

@maxkoretskyi thank you for your response. For now iam good as i have completed the implementation as you mentioned by calling the methods directly on an instance.

As per your request:- Previously we were not creating dynamic components. We had parts of app packaged as separate angular elements and we plugged those parts in to host app. Now we changed design to build a single package by lazy loading the parts as dynamic components in to a single package. But, this meant that HostListener events didnt reach the parts and hence the issue.

PS:- Your articles on web have been so useful to me

[maxkoretskyi]

Glad you found a way to solve it. Don't forget to complete event emitters in the ngOnDestroy if you bind to them manually when rendering a dynamic component to avoid memory leak.

[yashgarg17]

Hi @maxkoretskyi

I have tried the approach which you have suggested.
It worked without any issues with AOT as well

But we are now getting an issue in production where CSP (Content Security Policy) is define

Because internally compileModuleAndAllComponentsAsync is making use of new Function, which is blocked by our CSP rule -

We are not suppose to use 'unsafe-eval' due to security reasons.

Is there any other alternative ?

[maxkoretskyi]

What if you compile components through AOT and load them directly whiteout using compileModuleAndAllComponentsAsync ?

[yashgarg17]

Our requirement is to load components from an external library at run time based on some configuration which has a list of modules and components to be loaded from the library -

Library 01 - create a list of modules to be rendered in UI

const config = [{
'package': '@ext/common-comps',
    'components': [       
        {
            'moduleName': 'AngularModule',
            'selector': 'name-of-component-selector'
        },
       {
            'moduleName': 'AnotherAngularModule',
            'selector': 'name-of-component-selector'
        }
    ]
}]

  getCompileModulesList(config?: any[]): Promise<any[]> {
    const modulesArray = [];
    return import('@ext/common-comps').then((mdl) => {
        config.forEach(appObj => {
            appObj['components'].forEach(cmp => {
                const moduleName = cmp['moduleName'];
                modulesArray.push({
                    'selector': cmp['selector'],
                    'module': mdl[moduleName]});   
            }); 
        });
        return modulesArray;
    });
  } 

Library 02 - This lib has no idea about the modules at compile time. Based of the module list, compile modules and create components dynamically

    renderDynamicComponents(config: any[], moduleList: any[]) {
        moduleList.forEach(mdl => {
        const compselector = mdl['selector'];
        this._compiler.compileModuleAndAllComponentsAsync(mdl['module'])
            .then(compiled => {
            compiled.ngModuleFactory.create(this._injector);
            compiled.componentFactories.forEach((factory) => {
                const selector = factory['selector'];
                if (selector === compselector) {
                    this.dynamicComponent.createComponent(factory);
                }      
            });  
            })
        })  
    }

We are using Angular 7

[yashgarg17]

@maxkoretskyi it will be great if you provide a solution to this problem because it is a critical production issue we are facing now?

Thanks

[maxkoretskyi]

from an external library at run time
can components in this library be compiled with AOT?

if so, then in this list you would be able to match selectors to compiled modules path

'components': [       
        {
            'moduleName': 'AngularModule',
            'selector': 'name-of-component-selector',
            'compiledModulePath': '...some path'
        }
    ]

otherwise, I don't know of any other solution

[roby-rodriguez]

hey @maxkoretskyi really nice article on the topic but what about the design/performance of dynamic components versus using an ng-container with a multiple switch block, what are your thoughts on this one?