I want to build a UI dynamically based on a JSON config. Trying to use ngComponentOutlet with the AsyncPipe so I can import(...) the components lazily. My implementation is not working (see example on Stackblitz).

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [NgComponentOutlet, NgFor, AsyncPipe],
  template: `
    <ng-container *ngFor="let component of schema">
      <ng-content *ngComponentOutlet="load(component.name) | async; inputs: component.inputs"></ng-content>
    </ng-container>
  `,
})
export class App {
  // schema returned from API call
  schema = [
    {
      name: 'Lazy1',
      inputs: {
        title: 'Lazy 1 Component',
      },
    },
    {
      name: 'Lazy2',
      inputs: {
        title: 'Lazy 2 Component',
      },
    },
  ];

  componentManifest: Record<string, { load: () => Promise<unknown> }> = {
    Lazy1: {
      load: () => import('./app/lazy-components/lazy1.component'),
    },
    Lazy2: {
      load: () => import('./app/lazy-components/lazy2.component'),
    },
  };

  async load(component: string) {
    return await this.componentManifest[component]
      .load()
      .then((c) => (c as any)[component]);
  }
}