Dynamic created component don't find modules

I'm trying to render a component fully at runtime in a library with a custom generated template.

So far I have added the containerRef as following:

<ng-template #menuContainer></ng-template>

@ViewChild('menuContainer', { read: ViewContainerRef }) menuContainer!: ViewContainerRef;

Then I try to add a simple component as following:

const cmp = Component({
selector: 'jit-menu',
template: `<button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>`,
standalone: true,
imports: [MatButtonModule, MatMenuModule]
})(class CustomComponent { });

this.menuContainer.createComponent(cmp)


This result with the error:

Export of name 'matMenu' not found!.

So I tried to change the template to just a button:

template: <button mat-button>Menu</button>

And this works just fine.

In order to be able to render components at runtime I had to add this in the module:

{ provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] }, oterhwise the error

The component 'CustomComponent' needs to be compiled using the JIT compiler, but '@angular/compiler' is not available. shows up.

I'm forced to use Angular & Material 16.2.0 and all this thing is because - at this day - it's impossible to give dynamic names to the template var ref doing something like

<ng-container *ngFor="let person of people"> <div #{{person.id}}>...</div> </ng-container>

My question is: Why is Angular not recognizing the Module?

My main module includes a CustomMaterialModule with every single Material module imported and exported. I also tried including that module in the

imports: [MatButtonModule, MatMenuModule] without any changes in the errors.

Continue reading...