Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

equivalent to deprecated compileComponentAsync for dynamic component loading

Tags:

angular

I have used the below code in order to load dynamically components in my app. As you may know, compileComponentAsync is deprecated in RC6. I want to find a similar solution. Maybe I should use compileModuleAsync. But I couldn't find something. Has anyone an idea?

this.compiler.compileComponentAsync(component)
    .then(factory => {
        const injector = ReflectiveInjector.fromResolvedProviders([], this.vcRef.parentInjector);
        this.vcRef.createComponent(factory, 0, injector, []);
...  ...
like image 741
Steven Lignos Avatar asked Sep 01 '16 19:09

Steven Lignos


People also ask

How can you dynamically load the component?

To dynamically load the component, we use the directive as an anchor and create the component into its position in the DOM. The createComponent method requires the component type, not the instance.

What is ComponentFactory in Angular?

ComponentFactorylinkBase class for a factory that can create a component dynamically. Instantiate a factory for a given type of component with resolveComponentFactory() . Use the resulting ComponentFactory. create() method to create a component of that type. Deprecated: Angular no longer requires Component factories.

What are dynamic Angular components?

What dynamic components are. Dynamic means, that the components location in the application is not defined at buildtime. That means, that it is not used in any angular template. Instead, the component is instantiated and placed in the application at runtime.


1 Answers

you may use compileModuleAndAllComponentsAsync it returns ModuleWithComponentFactories.

this.compiler.compileModuleAndAllComponentsAsync(module).then(_module => {
            _module.componentFactories => Gives factory for all the components which are exported from the module.
        });

Read more about it here

Hope this helps!!

like image 124
Madhu Ranjan Avatar answered Sep 21 '22 18:09

Madhu Ranjan