在 ionic3 中延迟加载，但它是错误的：找不到组件工厂

Question

我在 ionic3 中使用延迟加载，但是当它服务时，浏览器显示错误：

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

这是我的代码：

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); 
  } 
}

但是在我运行命令：'ionic serve' 之后，我的浏览器显示错误：

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

Answer 1

您需要在 TabsPageModule 的 entryComponents 数组中设置页面。目前您已在 exports 数组中设置。 exports是允许一个module/component在其他模块中使用。

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

Answer 2

如果您要出口 TabsPageModule 则不需要像 exports:[TabsPage] 或 entryComponents: [TabsPage] 这样的手续。只有当你通过 nav 推送或弹出 tabspage 时，你才需要注意，将其作为字符串推送 this.navCtrl.push('AboutusPage');

在 ionic3 中延迟加载，但它是错误的：找不到组件工厂

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

lazy-loading

typescript

ionic3

angular

我在 ionic3 中使用延迟加载，但是当它服务时，浏览器显示错误：

这是我的代码：