Injecting service not working

Question

I created something very basic and quick in a couple of minutes so it is easy to reproduce.

I created an app using:

ionic start blank --v2

then I create a provider:

ionic g provider FacebookFriends

I then put this code inside of on my provider:

import {Injectable, Inject} from 'angular2/core';
import {Http} from 'angular2/http';

/*
  Generated class for the FacebookFriends provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class FacebookFriends {
  constructor(@Inject(Http) http) {
    this.http = http;
    this.data = null;
  }

  load() {
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
    }

    // don't have the data yet
    return new Promise(resolve => {
      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
      this.http.get('path/to/data.json')
        .map(res => res.json())
        .subscribe(data => {
          // we've got back the raw data, now generate the core schedule data
          // and save the data for later reference
          this.data = data;
          resolve(this.data);
        });
    });
  }
}

I then try to inject this into app.js:

import {App, Platform} from 'ionic-angular';
import {TabsPage} from './pages/tabs/tabs';
import {FacebookFriends} from './providers/facebook-friends/facebook-friends';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {}, // http://ionicframework.com/docs/v2/api/config/Config/,
  providers: [FacebookFriends]
})
export class MyApp {
  static get parameters() {
    return [[Platform]];
  }

  constructor(platform, private _facebookFriends) {
    this.rootPage = TabsPage;

    platform.ready().then(() => {
    });
  }
}

This is all I did. When I run ionic serve I get many errors. I get that the there is an unknown token and it points at the @Inject and @Injectable words. I also get an unexpected token at the private _facebookFriends line.

Also if I try to add a types to the constructor so I would have platform:Platform and _facebookFriends:FacebookFriends I also get that the ':' are unknown tokens.

I am essentially just trying to call a service from my app.js, but it is not working.

check out [this answer](http://stackoverflow.com/a/35682570/3125880) — Abdulrahman Alsoghayer, Mar 21 '16 at 00:47

score 0 · Answer 1 · edited Mar 21 '16 at 06:29

0

Http is provided by default in Ionic. It is enough to add a parameter to the constructor:

import {Http} from 'angular2/http';


@Injectable
export class FacebookFriends{
  constructor(private http:Http){}
}

edited Mar 21 '16 at 06:29

Günter Zöchbauer

623,577
216
2,003
1,567

answered Mar 21 '16 at 06:09

AishApp

4,142
2
29
33

score 0 · Answer 2 · answered Mar 21 '16 at 08:48

I think that you need to add the FacebookFriends in the parameters getter:

export class MyApp {
  static get parameters() {
    return [[Platform, FacebookFriends]];
  }

  (...)
}

The array returned by the getter needs to match all the parameters you expect in the constructor. If you have two parameters, you need two parameters in the array. Defining the service in the providers attribute only specifies that this one can be injected. To actually inject it, you need to define it in the parameters getter.

You also need to define a parameters getter for your service:

@Injectable()
export class FacebookFriends {
  static get parameters() {
    return [[Http]];
  }

  constructor(http) {
    this.http = http;
    this.data = null;
  }

  (...)
}

You can notice that with ES6, it's not possible to use @Inject at the level of constructor parameters...

Injecting service not working

2 Answers2