# Injecting service not working

**URL:** <https://forum.ionicframework.com/t/injecting-service-not-working/46996>\
**Category:** ionic-v3\
**Created:** [March 20, 2016, 11:50pm UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996 "2016-03-20T23:50:23Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![polska03](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@polska03](https://forum.ionicframework.com/u/polska03)\
**Post date:** [March 20, 2016, 11:50pm UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/1 "2016-03-20T23:50:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 21, 2016, 12:08am UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/2 "2016-03-21T00:08:52Z")

</div>

> [@polska03](#):
>
> 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.

That’s probably because those are TypeScript concepts, and you’re not working with a TypeScript project. So I would say your options are (a) use TypeScript and go that route, or (b) add `FacebookFriends` to `MyApp`’s static `parameters` method.

---

<div class="post-metadata">

**Author:** ![polska03](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@polska03](https://forum.ionicframework.com/u/polska03)\
**Post date:** [March 21, 2016, 12:13am UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/3 "2016-03-21T00:13:29Z")

</div>

I would like to use typescript. How could I do this in ionic2? I have just been following their getting started guide to create the project?

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 21, 2016, 12:14am UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/4 "2016-03-21T00:14:40Z")

</div>

> [@polska03](#):
>
> I would like to use typescript. How could I do this in ionic2?

Pass the `--ts` option to the `ionic start` command that generates the project.

---

<div class="post-metadata">

**Author:** ![polska03](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@polska03](https://forum.ionicframework.com/u/polska03)\
**Post date:** [March 21, 2016, 12:29am UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/5 "2016-03-21T00:29:11Z")

</div>

So I ran the command:

`ionic start testproject blank --v2 --ts`

It created the project. I created the provider template again.

My provider code (which is still facebook-friends.js instead of a typescript extension not sure if this is the way it should be?):

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

```

my app.ts:

```
import {App, Platform} from 'ionic-angular';
import {HomePage} from './pages/home/home';
import {FacebookFriends} from './providers/facebook-friends/facebook-friends';

@App({
  template: '<ion-nav [root]="rootPage"></ion-nav>',
  config: {},
  providers: [FacebookFriends] 
})
export class MyApp {
  rootPage: any = HomePage;

  constructor(platform: Platform, private _fb: FacebookFriends) {
    platform.ready().then(() => {

    });
  }
}

```

I get the following error when I run ionic serve:

```
./app/providers/facebook-friends/facebook-friends.js
Module parse failed: /home/susan/testing/app/providers/facebook-friends/facebook-friends.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {Injectable, Inject} from 'angular2/core';
| import {Http} from 'angular2/http';
| 
 @ ./app/app.ts 13:25-81,[default] /home/susan/testing/app/app.ts:3:30 
Cannot find module './providers/facebook-friends/facebook-friends'.,[default] /home/susan/testing/node_modules/angular2/src/facade/promise.d.ts:1:9 
Cannot re-export name that is not defined in the module. (CLI v2.0.0-beta.19)
```

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 21, 2016, 12:31am UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/6 "2016-03-21T00:31:51Z")

</div>

> [@polska03](#):
>
> (which is still facebook-friends.js instead of a typescript extension

That’s probably your problem. Try with a ‘.ts’ extension.

---

<div class="post-metadata">

**Author:** ![iignatov](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/iignatov/32/100112_2.png) [@iignatov](https://forum.ionicframework.com/u/iignatov)\
**Post date:** [March 21, 2016, 1:09am UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/7 "2016-03-21T01:09:52Z")

</div>

Unfortunately currently there are no generators for TypeScript. This is a known issue - see [ionic-cli issue #753](https://github.com/driftyco/ionic-cli/issues/753). The only solution at the moment is to rename the file to `.ts` and convert it to TypeScript, i.e.:

```auto
import {Injectable} 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 {
  data: any = null;
  
  constructor(private http: Http) {
  }

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

```

---

<div class="post-metadata">

**Author:** ![polska03](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@polska03](https://forum.ionicframework.com/u/polska03)\
**Post date:** [March 21, 2016, 4:11am UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/8 "2016-03-21T04:11:00Z")

</div>

thank you so much for the information! I have tried to convert it now and it runs, but one error shows up stating:

ERROR in [default] /home/susan/testing/node\_modules/angular2/src/facade/promise.d.ts:1:9  
`Cannot re-export name that is not defined in the module.`

I googled the error and it is an error with Angular2. It is fixed, but since Ionic is delayed with the angular2 it is still not merged. There is a workaround which can be found here (Hope it helps someone): [https://github.com/angular/angular/issues/6468](https://github.com/angular/angular/issues/6468)

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [March 21, 2016, 7:38am UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/9 "2016-03-21T07:38:56Z")

</div>

> [@polska03](#):
>
> I googled the error and it is an error with Angular2. It is fixed, but since Ionic is delayed with the angular2 it is still not merged.

You might recognize me from such places as “reporting that issue”. You should be able to update your `package.json` to something past angular beta 7 and everything should be copacetic.

---

<div class="post-metadata">

**Author:** ![polska03](https://avatars.discourse-cdn.com/v4/letter/p/57b2e6/32.png) [@polska03](https://forum.ionicframework.com/u/polska03)\
**Post date:** [March 21, 2016, 9:19pm UTC](https://forum.ionicframework.com/t/injecting-service-not-working/46996/10 "2016-03-21T21:19:58Z")

</div>

Thanks! I didn’t know I could do that!