How can I dynamically render a component in Angular with complex dependencies injected into...

I am trying to dynamically load a component into a ViewContainerRef, and the component's constructor depends on multiple services (e.g., HttpClient, a custom service, etc.). However, I get an error related to missing providers. Here's what I have tried so far:

Injecting Injector and using it with createComponent. Manually providing dependencies in the module where the component is declared.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { LoggingService } from './logging.service';

@Component({
selector: 'app-dynamic',
template: `<p>Dynamic Component Loaded!</p>`,
})
export class DynamicComponent {
constructor(private http: HttpClient, private loggingService: LoggingService) {
console.log('DynamicComponent initialized with HttpClient and LoggingService');
}
}

import {
Component,
ComponentRef,
Injector,
ViewChild,
ViewContainerRef,
} from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
selector: 'app-root',
template: `<button (click)="loadComponent()">Load Dynamic Component</button>
<ng-container #container></ng-container>`,
})
export class AppComponent {
@ViewChild('container', { read: ViewContainerRef, static: true })
container!: ViewContainerRef;

constructor(private injector: Injector) {}

loadComponent() {
const componentRef: ComponentRef<DynamicComponent> = this.container.createComponent(DynamicComponent, {
injector: this.injector, // Provide the injector to resolve dependencies
});

const instance = componentRef.instance;
console.log('Dynamic component instance:', instance);
}
}


What I Am Looking For:
A solution that allows dynamic rendering of a component with proper dependency injection.
An approach that does not compromise modularity and avoids manual dependency management.
Bonus: How to add custom providers to a dynamically created component.

Continue reading...