Ionic-framework: ERROR Error: Uncaught (in promise): nav controller was destroyed

[aggarwalankush]

Ionic version: (check one with "x")
[ ] 1.x
[ ] 2.x
[x] 3.x

I'm submitting a ... (check one with "x")
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
I'm using lazy loading. If I set rootPage in ngOnInit, I'm getting following error. If I set rootPage at class level, it works. Please see code below. I have to close IonicErrorHandler screen every time because of this error.

Expected behavior:
I shouldn't get following error doesn't matter when I'm setting rootPage.

Steps to reproduce:

Related code:

app.html

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

This works

@Component({
  templateUrl: 'app.html'
})
export class MyApp implements OnInit {
  rootPage: string = 'TabsPage';   // <---Setting rootPage here works perfectly

  constructor(public platform: Platform,
              public statusBar: StatusBar,
              public splashScreen: SplashScreen,
              public dbService: DatabaseService) {
  }
}

This fails with below error

@Component({
  templateUrl: 'app.html'
})
export class MyApp implements OnInit {
  rootPage: string;

  constructor(public platform: Platform,
              public statusBar: StatusBar,
              public splashScreen: SplashScreen,
              public dbService: DatabaseService) {
  }

  async ngOnInit() {
    this.rootPage = await this.dbService.getRootPage(); // <---Setting rootPage here gives error
  }
}

ERROR

VM6490 main.js:1436 ERROR Error: Uncaught (in promise): nav controller was destroyed
    at d (VM6472 polyfills.js:3)
    at l (VM6472 polyfills.js:3)
    at Object.reject (VM6472 polyfills.js:3)
    at Tab.NavControllerBase._fireError (VM6490 main.js:47582)
    at Tab.NavControllerBase._failed (VM6490 main.js:47561)
    at VM6490 main.js:47625
    at t.invoke (VM6472 polyfills.js:3)
    at Object.onInvoke (VM6490 main.js:4477)
    at t.invoke (VM6472 polyfills.js:3)
    at n.run (VM6472 polyfills.js:3)
    at VM6472 polyfills.js:3
    at t.invokeTask (VM6472 polyfills.js:3)
    at Object.onInvokeTask (VM6490 main.js:4468)
    at t.invokeTask (VM6472 polyfills.js:3)
    at n.runTask (VM6472 polyfills.js:3)
defaultErrorLogger @ VM6490 main.js:1436
ErrorHandler.handleError @ VM6490 main.js:1496
next @ VM6490 main.js:5106
schedulerFn @ VM6490 main.js:4180
SafeSubscriber.__tryOrUnsub @ VM6490 main.js:39973
SafeSubscriber.next @ VM6490 main.js:39922
Subscriber._next @ VM6490 main.js:39864
Subscriber.next @ VM6490 main.js:39828
Subject.next @ VM6490 main.js:60358
EventEmitter.emit @ VM6490 main.js:4166
NgZone.triggerError @ VM6490 main.js:4537
onHandleError @ VM6490 main.js:4498
t.handleError @ VM6472 polyfills.js:3
n.runGuarded @ VM6472 polyfills.js:3
(anonymous) @ VM6472 polyfills.js:3
a @ VM6472 polyfills.js:3

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Your system information:

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.1.1
Ionic CLI Version: 2.2.3
Ionic App Lib Version: 2.2.1
Ionic App Scripts Version: 1.3.6
ios-deploy version: 1.9.1 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v7.3.0
Xcode version: Xcode 8.3.2 Build version 8E2002

[jgw96]

Thanks for opening an issue with us. We will look into this soon.

[wbhob]

You could make the method return a promise, it works fine for me.

[aggarwalankush]

@wbhob Actually async-await implicitly returns a promise. Can you provide a code sample? I tried following and it still gives error.

  ngOnInit(): Promise<string> {
    return this.dbService.getRootPage()
      .then(rootPage => this.rootPage = rootPage);
  }

[wbhob]

You might need to set a blank page as a 'pseudo-splash screen' so to speak, so that onload you have a blank page, and when the data comes back, update from that. Also, be sure to use brackets on the promise (I think) because the one-liner just maps the data and returns whatever is after the arrow.

[ukoy]

Hi, I got the same issue here.
```
this.userService.getAuth().map((state)=> !!state).subscribe((authenticated) => {
this.rootPage = authenticated ? 'Tabs' : 'Walkthrough';
}, (error) => {
console.log(error);
});

Here is some dependencies.

"@angular/common": "4.0.2",
"@angular/compiler": "4.0.2",
"@angular/compiler-cli": "4.0.2",
"@angular/core": "4.0.2",
"@angular/forms": "4.0.2",
"@ionic-native/core": "^3.6.1",
"ionic-angular": "3.1.1",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.5"
```

[wbhob]

Do either of you have a repo I can check out?

[Nostrus]

Not sure if this helps, but I got this error when trying to call nav.setRoot() twice, quickly after each other.

Have you tried changing this.rootPage = rootPage to nav.setRoot(rootPage) maybe?

[neo-split]

I also often get this error but strangely it disappears after I refresh / reload the webpage.

[Wunmest]

I also have encountered this problem. this is my component:
login() { this.userService.login(this.form.value) .then(() => this.navCtrl.setRoot(cfg.page.root)) .catch(e => console.log('login error', e)); }

ERROR Error: Uncaught (in promise): nav controller was destroyed

[wearetelescopic]

Changing this.rootPage = rootPage to nav.setRoot(rootPage) as per @Nostrus suggestion fixed it for me

[mifkys]

Also have this problem. 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';

...
}

[mifkys]

@jgw96 any updates on this issue?

[nonamez]

Have the same problem:

export class App {
    @ViewChild('root_nav') nav: NavController

    constructor(
        private events: Events,
        private platform: Platform, 
        private menuCtrl: MenuController,

        private Auth: Auth,
        private Pages: Pages,
        private APIRequest: APIRequest,
        private BatteryTracker: BatteryTracker,
        private LocationTracker: LocationTracker,

        private Push: Push,
        private StatusBar: StatusBar,
        private Geolocation: Geolocation,
        private SplashScreen: SplashScreen
    ) {
        platform.ready().then(() => {
            this.listenToEvents()

            Auth.isLogged().then(data => {
                if (data.status) {
                    this.events.publish('user:login', data.user)
                } else {
                    this.Auth.logout()
                }

                StatusBar.styleDefault()

                SplashScreen.hide()
            })
        })
    }

    private listenToEvents() {
        this.events.subscribe('user:login', user => {

            this.nav.setRoot('TabsPage')


        })

        this.events.subscribe('user:logout', () => {
            this.nav.setRoot('LoginPage')
        })
    }
}

[premcarver]

@jgw9 Are you crazy? You closed this issue by stating that it is a duplicate of one which was not resolved.

If you are not able to fix it. Please let it be in OPEN state and do not mark it as duplicate!

I am facing the same and looking for workaround.

[masimplo]

This is the way issue tracking works. There are always other professions you can try.

[wbhob]

@premcarver: @masimplo is right. If they have two issues open that are the same, then new developments on one will not be synchronized against the other; it is easier to track one issue in one issue page, instead of having 1800 different issues referring to the same problem.

[simonhaenisch]

funny though that the other issue got closed as a duplicate as well 🙈

[c0bra]

Add-on to @simonhaenisch's note:

@jgw96 you closed this one (#11454) and #12401 as duplicates of each other.

[Dorkside]

Same issue here, using Auth0, if I login/logout a few times in a row, I end up getting a Uncaught (in promise): nav controller was destroyed

[erikhu]

guys i was have the same problem but its fix in 3.6.0

[simonhaenisch]

Running 3.9.2 but still having that issue. @jgw96, can we please open either this issue or #12401 again?

[kensodemann]

@simonhaenisch - 3.9.2 refers to the CLI version. What version of the Ionic Framework (ionic-angular) are you using? There are several ways to get this, but the easiest is:

1. open a terminal/command prompt window
2. cd into your project's directory
3. ionic info
4. look for the following section

local packages:

    @ionic/app-scripts : 2.1.3
    Ionic Framework    : ionic-angular 3.6.0

[simonhaenisch]

@kensodemann ah thanks, I'm running 3.4.2... will try to update :)

Edit: updated and seems to be gone 👍

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!