Ionic 2: custom provider causing “Can't resolv

Question

I've created a test provider and I'm trying to inject it into two pages so I can share data and methods, but when I add the provider to the page constructor I get an error, saying "Can't resolve all parameters for CharacterPage: (NavController, NavParams, ?)".

Ionic Framework: 2.0.1
Ionic Native: 2.4.1
Ionic App Scripts: 1.1.0
Angular Core: 2.2.1
Angular Compiler CLI: 2.2.1
Node: 6.9.4
OS Platform: Windows 10
Navigator Platform: Win32

app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { MyApp } from './app.component';
import { BookNavigation } from '../providers/book-navigation';

@NgModule({
  declarations: [   //STUFF   ],
  imports: [ IonicModule.forRoot(MyApp)  ],
  bootstrap: [IonicApp],
  entryComponents: [  //STUFF ],
  providers: [
    {
    provide: ErrorHandler, 
    useClass: IonicErrorHandler,
    },
    Storage, 
    BookNavigation,
    ]
})
export class AppModule {}

app.components.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { BookNavigation } from '../providers/book-navigation';
import { HomePage } from '../pages/home/home';


@Component({
  templateUrl: 'app.html',
  providers: [BookNavigation]
})
export class MyApp {
  rootPage = HomePage;
  constructor(platform: Platform) {
    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.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });

}

characterPage.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { BookNavigation } from '../../providers/book-navigation';

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

  constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              public bookNavigation: BookNavigation) {}

}

Service Provider

import { Injectable } from '@angular/core';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Injectable()
export class BookNavigation {

  constructor(public navCtrl: NavController, public navParams: NavParams, public storage:Storage) {
    console.log('Hello BookNavigation Provider');
  }

}

Answer 1

It happend to me because i used a provider that was'nt really correct, but there was no error on the provider. I removed the provider from my component and everything was fine

Answer 2

Try using forwardRef. The BookNavigation Service seems to be forming a circular dependency with some of the imports. In CharacterPage,

 constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              public @Inject(forwardRef(() =>BookNavigation)bookNavigation: BookNavigation) {}

Answer 3

I'm leaving what I found out here. Apparently it's not a good idea to use a service for navigation purposes (see here https://forum.ionicframework.com/t/whats-the-best-practice-if-you-want-to-control-the-navigation-from-a-service/52616/2). It causes a series of errors that lead to other problems so I decided just to abandon the idea. I'm still unsure of how to bypass this problem and have just one file where I can set all my data and methods keeping the rest of the code clean. I've read that the best way it's probably trough events emmitters but I still don't know enough about them to be sure