Question

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

无法导航：找不到TabsPage的组件工厂。你是否将它添加到@ 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); 
  } 
}

但在我运行comman：'ionic serve'后，我的浏览器显示错误：

无法导航：找不到TabsPage的组件工厂。你是否将它添加到@ NgModule.entryComponents？

Answer 1

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

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

Answer 2

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

推送

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

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

这是我的代码：

2 个答案: