Root Page Ionview not loaded

Hi, I’m having trouble with switching pages with different sliding menu. For example, when I try to use setRoot to my menu page, the set rootPage view won’t load and retains the old root page. Does this commonly happens to you?

export class DefaultMenu {
rootPage: any = 'DefaultPage';
  constructor() {,
  }
  gotoPage() {
    this.navCtrl.setRoot('MenuPage');
  }
}
export class MenuPage {
	rootPage: any = 'HomePage';
}

The MenuPage is called through this.navCtrl.setRoot('MenuPage') from another or default page. The menu is loaded but its rootPage which should be showing the HomePage is not showing, instead retains the old/default rootPage which is the DefaultPage.

Has anyone encountered this kind of problem especially for starters like me?

I’m using Lazy Loading by the way.


Update.
I got the variable navCtrl mixed up with NavController instead of Nav. My bad. I don’t know why but it should be this.nav.setRoot(). I’m confused with the two.

Why don’t you assign to rootPage instead of calling setRoot()? Why is rootPage not a string?

I have default page which has a function like this:

  gotoPage() {
    this.navCtrl.setRoot('MenuPage');
  }

So basically, my app loads to a default page that calls the MenuPage with an assigned rootPage in it.

http://localhost:8100/#/default-menu/default-page-> should be #/menu/home after but instead it loads as #menu/default-page. Notice the last page remains instead of loading the MenuPage

Just to expand on this, here’s how it would look in a normal app.component

import { HomePage} from '../pages/home/home';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = HomePage;

Which Ion LifeCycle Event are you calling it in?

I have updated my first post, sorry about the confusion.