Getting error 'No provider for NavController' when passing data from child to parent component

I’m trying to send data from my home.ts file to the app.component.ts file using EventEmitter and Output. But everytime I reference the home page component in my app.html I get this seemingly random error. When I remove NavController from the constructor in home.ts, the error goes away.

home.ts :

 import { Component, EventEmitter, Output } from '@angular/core';
 import { NavController } from 'ionic-angular';

 selector: 'page-home',
 templateUrl: 'home.html',

 export class HomePage {
 message : any;
 @Output() notify : EventEmitter<Object> = new EventEmitter<Object>();

constructor(public navCtrl: NavController) {

this.message = {"Name":"Sid", "Age":17};

app.html :

 <ion-nav [root]="rootPage"></ion-nav>
 <page-home (notify)="getChildData($event)"></page-home>

app.component.ts :

    import { Component, ViewChild, ViewChildren } from '@angular/core';
    import { Platform } from 'ionic-angular';
   import { StatusBar } from '@ionic-native/status-bar';
   import { SplashScreen } from '@ionic-native/splash-screen';

   import { HomePage } from '../pages/home/home';
    templateUrl: 'app.html'
   export class MyApp {
    rootPage:any = HomePage;

   constructor(platform: Platform, statusBar: StatusBar, splashScreen: 
   SplashScreen) {
   platform.ready().then(() => {
    // Okay, so the platform is ready and our plugins are available.
    // Here you can do any higher level native things you might need.




How do I fix this error ? I need to use the NavController so I can’t remove it. I want to still be able to send data from the child component to the parent component

This is the problematic line. You can’t embed pages in other pages. Take this out and simply let the rootPage assignment do its job.

That makes a lot of sense actually ! But how will I call the ‘notify’ event in my app.html file ? I need to send data from home.ts to the app.component.ts file

I would use a mutually injected service provider for this.

How do people normally send data from the child component to the parent component in Ionic 2 ? Because EventEmitter and Output are normally used for Angular 2, but that’s causing this NavController error here.

I don’t think that’s true. I think trying to embed a page in a page is causing that error, so don’t do that.