I have problem with lazy loading and using split-pane's menu.
My app has root page in app.component.ts (code below) where rootPage set to LoginPage by default and after login's check it change to MenuPage. Menu Page has <ion-split-pane> with own <ion-nav> directive (code below). At this point I get error:
ERROR Error: Uncaught (in promise): nav controller was destroyed
at c (polyfills.js:3)
at Object.reject (polyfills.js:3)
at NavControllerBase._fireError (nav-controller-base.js:318)
at NavControllerBase._failed (nav-controller-base.js:297)
at nav-controller-base.js:361
at t.invoke (polyfills.js:3)
at Object.onInvoke (core.es5.js:4149)
at t.invoke (polyfills.js:3)
at r.run (polyfills.js:3)
at polyfills.js:3
If I change default page to MenuPage all works greats and other pages open without errors! If I change rootPage after login's check to page without ion-nav or split-pane also all works great! How can I fix this?
app.component.ts:
@Component({
template: `<ion-nav #root [root]="rootPage"></ion-nav>`
})
export class IonicApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = 'LoginPage'; // rootPage: any = MenuPage' works great
constructor(public user: User) {
this.checkLogin();
}
checkLogin() {
this.user.checkLogin()
.map(res => res.json())
.subscribe(res => {
if (res.success)
this.rootPage = 'MenuPage'; // this.nav.setRoot('MenuPage') also not work but this.rootPage = 'BuyPage' works!
}, err => {
//console.error('ERROR', err);
});
}
}menu.html:
<ion-split-pane>
<ion-menu [content]="content">
<ion-list>
<ion-item *ngFor="let p of pages" menuClose detail-none (click)="openPage(p)">
<ion-icon name="{{p.icon}}" item-start></ion-icon>
{{p.title}}
</ion-item>
</ion-list>
</ion-menu>
<ion-nav #content main [root]="rootPage"></ion-nav>
</ion-split-pane>menu.ts:
export class MenuPage {
@ViewChild('content') nav: Nav;
rootPage: any = 'AdvertsPage';
...
}
)