@NgModule.entryComponents error

Question

I have a code:

////////////////login.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';

@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
})
export class LoginPageModule {}

////////////////// login.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage {
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad LoginPage');
  }

  doLogin(){
    this.navCtrl.setRoot('SpecialPage')
  }
}

/////////////////login.html
<ion-content padding>
  <button ion-button full (click)="doLogin()">Login</button>
</ion-content>


//////////////// special.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SpecialPage } from './special';
import { HomePage } from '../home/home';

@NgModule({
  declarations: [
    SpecialPage,
    HomePage
  ],
  entryComponents: [
    SpecialPage,
    HomePage
  ],
  imports: [
    IonicPageModule.forChild(SpecialPage),
  ],
})
export class SpecialPageModule {}

//////////////// special.ts
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { HomePage } from '../home/home';

@IonicPage()
@Component({
  selector: 'page-special',
  templateUrl: 'special.html',
})
export class SpecialPage {
  tab1Root = HomePage;
  myIndex : number;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SpecialPage');
  }
}

/////////////////// special.html
<ion-tabs [selectedIndex]="myIndex">
  <ion-tab [root]="tab1Root" tabTitle="Home"  tabIcon="home"></ion-tab>
</ion-tabs>

/////////////// home.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
  }
}

And I get a error: Runtime Error Uncaught (in promise): Error: No component factory found for HomePage. Did you add it to @NgModule.entryComponents? Error: No component factory found for HomePage. Did you add it to @NgModule.entryComponents? at noComponentFactoryError (http://localhost:8101/build/vendor.js:3682:34) at _NullComponentFactoryResolver.resolveComponentFactory (http://localhost:8101/build/vendor.js:3700:15) at CodegenComponentFactoryResolver.resolveComponentFactory

Help please What is wrong, i included home into entryComponents. Anyway there is a error

Sampath Sampath · Accepted Answer · 2017-09-01T10:16:26

You need to remove HomePage from special.module.ts module.You should add it only to the app.module.ts since you're not using lazy loading with the home component.

special.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SpecialPage } from './special';
//import { HomePage } from '../home/home'; --> remove this

@NgModule({
  declarations: [
    SpecialPage,
    //HomePage --> remove this
  ],
  entryComponents: [
    SpecialPage,
    //HomePage --> remove this
  ],
  imports: [
    IonicPageModule.forChild(SpecialPage),
  ],
})
export class SpecialPageModule {}

@NgModule.entryComponents error

1 Answers