How to compile the dynamic modules using AOT Compiler in Angular 8

I am using Angular 8 with AOT compiler. I need to compile the modules dynamically when I click the button.

In that module file, the component is declared.

Testingmodule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CounterComponent } from './counter/counter.component';
import { FetchDataComponent } from './fetch-data/fetch-data.component';


@NgModule({
  declarations: [CounterComponent, FetchDataComponent],
  imports: [
    CommonModule



  ],
  exports: [
    CounterComponent, FetchDataComponent
  ],
  entryComponents: [CounterComponent, FetchDataComponent

  ]


})
export class TestingModule {
  public static components = {
    dynamicComponent: [CounterComponent, FetchDataComponent
    ]
  };
}

=========================================================================================

In component.ts

const mod = this.compiler.compileModuleAndAllComponentsSync(TestingModule);
console.log(mod);

=======================================================================================

In Appmodule.ts

import { NgModule, COMPILER_OPTIONS, CompilerFactory, Compiler } from '@angular/core';
import { JitCompilerFactory } from '@angular/platform-browser-dynamic';

 providers: [

    { provide: COMPILER_OPTIONS, useValue: {}, multi: true },
    { provide: CompilerFactory, useClass: JitCompilerFactory, deps: [COMPILER_OPTIONS] },
    { provide: Compiler, useFactory: createCompiler, deps: [CompilerFactory] }
  ],


export function createCompiler(compilerFactory: CompilerFactory) {
  return compilerFactory.createCompiler();
}

The above line is working in local, it show the componentfactories of those modules.

But, when I run the code in the prod mode using ng serve --prod.

When I load the modules dynamically, it showing the below error.

enter image description here