Ionic 2 shared provider

Hi there :slight_smile:

I’m just getting started with ionic 2 and currently i try to create a shared provider.
That means i want to have one provider shared through all pages.
So i started to google for that (and found this http://www.joshmorony.com/an-in-depth-explanation-of-providers-in-ionic-2/). It turns out, that you should give the provider to
the function that bootstraps your app. Like this:
ionicBootstrap(MyApp, [MyService]);
But there is no such line in my Project :confused: So i tried to add it to the @NgModule in the app.module.ts

@NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
providers: [Shared]
})

and also injected it in the app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { Shared } from '../providers/shared';
import { TabsPage } from '../pages/tabs/tabs';
@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`,
  providers: [Shared]
})
export class MyApp {
  rootPage = TabsPage;
  constructor(platform: Platform, public sharedProvider: Shared) {
    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();
    });
  }
}

But in my pages there is no such this.sharedProvider. And it tells me, that there is no such thing as super :frowning:
Just don’t know how to get there.

ionic info

Cordova CLI: 6.3.1
Gulp version:  CLI version 3.9.1
Gulp local:  
Ionic Framework Version: 2.0.0-rc.0
Ionic CLI Version: 2.1.0
Ionic App Lib Version: 2.0.0-beta.20
ios-deploy version: 1.8.5 
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v6.7.0
Xcode version: Xcode 8.0 Build version 8A218a

did you define it in constructor function as parameter?

you need to set the provider on the Component from witch you want to inherit from
in the Provider definition “providers: [Shared]”

and in the child components you load the provider component

import { Shared } from ‘…your/provider/shared’;

and in the class constructor

export class myPage {
constructor(public shared Shared)
}

and from there you can reference to the provider with:

this.shared.function()

Also make sure Shared is decorated with @Injectable().

Heyho,

thank you for your answer. I did it. So to summarize (step by step what @rapropos just said ) it for others who might struggle here:

  1. Add the provider to your app/app.components.ts

import { Component } from ‘@angular/core’;

import { Platform } from ‘ionic-angular’;
import { StatusBar } from ‘ionic-native’;
import { Shared } from ‘…/providers/shared’;
import { TabsPage } from ‘…/pages/tabs/tabs’;
@Component({
template: <ion-nav [root]="rootPage"></ion-nav>,
providers: [Shared]
})
export class MyApp {
rootPage = TabsPage;

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

As you see it’s just an importing and adding it to the component (which is the big daddy aka parent)

  1. It all pages that need the provider import it and add it to the constructor. Don’t add it to the component. It’s already there.

    import { Component } from ‘@angular/core’;
    import { NavController } from ‘ionic-angular’;
    import { Shared } from ‘…/…/providers/shared’;
    @Component({
    selector: ‘page-about’,
    templateUrl: ‘about.html’
    })
    export class AboutPage {

    constructor(public navCtrl: NavController, public provider: Shared) {
    console.log(this.provider);
    }
    }

And thats it. If anyone reads this. Can somebody explain to me, why this rte is messing up code so hard instead of just giving it a grey background or some? And also i makes 2. into another 1.
I don’t understand that and currently i don’t have the time to figure that out.

Anyway thanks to @rapropos and hopefully this will save some peoples time :slight_smile:

1 Like