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, []);
... ...
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.
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 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.
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!!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With