title: Error in class MyApp - caused by: Cannot read property 'setRoot' of undefined
body: <p>I just created an <code>ActivitiesPage</code> using <code>ionic g page activities</code>. Following is the default page generated by the CLI.</p>
  
  <p><strong><code>ActivitiesPage</code> (activities.ts)</strong></p>
  
  <pre><code>// imports..
  
  @Component({
    selector: 'page-activities',
    templateUrl: 'activities.html'
  })
  export class ActivitiesPage {
    constructor(public navCtrl: NavController, public navParams: NavParams){}
  }
  </code></pre>
  
  <p>I've setup a side menu from where user can select <code>Activities</code> from a list of pages. </p>
  
  <p><strong><code>Class MyApp</code> (app.component.ts)</strong></p>
  
  <pre><code>import { ActivitiesPage } from '../pages/activities/activities';
  // other imports
  
  @Component({
    templateUrl: 'app.html',
  })
  export class MyApp
  {
    @ViewChild(NavController) navCtrl: NavController;
    rootPage = LoginPage; // TabsPage for bottom nav tabs
    activitiesPage: any = ActivitiesPage;
  
    constructor(public platform: Platform) {
      platform.ready().then(() =&gt; {
        // Okay, so the platform is ready and our plugins are available.
        // Here you can do any higher level native things you might need.
        StatusBar.styleDefault();
        Splashscreen.hide();
      });
    }
  
    openPage(page: any)
    {
      this.navCtrl.setRoot(page);
    }
  
  }
  </code></pre>
  
  <p><strong><code>App Template</code> (app.html)</strong></p>
  
  <pre><code>&lt;ion-menu [content]="content"&gt;
    &lt;ion-header&gt;
      &lt;ion-toolbar&gt;
        &lt;ion-title&gt;RnB MENU&lt;/ion-title&gt;
      &lt;/ion-toolbar&gt;
    &lt;/ion-header&gt;
    &lt;ion-content&gt;
      &lt;ion-list&gt;
  
        &lt;button ion-item (click)="openPage(HomePage)"&gt;
          &lt;ion-icon name="home"&gt;&lt;/ion-icon&gt;&amp;nbsp;&amp;nbsp;
           Home
        &lt;/button&gt;
  
        &lt;button ion-item (click)="openPage(MessagesPage)"&gt;
          &lt;ion-icon name="chatboxes"&gt;&lt;/ion-icon&gt;&amp;nbsp;&amp;nbsp;
          Messages
        &lt;/button&gt;
  
        &lt;button ion-item (click)="openPage(ActivitiesPage)"&gt;
          &lt;ion-icon name="analytics"&gt;&lt;/ion-icon&gt;&amp;nbsp;&amp;nbsp;
          Activities
        &lt;/button&gt;
  
       &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  &lt;/ion-menu&gt;
  
  &lt;ion-nav id="nav" #content [root]="rootPage"&gt;&lt;/ion-nav&gt;
  </code></pre>
  
  <p>I'm getting the following error when I try to open <code>ActivitiesPage</code> via the menu.</p>
  
  <blockquote>
    <p>Error in ./MyApp class MyApp - caused by: Cannot read property 'setRoot' of undefined</p>
  </blockquote>