When implementing Lazy loading in Ionic3, the browser displays an error message after serving:
Error: Failed to navigate - No component factory found for TabsPage. Have you included it in @NgModule.entryComponents?
Below is the code snippet:
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'; // Default to show FinderPage
}
}
chat(title){
console.log(title);
this.changeTitle.changeDomTitle(title);
}
}
However, when running the 'ionic serve' command, the browser displays the following error:
Error: Failed to navigate - No component factory found for TabsPage. Have you included it in @NgModule.entryComponents?