Nav controller was destroyed with ionic 3 lazy loading


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 (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?


  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) {

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


  <ion-menu [content]="content">
    	<ion-item *ngFor="let p of pages" menuClose detail-none (click)="openPage(p)">
	    	<ion-icon name="{{p.icon}}" item-start></ion-icon>

  <ion-nav #content main [root]="rootPage"></ion-nav>


export class MenuPage {

  @ViewChild('content') nav: Nav;
  rootPage: any = 'AdvertsPage';



Many people has similar issue: Can u help us? Solutions from this link doesn’t work.