Nrthugu

Here are two MCVEs on StackBlitz using dynamic component creation. I would like to understand why :

• 
  This works.


• But this does not work, just after importing a Material Module (MatButtonModule) into the dynamically created module.

Does anyone have an idea?

Example that works

app.component.ts

import { Component, ChangeDetectionStrategy, OnDestroy, ChangeDetectorRef, ViewChild, ViewContainerRef, Input, Compiler, Injector, NgModuleRef, SimpleChanges, NgModule, ComponentFactoryResolver, ReflectiveInjector } from '@angular/core';

import { CommonModule } from '@angular/common';

import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { HttpClientModule } from '@angular/common/http';

import { MatButtonModule } from '@angular/material';



@Component({

  selector: 'my-app',

  template: `

    <ng-container

      #viewContainerRef

    ></ng-container>

  `,

})

export class AppComponent  {

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



    constructor(

        private compiler: Compiler,

        private injector: Injector,

        private ngModuleRef: NgModuleRef<any>,

        private changeDetectorRef: ChangeDetectorRef,

    ) {

    }



    ngOnInit() {

        const template = `

            <button

                mat-button

                [innerHTML]="'Click me!'"

            >

            </button>

        `

        this.viewContainerRef.clear();

        const component = Component({

            changeDetection: ChangeDetectionStrategy.OnPush,

            template

        })(class { });

        const ngModule = NgModule({

            imports: [

                CommonModule,

                BrowserModule,

                BrowserAnimationsModule,

                HttpClientModule,

            ],

            entryComponents: [component],

            declarations: [component]

        })(class { });

        this.compiler.compileModuleAndAllComponentsAsync(ngModule).then((factories) => {

            const factory = factories.componentFactories[0];

            const componentRef = this.viewContainerRef.createComponent(

                factory,

                this.viewContainerRef.length,

                this.injector,

                ,

                this.ngModuleRef

            );

            this.changeDetectorRef.detectChanges();

        });

    }

}

app.module.ts

import { NgModule, CompilerFactory, COMPILER_OPTIONS, Compiler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { FormsModule } from '@angular/forms';

import { JitCompilerFactory } from '@angular/platform-browser-dynamic';



import { AppComponent } from './app.component';



export function createCompiler(compilerFactory: CompilerFactory) {

    return compilerFactory.createCompiler();

}



@NgModule({

  imports:      [ BrowserModule, FormsModule ],

  declarations: [ AppComponent ],

  bootstrap:    [ AppComponent ],

  providers: [

        { provide: COMPILER_OPTIONS, useValue: {}, multi: true },

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

        { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] },

  ],

})

export class AppModule { }

Example that does not work

Adds the MatButtonModule into the imports of the dynamic module :

app.component.ts

const ngModule = NgModule({

    imports: [

        CommonModule,

        BrowserModule,

        BrowserAnimationsModule,

        HttpClientModule,

        MatButtonModule,

    ],

    entryComponents: [component],

    declarations: [component]

})(class { });

Behavior

There are no errors, but the dynamic component seems to not be inserted (it is at least not visible).

The reason for this is that you always take the first compiled factory from array.

const factory = factories.componentFactories[0];

while you need to get the factory from your component:

const factory = factories.componentFactories.find(x => x.componentType === component);