Problem with service and providers

Ionic Framework ionic-v3
1

Hi,

I have made a service to share data between components. However they don’t share the same service.
I tried to include it in the ng-module, but I got this “weird” error:
"Unhandled Promise rejection: Component OrderingService is not part of any NgModule or the module has not been imported into your module. ; Zone: <root> ; Task: Promise.then ; Value: Error: Component OrderingService is not part of any NgModule or the module has not been imported into your module."

YES IT IS!

import { NgModule, ErrorHandler } from '@angular/core';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { MenuPage } from '../pages/menu/menu';
import { OrderingPage } from '../pages/ordering/ordering'
import { ServingPage } from '../pages/serving/serving'
import {ProductItem} from '../pages/product/product'
import {Shoppingkart} from "../pages/shoppingkart/shoppingkart"


import { OrderingService } from '../providers/orderingservice'
import { ServingService } from '../providers/servingservice'


import { AngularFireModule } from 'angularfire2'

export const firebaseConfig = {
  apiKey: "AIzaSyAiDYQ7ys",
  authDomain: "booka$",
  databaseURL: "httpio.com",
  storageBucket: "bookm",
  messagingSenderId: "8969817"
};


@NgModule({
  declarations: [
    MyApp,
    HomePage,
    OrderingPage,
    ServingPage,
    ProductItem,
    Shoppingkart,
    



  ],
  imports: [
    IonicModule.forRoot(MyApp),
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  bootstrap: [IonicApp,OrderingService],
  entryComponents: [
    MyApp,
    HomePage,
    OrderingPage,
    


  ],
  providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },OrderingService]
})
export class AppModule { }

Any Help?

2

What’s weird about that error message? I think it’s great. It tells you exactly what is wrong: you have not declared OrderingService in your app module’s providers list.

3

providers: [{ provide: ErrorHandler, useClass: IonicErrorHandler },OrderingService]

(scroll the code)

4

Why are you bootstrapping anything other than the app component?

5

In order to share the service?

6

Can you see if taking it out of bootstrap helps anything? That shouldn’t be necessary to share the service; merely having it declared in providers should be sufficient.

7

If I remove it, I don’t have the error. But still, the service is not shared between componenent.

8

I want “product” to share the same service

import { Component, Input } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { OrderingService } from "../../providers/orderingservice"

@Component({
  selector: 'product',
  templateUrl: 'product.html',
  providers:[OrderingService]
})
export class ProductItem {
  @Input() product: any;
  public number: number;

  constructor(public navCtrl: NavController, public navParams: NavParams, private _order: OrderingService) {
    this.number = 0;

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ProductsPage');
  }

  addOneUnity() {
    this.number++;
    this._order.addAnOrder(this.product.name)
  }
  removeOneUnity() {
    if (this.number > 0){

    this.number = this.number - 1;
    this._order.removeAnOrder(this.product.name)
    }
  }


}
9

Remove the providers from your component. That is what is causing it to be instantiated at a lower level.

10

Yes ;-). I was trying to add lines… and I just had to remove them…

Sorry and thanks!