Dynamically load Angular component with dependencies

Question

I've been looking for a clean way (without using private API) solution to a widget style dashboard. I want to dynamically load components onto it based on user role.

Is there a way to import a component and dependencies that are included in components' module dynamically and is such solution production ready?

Stackblitz reproduction:

https://stackblitz.com/edit/angular-dynamically-loaded-dashboard?file=src/app/dashboard/dashboard.component.html

Any help towards a clean solution is welcome.

Edit: I have tried resolving components using ViewContainerRef, while the solution works (component is rendered), it just gets appended to the view, and I want to be able to get the reference of the component with resolved dependencies and pass it into a *ngComponentOutlet so I can use gridster to move and resize component.

Answer 1

I think what you are looking for is a ComponentFactoryResolver . Refer this demo code

  public render(): void {
    const index = Math.round(Math.random());
    const currentComponent = this.components[index];
    
    let componentFactory = this.componentFactoryResolver.resolveComponentFactory(currentComponent as any);

    let viewContainerRef = this.adHost.viewContainerRef;
    viewContainerRef.clear();

    let componentRef = viewContainerRef.createComponent(componentFactory);
  }

Answer 2

I've managed to solve it: The missing link was the ngModuleFactory part:

  <ng-container
    *ngComponentOutlet="widget.component; ngModuleFactory: widget.module"
  ></ng-container>

And in widget.service.ts I've resolved the module:

   const { TasksWidgetModule } = await import('../tasks-widget/tasks-widget.module');
   module = await this.compiler.compileModuleAsync(TasksWidgetModule);