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

aggarwalankush · 2017-05-01T02:02:55Z

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

The text was updated successfully, but these errors were encountered:

jgw96 · 2017-05-01T15:29:01Z

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

wbhob · 2017-05-01T18:59:27Z

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

aggarwalankush · 2017-05-01T19:53:21Z

@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 · 2017-05-02T03:14:28Z

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 · 2017-05-19T10:00:47Z

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 · 2017-05-19T12:42:27Z

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

Nostrus · 2017-05-23T05:46:46Z

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 · 2017-05-28T12:24:58Z

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

Wunmest · 2017-06-03T14:14:01Z

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 · 2017-06-25T11:19:53Z

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

mifkys · 2017-07-07T21:06:52Z

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 · 2017-07-10T08:00:48Z

@jgw96 any updates on this issue?

nonamez · 2017-07-11T07:13:23Z

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 · 2017-07-28T08:25:39Z

@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 · 2017-07-28T09:07:41Z

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

wbhob · 2017-07-28T16:09:06Z

@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 · 2017-08-02T08:05:26Z

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

c0bra · 2017-08-07T15:56:55Z

Add-on to @simonhaenisch's note:

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

Dorkside · 2017-08-08T14:06:37Z

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 · 2017-08-09T18:35:50Z

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

simonhaenisch · 2017-08-23T04:23:20Z

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

kensodemann · 2017-08-23T11:17:18Z

@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:

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

local packages:

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

simonhaenisch · 2017-08-24T03:26:14Z

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

Edit: updated and seems to be gone 👍

ionitron-bot · 2018-08-24T04:26:59Z

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!

manucorporat self-assigned this May 1, 2017

jgw96 added the v2 label May 1, 2017

jgw96 marked this as a duplicate of #12401 Jul 19, 2017

jgw96 mentioned this issue Jul 19, 2017

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

Closed

ghost mentioned this issue Oct 30, 2017

There is a visible problem! coturiv/ionic-messenger-starter#5

Closed

ionitron-bot bot added the ionitron: stale issue label Aug 24, 2018

ionitron-bot bot closed this as completed Aug 24, 2018

ionitron-bot bot locked and limited conversation to collaborators Aug 24, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

aggarwalankush commented May 1, 2017 •

edited

Loading

jgw96 commented May 1, 2017

wbhob commented May 1, 2017

aggarwalankush commented May 1, 2017

wbhob commented May 2, 2017

ukoy commented May 19, 2017

wbhob commented May 19, 2017

Nostrus commented May 23, 2017

neo-split commented May 28, 2017

Wunmest commented Jun 3, 2017

wearetelescopic commented Jun 25, 2017 •

edited

Loading

mifkys commented Jul 7, 2017

mifkys commented Jul 10, 2017

nonamez commented Jul 11, 2017 •

edited

Loading

premcarver commented Jul 28, 2017

masimplo commented Jul 28, 2017

wbhob commented Jul 28, 2017

simonhaenisch commented Aug 2, 2017

c0bra commented Aug 7, 2017

Dorkside commented Aug 8, 2017

erikhu commented Aug 9, 2017

simonhaenisch commented Aug 23, 2017 •

edited

Loading

kensodemann commented Aug 23, 2017

simonhaenisch commented Aug 24, 2017 •

edited

Loading

ionitron-bot bot commented Aug 24, 2018

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

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

Comments

aggarwalankush commented May 1, 2017 • edited Loading

jgw96 commented May 1, 2017

wbhob commented May 1, 2017

aggarwalankush commented May 1, 2017

wbhob commented May 2, 2017

ukoy commented May 19, 2017

wbhob commented May 19, 2017

Nostrus commented May 23, 2017

neo-split commented May 28, 2017

Wunmest commented Jun 3, 2017

wearetelescopic commented Jun 25, 2017 • edited Loading

mifkys commented Jul 7, 2017

mifkys commented Jul 10, 2017

nonamez commented Jul 11, 2017 • edited Loading

premcarver commented Jul 28, 2017

masimplo commented Jul 28, 2017

wbhob commented Jul 28, 2017

simonhaenisch commented Aug 2, 2017

c0bra commented Aug 7, 2017

Dorkside commented Aug 8, 2017

erikhu commented Aug 9, 2017

simonhaenisch commented Aug 23, 2017 • edited Loading

kensodemann commented Aug 23, 2017

simonhaenisch commented Aug 24, 2017 • edited Loading

ionitron-bot bot commented Aug 24, 2018

aggarwalankush commented May 1, 2017 •

edited

Loading

wearetelescopic commented Jun 25, 2017 •

edited

Loading

nonamez commented Jul 11, 2017 •

edited

Loading

simonhaenisch commented Aug 23, 2017 •

edited

Loading

simonhaenisch commented Aug 24, 2017 •

edited

Loading