# App.getComponent('nav') undefined in MyApp class constructor

**URL:** <https://forum.ionicframework.com/t/app-getcomponent-nav-undefined-in-myapp-class-constructor/44264>\
**Category:** ionic-v3\
**Created:** [February 20, 2016, 4:58am UTC](https://forum.ionicframework.com/t/app-getcomponent-nav-undefined-in-myapp-class-constructor/44264 "2016-02-20T04:58:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jasonwaters](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jasonwaters/32/96926_2.png) [@jasonwaters](https://forum.ionicframework.com/u/jasonwaters)\
**Post date:** [February 20, 2016, 4:58am UTC](https://forum.ionicframework.com/t/app-getcomponent-nav-undefined-in-myapp-class-constructor/44264/1 "2016-02-20T04:58:31Z")

</div>

```auto
export class MyApp {
  root: Type = WelcomePage;
	app:IonicApp;

	constructor(app: IonicApp, events: Events, platform: Platform, authService:AuthService) {
		this.app = app;

		let t = setTimeout(() => {
			let nav = this.app.getComponent('nav');
			console.log(nav);
		}, 100);

```

This code successfully gets the ‘nav’ component after a 100 ms delay. But if I remove the timeout, the getComponent call returns undefined. Using a timeout feels hackish, is there a better way to wait until the ion-nav component has been rendered before getting the component?

---

<div class="post-metadata">

**Author:** ![hntan](https://avatars.discourse-cdn.com/v4/letter/h/5daacb/32.png) [@hntan](https://forum.ionicframework.com/u/hntan)\
**Post date:** [March 6, 2016, 5:00am UTC](https://forum.ionicframework.com/t/app-getcomponent-nav-undefined-in-myapp-class-constructor/44264/2 "2016-03-06T05:00:23Z")

</div>

I have a similar issue with ionic 2 beta.2

```auto
Uncaught EXCEPTION: Error during evaluation of "click"
ORIGINAL EXCEPTION: TypeError: Cannot read property 'setRoot' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'setRoot' of undefinedat MyApp.openHomePage 
    at AbstractChangeDetector.ChangeDetector_MyApp_0.handleEventInternal (viewFactory_MyApp:129:37)
    at AbstractChangeDetector.handleEvent (http://localhost:8100/build/js/app.bundle.js:14026:30)
    at AppView.triggerEventHandlers (http://localhost:8100/build/js/app.bundle.js:18333:37)
    at eval (viewFactory_MyApp:275:98)

```

My code is below

```auto
import {App, IonicApp, Platform, MenuController, Menu, Toolbar} from 'ionic-angular';
import {HomePage} from './pages/home/home';

@App({
  template: `
    <ion-menu persistent="true" [content]="content">
      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>
      <ion-content>
        <ion-list>
          <button ion-item (click)="openHomePage()">
            Home
          </button>
        </ion-list>
      </ion-content>
    </ion-menu>

    <ion-nav #content [root]="rootPage"></ion-nav>
  `,
  providers: [],
  config: {}, // http://ionicframework.com/docs/v2/api/config/Config/
  directives: [Menu, Toolbar]
})
export class MyApp {
  rootPage: any;

  constructor(
    public app: IonicApp,
    public platform: Platform,
    public menu: MenuController) {

    this.rootPage = HomePage;

    this.platform.ready().then(() => {

    });
  }

  openHomePage() {
    this.menu.close();
    let nav = this.app.getComponent('nav');
    nav.setRoot(this.rootPage);
  }
}

```

---

<div class="post-metadata">

**Author:** ![Vukasin](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vukasin/32/99351_2.png) [@Vukasin](https://forum.ionicframework.com/u/Vukasin)\
**Post date:** [March 29, 2016, 7:40am UTC](https://forum.ionicframework.com/t/app-getcomponent-nav-undefined-in-myapp-class-constructor/44264/3 "2016-03-29T07:40:36Z")

</div>

@jasonwaters It is all about correct approach.

In constructor platform isn’t yet ready so even your code with timeout will not work.

Here is how code should looks like:

```auto
export class GCloud {
    platform:Platform;
    pages:{title:string; component:any}[];
    rootPage:any;
    app:IonicApp;
    nav:NavController;

    constructor(app:IonicApp,
                platform:Platform) {
        this.platform = platform;
        this.app = app;
    }

    ngOnInit() {
        this.initializeApp();
        this.pages = [
            {title: 'Dashboard', component: DashboardPage}
        ];

        this.rootPage = DashboardPage;
    }

    initializeApp() {
        var self = this;
        this.platform.ready().then(() => {

            StatusBar.styleDefault();

            var nav:NavController = this.app.getComponent("nav");
            this.nav = nav;

            if (!hasAuthToken())
                nav.setRoot(LoginPage);
        });
    }

    openPage(page) {
        // Reset the content nav to have just this page
        // we wouldn't want the back button to show in this scenario
        this.nav.setRoot(page.component);
    }
}

```

Hope this helps 😉