Lazy loading in ionic3 , but it was wrong : No component factory found

Question

I use Lazy loading in ionic3 , but when it serve , then browser show the error:

Failed to navigate: No component factory found for TabsPage. Did you add it to @NgModule.entryComponents?

here's my code :

app.module.ts

@NgModule({
  declarations: [ 
    MyApp, 
    FormModal,
    PreviewModal, 
  ],
  imports: [
    BrowserModule,
    HttpModule,
    JsonpModule,
    CommonModule, 
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp], 
  entryComponents: [ 
    MyApp, 
  ],
  providers: [ 
    Router,
    StatusBar,
    SplashScreen,
    ApiService,
    Toast,
    Loading,
    Alert,
    UserService,
    ChangeTitle,
    ParseLogin,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

app.component.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {

  rootPage:any = "TabsPage";

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,router:Router) {
    router.setVersion('1.0',10000);
    router.load(Routes);
    Event.subscribe('push',(ev,data)=>{
      document.title =Routes[data.toPage.name].title;
      var i = document.createElement('iframe');
      i.src = 'blank.html';
      i.style.display = 'none';
      i.onload = function() {
        setTimeout(function(){
          i.remove();
        }, 9)
      }
      document.body.appendChild(i);


    })
    Event.subscribe('pop',(ev,data)=>{
      if(!data.toPage.name||!Routes[data.toPage.name])return;//这里应该关闭微信页面
      document.title =Routes[data.toPage.name].title;
      var i = document.createElement('iframe');
      i.src = 'blank.html';
      i.style.display = 'none';
      i.onload = function() {
        setTimeout(function(){
          i.remove();
        }, 9)
      }
      document.body.appendChild(i);
      console.log(data);
    }) 
    platform.ready().then(() => { 
      statusBar.styleDefault();
      splashScreen.hide();  
    });
  }
}

tabs.html

<ion-tabs selectedIndex="{{selectedIndex}}">
    <ion-tab [root]="tab1Root" tabTitle="发现" tabIcon="eye" (ionSelect)="chat('发现')"></ion-tab>
    <ion-tab [root]="tab2Root" tabTitle="活动" tabIcon="paper-plane" (ionSelect)="chat('活动')"></ion-tab>
    <ion-tab [root]="tab3Root" tabTitle="君读" tabIcon="book" (ionSelect)="chat('君读')"></ion-tab>
    <ion-tab [root]="tab4Root" tabTitle="我" tabIcon="person" (ionSelect)="chat('我')"></ion-tab>
</ion-tabs>

tabs.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TabsPage } from './tabs';

@NgModule({
  declarations: [
    TabsPage,
  ],
  imports: [
    IonicPageModule.forChild(TabsPage)
  ], 
  exports: [
    TabsPage
  ]
})
export class TabsPageModule {}

tabs.ts

import { Component} from '@angular/core';
import { NavParams ,IonicPage} from 'ionic-angular';  
import{ChangeTitle} from"../../components/changeTitle"

@IonicPage()  
@Component({
  templateUrl: 'tabs.html'  
}) 

export class TabsPage { 

  tab1Root = "FinderPage";
  tab2Root = "ListPage";
  tab3Root = "ArticleListPage";
  tab4Root = "UserPage"; 
  selectedIndex:string='0'; 

  constructor(public changeTitle:ChangeTitle,public navParams: NavParams) {
       this.selectedIndex=this.navParams.get("index"); 
       if (!this.selectedIndex){
          this.selectedIndex = '0'; // 默认发现首页
       }
  }
  chat(title){ 
    console.log(title);
    this.changeTitle.changeDomTitle(title); 
  } 
}

but after i run comman : ‘ionic serve’ , my browser is show the error:

Failed to navigate: No component factory found for TabsPage. Did you add it to @NgModule.entryComponents?

You need to use flat arrow function here i.onload = function() { — Sampath
– Sampath, Commented Sep 8, 2017 at 4:25

Suraj Rao · Accepted Answer · 2017-09-08 05:54:04Z

6

You need to set the page in entryComponents array in your TabsPageModule. Currently you have set in exports array. exports is to allow a module/component to be used in other modules.

@NgModule({
  declarations: [
    TabsPage,
  ],
  imports: [
    IonicPageModule.forChild(TabsPage)
  ], 
  entryComponents: [
    TabsPage //here
  ]
})

answered Sep 8, 2017 at 5:54

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

S. pan Over a year ago

I'm glad to have been looking forward to hearing from you, thank you very much, but I added entryComponents: [TabsPage] according to your suggestion。 but still wrong At present is @NgModule({ declarations: [ TabsPage, ], imports: [ IonicPageModule.forChild(TabsPage) ], entryComponents: [ TabsPage ], exports: [ TabsPage ] }) export class TabsPageModule {} . Is the reason for the lack of configuration?

Suraj Rao Over a year ago

you mean its not working? are you importing TabsPage outside the TabsPageModule?

S. pan Over a year ago

I think I see. I imported it somewhere else. O(∩_∩)O Thank you, Suraj

Niraj · Accepted Answer · 2017-11-16 09:32:01Z

2

If you are exporting TabsPageModule then there is no need of these formalities like exports:[TabsPage] orentryComponents: [TabsPage] . Only you have to take care of whenever you are pushing or poppinng the tabspage through nav , push it as a string this.navCtrl.push('AboutusPage');

edited Nov 16, 2017 at 9:32

answered Nov 16, 2017 at 9:24

Niraj

1,1891 gold badge10 silver badges14 bronze badges

Collectives™ on Stack Overflow

Lazy loading in ionic3 , but it was wrong : No component factory found

I use Lazy loading in ionic3 , but when it serve , then browser show the error:

here's my code :

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

I use Lazy loading in ionic3 , but when it serve , then browser show the error:

here's my code :

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related