angular - Ionic 2: anpassad leverantör orsakar "Kan inte lösa alla parametrar"

Jag har skapat en testprovider och försöker injicera den i två sidor så att jag kan dela data och metoder, men när jag lägger till providern i sidkonstruktorn får jag ett fel som säger "Kan inte lösa alla parametrar för 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.komponenter.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) {}

}

Tjänsteleverantör

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');
  }

}

Svar #1

Försök använda forwardRef. BookNavigation-tjänsten verkar bilda ett cirkulärt beroende med några av importerna. I CharacterPage,

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

Svar #2

Jag lämnar vad jag har tagit reda på här. Tydligen är det inte en bra idé att använda en tjänst för navigationsändamål (se här https://forum.ionicframework.com/t/whats-the-best-practice-if-you-want-to-control-the-navigation-from-a-service/52616/2). Det orsakar en serie fel som leder till andra problem, så jag bestämde mig för att bara överge idén. Jag är fortfarande osäker på hur man kan kringgå detta problem och ha bara en fil där jag kan sätta all min data och alla metoder, samtidigt som resten av koden hålls ren. Jag har läst att det bästa sättet förmodligen är genom eventemitter, men jag vet fortfarande inte tillräckligt om dem för att vara säker.