Can't access rootNav after upgrade to Beta 11

Ionic Framework ionic-v3
1

Since upgrading to Beta 11 the following code no longer works…

this.navController.rootNav.setRoot( MyPage )

I am getting the following error…

Property 'rootNav' does not exist on type 'NavController'.

I have been using the root navigation controller to get outside the navigation stack of tabs. As far as i know, I don’t have access to the root nav through ViewChild as I am outside the scope of my main app file at this point.

Was this intended with the upgrade to Beta 11? If so moving forward what would be the recommended method of accessing the root nav?

1 Like
2

Hi,

On this file, a comment says that rootNav is deprecated and refers to the method app.getRootNav().

So I think you can test this

this.app.getRootNav().setRoot( MyPage )

3 Likes
3

Thanks @anto, it works for me !

4

Perfect. Does exactly what I need. Thanks!

5

I have the same problem… But I dont know where can i get this.app :frowning: when I import MyApp it says:
Property 'getRootNav' does not exist on type 'MyApp'.
Can you help me, please?

6

Try…

import { App } from 'ionic-angular';

And then in your constructor…

constructor ( private app: App ) {}

4 Likes
7

Thank you! :slight_smile:

8

What is with
this.nav.present(filterModal);

9

@danielmm1997 you have probably already solved but for other ones, I solved it by changing how the spinner is being displayed according to the docs here: http://ionicframework.com/docs/v2/components/#loading

OLD:

import { Injectable } from '@angular/core';
import { Loading, NavController } from 'ionic-angular';                                                                                                                         

@Injectable()
export class Ui {

    private nav: NavController;
    private loading: any;

    constructor(nav: NavController) {

        this.nav = nav;
    }

    /**
     * Displays the loading layer.
     *
     * @return void.
     */
    showLoader(settings: any = {}) {

        settings.text = settings.text || 'Actualizando...';

        this.nav.present(this.loading = Loading.create({
            content: settings.text
        }));
    }   

    /** 
     * Hides the loading layer.
     *
     * @return void.
     */
    hideLoader() {

        this.loading.dismiss();
    }   
}

NEW:

import { Injectable } from '@angular/core';
import { LoadingController } from 'ionic-angular';

@Injectable()
export class Ui {

    private loader: any;
                                                                                                                                                                                
    constructor(public loadingCtrl: LoadingController) {}

    /**
     * Displays the loading layer.
     *
     * @return void.
     */
    showLoader(settings: any = {}) {

        settings.text = settings.text || 'Actualizando...';

        this.loader = this.loadingCtrl.create({
            content: settings.text
        });

        this.loader.present();
    }   

    /** 
     * Hides the loading layer.
     *
     * @return void.
     */
    hideLoader() {

        this.loader.dismiss();
    }   
}
10

You can tell me if it works on providers, inside @Injectable() ?

11

I think it is a major mistake to try to access anything involving the view layer (including navigation) from inside service providers. Providers should provide data, and have absolutely no concept or concern with how it is displayed.

12

How do i make a background service runing behind the app. And change pages if i get certain result ? promises ?

13

Expose an Observable in the service, subscribe to it in the app’s constructor, react to emitted events by changing the page there.

15

What I do is to simply modify the rootPage property of the app component, and let Ionic do the rest. For example, I frequently have an authentication provider service, that is responsible for interacting with storage and authentication servers. It exposes an Observable<boolean> (that is internally a ReplaySubject with a stack depth of 1). In the app’s constructor, I do something like this:

_sink.authenticationNotifier().subscribe((authed) => {
  if (authed) {
    this.rootPage = TabsPage;
  } else {
    this.rootPage = LoginPage;
  }
});

This gives you logout functionality for virtually free. Anybody can inject the provider of the authentication notifier, call logout on it, which internally calls authenticationNotifier.next(false) and you don’t have to worry about futzing with navigation.

3 Likes
16

Thanks for your tips everything worked just fine today. thank you

17

Thanks, is working…!!

import { App } from ‘ionic-angular’;

18

That is a very good approach.

Thanks for the tip.

19

This solved my issue perfectly.

Thanks very much.