Ionic2 - Reusing Service with TabsPage breaks app, causes runtime error on startup

Question

I am new to Ionic2 and have come across an error from what seems to be a circular dependency with a page that I can't figure out.

Error: Can't resolve all parameters for HiredJobsPage: (?).

I whittled my code down to bare bones in order to pinpoint the problem; it has something to do with TabsPage.

I'm using Ionic2's tabs template project, in which is a tabs.ts file. This file specifies 3 tabs to be shown at the bottom of the page, each linked to another page.

import { Component } from '@angular/core';

import { JobRequestsPage} from '../job-requests/job-requests';
import { HiredJobsPage } from '../hired-jobs/hired-jobs';
import { ProfilePage } from "../profile/profile";

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = ProfilePage;
  tab2Root: any = JobRequestsPage;
  tab3Root: any = HiredJobsPage;

  constructor() {

  }
}

I also have a very basic service, that does nothing other than assign an instance of TabsPage into a local variable.

import {Injectable} from '@angular/core';
import {TabsPage} from "../../pages/tabs/tabs";

@Injectable()
export class MyService {

  foo: any = TabsPage;

  constructor() {

  }
}

This service works fine, and the project compiles and runs, when MyService is injected into only one component. However, when I inject the service into two components, the project breaks and won't run. If I assign another page (ProfilePage, JobRequests, null, etc.) into the foo variable, things are fine; it is only TabsPage which causes the error. Why would this be?

Answer 1

Check out the angular dependency injection and forward reference in particular.Another blog post is here

This service works fine, and the project compiles and runs, when MyService is injected into only one component. However, when I inject the service into two components, the project breaks and won't run. If I assign another page (ProfilePage, JobRequests, null, etc.) into the foo variable, things are fine; it is only TabsPage which causes the error.

Your tabs page(T) refers to classes: P,J and H. Service(S) refers to T.

     T        S
    /|\       |
   / | \      |
  P  J  H     T

Based on which classes you choose to inject your service,you will end up with circular dependency of pointing back to Tabs Page (T). A solution is to use forward reference when you inject the service.

constructor(@Inject(forwardRef(() => MyService )) myService)