'ion-title' is not a known element : while creating components on the fly

Question

I'm trying to add components dynamically ngOnInit. While creating component, I'm getting this error.

 "Uncaught (in promise): Error: Template parse errors: 'ion-title' is not a 
 known element"

Here is my code:

TS:

import { Component,Input, OnInit, Compiler, Injector, VERSION, ViewChild, 
         NgModule, NgModuleRef, ViewContainerRef, AfterViewInit,
         ComponentFactoryResolver } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';

@Component({
     selector: 'page-cashbalancemodal_rpt',
     template: '<ng-container #dynamicTemplate></ng-container>',
})

export class Cashbalancemodal_rptPage {

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

   constructor(){.......}

   ngOnInit() {
         let template = this.navParams.get("modaltemplate");
         let myTemplateUrl = "assets/templates/"+template+".html";

         const tmpCmp = Component({
             templateUrl: myTemplateUrl
         })(class {});

         const tmpModule = NgModule({
             declarations: [tmpCmp],
             entryComponents: [tmpCmp],
        })(class {});


        this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
          .then((factories) => {
          const f = factories.componentFactories[0];
          const cmpRef = this.viewContainerRef.createComponent(f);
          cmpRef.instance.name = 'dynamic';
      })
  }

}

I came across with many solutions. One of the most used solution is adding "IonicModule" in app.module.ts. I done that too. But cant get rid of this error.

app.module.ts

 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 @NgModule({
       imports: [
           BrowserModule,
           IonicStorageModule.forRoot(),
           HttpModule,
           IonicModule.forRoot(MyApp),
           ComponentsModule,
      ],
 })

Please help to solve this error.

Answer 1

Since you are using ionic components in tmpCmp which is set in tmpModule,

You need to import IonicModule in that module.

     const tmpModule = NgModule({
         declarations: [tmpCmp],
         imports:[IonicModule],
         entryComponents: [tmpCmp],
    })(class {});