Useful or not, from you.
angular Dynamic imports not working for libraries

🐞 bug report

Is this a regression?

No. New thing

Description

Dynamic imports works ok in the application but when you try to use them inside sharable library to cover more advance usecases, I cant seems to make it work.

Let's say you want to use this simplified component that can accepts path to import and component name you want to insert this instantiated component to the view:

<m-renderer [name]="'MyInputComponent'" [path]="'@dynamic-renderer/ui-lib'">
</m-renderer>

or

<m-renderer [name]="'MatInput'" [path]="'@angular/material/input'">
</m-renderer>

Simple usecase to create something more generic. You can think of it like in more advanced scanarios you would read some metadata to turn them into visual representation.

🔬 Minimal Reproduction

here is the git repo https://github.com/ngx-meta/dynamic-renderer

In this repo, there is a lib folder where:

core: Contains dynamic renderer that accepts import path and uses ComponentFactoryResolver and ViewContainerRef to add component to the screen ui-lib: Simple input field

npm install
ng build core && ng build ui-lib, ng serve
That's a useful answer
Without any help

I only looked at the code briefly but there appears to be a bug in the renderer:

https://github.com/ngx-meta/dynamic-renderer/blob/61f88bb4d6874a1cf3b18420143fdb64bbb59ed9/libs/core/src/lib/renderer/renderer.component.ts#L79-L93

export class RendererComponent {
 // ...
  protected resolveComponentType(): any {
    const type = this.doLoadType(this.name, this.path);
    console.log('type: ', type);
    return type;
  }

  private async doLoadType(name: string, path: string) {
    const m = await import(/* webpackIgnore: true */ path);
    return m[name];
  }


  protected componentReference(): ComponentReference {
    const currType = this.resolveComponentType();
    const componentFactory: ComponentFactory<any> = this.factoryResolver.resolveComponentFactory(currType);
    // ...
  }
  // ...
}

Notice how doLoadType is async, so it returns a Promise, which is cast to any in resolveComponentType and then fed into this.factoryResolver.resolveComponentFactory, still being promise. That cannot work, as currType will definitely be a Promise that Angular can't create a component factory for.

You didn't post any errors and I haven't run the repro, so I don't know how it currently fails. I would expect this error:

Type passed in is not ComponentType, it does not have 'ɵcmp' property.