Ionic 2 "Can't resolve all parameters" when importing a component

Question

My home component has functions to operate on my main array of list items. I am trying to access these functions through another component called item-details.

However, when I import the HomePage component, and add it to the constructor for item-details.ts, I get the following error:

"Runtime Error Can't resolve all parameters for ItemDetailPage: ([object Object], [object Object], ?)".

item-details.ts:

import { Component } from '@angular/core';
import { NavParams, NavController } from 'ionic-angular';
import { HomePage } from '../home/home';

@Component({
  selector: 'page-item-detail',
  templateUrl: 'item-detail.html'
})
export class ItemDetailPage {
  title;
  description;

  constructor(
    public navParams: NavParams,
    public navController: NavController,
    public home: HomePage
  ){

  }

  ionViewDidLoad() {
    this.title = this.navParams.get('item').title;
    this.description = this.navParams.get('item').description;
  }

  deleteItem(item){
    //call deleteItem in home.ts
  }
}

home.ts:

import { Component } from '@angular/core';
import { ModalController, NavController, ViewController } from 'ionic-angular';
import { AddItemPage } from '../add-item/add-item'
import { ItemDetailPage } from '../item-detail/item-detail';
import { Data } from '../../providers/data/data';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  public items = [];

  constructor(
    public navCtrl: NavController,
    public modalCtrl: ModalController,
    public dataService: Data
   ) {
    this.dataService.getData().then((todos) => {
      if(todos){
        this.items = JSON.parse(todos);
      }
    });
  }

  ionViewDidLoad(){

  }

  addItem(){
    let addModal = this.modalCtrl.create(AddItemPage);

    addModal.onDidDismiss((item) => {
          if(item){
            this.saveItem(item);
          }
    });
    addModal.present();
  }

  saveItem(item){
    this.items.push(item);
    this.dataService.save(this.items);
  }

  viewItem(item){
    this.navCtrl.push(ItemDetailPage, {
      item: item
    });
  }

  deleteItem(item){
    //code to delete an item from items array
  }
}

And here is a picture of my file structure in case it is relevant. file structure

What's wrong and how can I fix it?

Answer 1

In your ItemDetailPage component, you're asking the container to resolve a HomePage component when you should really be asking for a service instead.

As shown above, in your ItemDetailPage, you are trying to get a reference to a HomePage component (the creating, and also a ItemDetailPage referencing component), and that makes for a circular reference. That will not work.

There's really no need to resolve a component when you have a service that will do what you need. That is what services are for, to share functionality. Move your item management code (saveItem, addItem, deleteItem) out into a service that the Home, and ItemDetail pages can each reference and use.