Navigation stack needs at least one root page

Can please anyone help to figure out why I am having this error. If i try to close to modal it give me an error. “Navigation stack needs at least one root page”

modal content

import { Component } from '@angular/core';
import {ViewController} from 'ionic-angular';

 @Component({
       selector: 'page-add',
       templateUrl: 'add.html'
})

export class AddPage {

make:any;
model:any;
year:any
vin: any;

constructor(public viewCtrl: ViewController) {}
ionViewDidLoad() {
    console.log('ionViewDidLoad AddPage');
}

save(): void {

let car= {
  make: this.make,
 model: this.model,
 year: this.year,
 vin: this.vin
};

 this.viewCtrl.dismiss(car);

}

 closeModal(): void {
  this.viewCtrl.dismiss();
}

}

// modal code

import { Component, OnInit } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';
import {AddPage } from '../add/add';



import {CarsService} from '../../providers/cars-service';
import {AuthService} from '../../providers/auth-service';

@Component({
 selector: 'page-home',
 templateUrl: 'home.html'
})
export class HomePage implements OnInit  {


 reports:string[];

 constructor(private carService: CarsService,private auth: AuthService,  public navCtrl: NavController, 
 public modalCtrl: ModalController) {

}

ngOnInit() {

  this.carService.loadCars().subscribe(data=>{
   // console.log(vehicule);
    this.reports = data;
    console.log(this.reports);
  })
}


addCar(){

let modal = this.modalCtrl.create(AddPage);

modal.onDidDismiss(car => {
  if(car){
    this.reports.push(car);
    this.carService.addReport(car).subscribe(report => {this.reports= report;console.log(this.reports)},
                                                           (err)=>{ console.log(err)}
                                                  );
      
  }
});

modal.present();

}

}

tab page

 import { Component } from '@angular/core';
 import {ViewController} from 'ionic-angular';
 import { HomePage } from '../home/home';
import { ChercherPage } from '../chercher/chercher';
import { ContactPage } from '../contact/contact';
  import { AddPage } from    '../add/add';


 @Component({
   templateUrl: 'tabs.html'
 })
    export class TabsPage {
 // this tells the tabs component which Pages
 // should be each tab's root Page
        tab1Root: any = HomePage;
        tab2Root: any = ChercherPage;
        tab3Root: any = ContactPage;
        tab4Root: any = AddPage;

    constructor(public viewCtrl: ViewController) {

  }



}

if i launch the modal it come but if i try to close it I get an error saying that navigation stack needs at least one root page

This is an open source community, I can give you multiple reasons why this post wasn’t answered. Are you experiencing this same issue? Or do you actually want to do a real contribution to this topic? Keep in mind that everyone over here is doing this as a volunteer, sometimes you might not found the answers you want or expect.

@amad4biz did you figure it out or do you still need some help?

Yeah, I’m frustrated. It’s frustrating when you can’t fix a problem and not even google will help. Yes, I have the same problem. The only thing that fixed it was commenting this.navCtrl.pop();
The runtime error says it might’ve been called too many times, but it’s only called once.

Okay. But frustration doesn’t get you anywhere when trying to get help from people who take the time to help other people. Back to your real question:

Could you please post some code? Where are you creating/calling the modal and what’s the current state of the nav stack when doing so?

 login() {
    this.angfire.auth.login({
      email: this.email,
      password: this.password
    },
      {
        provider: AuthProviders.Password,
        method: AuthMethods.Password  
      }).then((response) => {
        console.log('Logged in' + JSON.stringify(response));
        let currentuser = {
          email: response.auth.email,
          picture: response.auth.photoURL
        };
        window.localStorage.setItem('currentuser', JSON.stringify(currentuser));
        //this.navCtrl.pop();
      }).catch((error) => {
        console.log(error);
    })
  }

This is the thing I’m having issues with. When I’m loggin in, it throws a runtime error which is the title of this topic. I don’t know what the current state of the nav stack is. I only know that trying to log in with multiple instances(firebase + facebook/twitter) throws the same runtime error even if I have the .pop method commented. I’m bad at this.

Also somehow I managed to fuck up local storage. No logins save to local storage anymore. It did until a few hours ago and I’ve no idea what I’ve done wrong.

Okay I’m missing some context here. Where are you calling this loginmethod? Is it by any chance inside the modal? Because if it is, you shouldn’t use navCtrl.pop() method to close the modal. I think your question actually differs from the OP, but maybe you could provide us the steps you are taking.

Couple of questions:

  1. Do your tabs work without opening up a modal?
  2. Do you have an active tab when opening up the modal?
  3. From which component are you opening the modal?
  4. Which page is open when opening up the modal?
  5. Where are you calling the loginmethod (which component)?

Maybe it would be better if you were able to create a small repository for us with the correct context.

BTW I would use ionic-storage if I were you. More persistent and it’s a lot easier to catch errors or problems when reading/writing to localstorage etc

I did not get it figured out yet, if you have any idea how to fix it your help will be really appreciated

I’m getting this same issue on ionic 3/angular 4. It happens when I refresh a stacked view and then try to pop back. All my pages are “deep linked” where I’ve provided a name in the IonicPage metadata i.e.

@IonicPage({
  name: 'home'
})

So in the browser, the url is http://localhost:8100/#/home. After I refresh the page and then try to pop, I get ERROR Error: Uncaught (in promise): navigation stack needs at least one root page

These are the important versions in my package.json

    "@angular/core": "4.0.2",
    "ionic-angular": "3.1.1",

Did you try and set a defaultHistory? Because you’re refreshing, it seems there’s no default stack to start with.

1 Like

Exactly what we needed! Thanks @luukschoen :smile:

Answering original question, where I was stuck for half day almost - Seems like you are running this.viewCtrl.dismiss(); twice.

thanks I was able to fix it

1 Like

you can share your solution, thank you very much

I feel the same way when I try to do things I suck at. Then I practice.

2 Likes

Your comment says more about you than it does about Ionic.

I was in the process of upgrading Ionic to the latest version and was stuck on this problem for many hours.

I dug through my code for many hours, thinking that the problem was with Ionic. It turns out I had code in my app.component.ts that called pop(), which caused me to pop when I was already on the root page. For some reason it only started calling errors after upgrading.

From my experience with Ionic, and I have been using it for about a year, they fix things fast and the changes are always good. This community is also usually pretty nice and helpful.

I think you might have a situation where you’re calling dismiss() twice. Only call it in the component of the modal that you’re trying to dismiss, not the page from which you’re opening the modal too.

I hope that helps :slight_smile: