# Why can't I inject a service into a page?! (JavaScript)

**URL:** <https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454>\
**Category:** ionic-v3\
**Created:** [March 25, 2016, 3:56pm UTC](https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454 "2016-03-25T15:56:58Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rloui](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rloui/32/98753_2.png) [@rloui](https://forum.ionicframework.com/u/rloui)\
**Post date:** [March 25, 2016, 3:56pm UTC](https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454/1 "2016-03-25T15:56:59Z")

</div>

Well, I’ve searched forums and read the documentation, this simply makes no sense to me, I must be missing something.

I’m trying to make a very simple app as a learning experience for Angular2/Ionic2, an alarm clock app. I want an alarm service to keep my logic and local storage access out of the page, and yet, I cannot inject it. Please help!

I started with the default tabbed layout in Ionic, so I have a page1, page2, and page3 folder. In the page1 folder I added: alarm.service.js, and that file looks like this:

```
import {Injectable} from 'angular2/core';

@Injectable()
export class AlarmService {
 constructor() {
   alert('worked');
 }
}

```

I tried to keep it as absolutely simple as possible for testing, just pop up an alert when it’s created.  
Then in page1.js I’ve tried a number of things actually based on the [ionic troubleshooting guide](http://ionicframework.com/docs/v2/faq/) and various forum posts, and nothing works. Here’s what it looks like right now:

```
import {Page} from 'ionic-angular';
import {AlarmService} from './alarm.service';

@Page({
  templateUrl: 'build/pages/page1/page1.html',
  providers: [AlarmService]
})
export class Page1 {
  constructor(@Inject(AlarmService) alarmService) {}
}

```

I added the “providers: [AlarmService]” based on a post in a forum, the troubleshooting guide doesn’t show it. I really don’t understand why something so simple is so difficult…

Am I missing something obvious?

Thanks,  
Rob

---

<div class="post-metadata">

**Author:** ![xr0master](https://avatars.discourse-cdn.com/v4/letter/x/b4bc9f/32.png) [@xr0master](https://forum.ionicframework.com/u/xr0master)\
**Post date:** [March 25, 2016, 4:03pm UTC](https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454/2 "2016-03-25T16:03:37Z")

</div>

Use console.debug instead of alert and, if you use TypeScript, the right syntax is:

```auto
export class Page1 {
  constructor(alarmService: AlarmService) {}
}

```

PS if you want use @Inject then you need import it too

---

<div class="post-metadata">

**Author:** ![rloui](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rloui/32/98753_2.png) [@rloui](https://forum.ionicframework.com/u/rloui)\
**Post date:** [March 25, 2016, 4:12pm UTC](https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454/3 "2016-03-25T16:12:23Z")

</div>

Hey, thanks for the reply. I am not using Typescript, just regular JS, and per the troubleshooting guide it said if I did that use the @Inject syntax. You are right about missing the import, I have added the line:

```
import { Inject } from 'angular2/core';

```

I also tried importing it from ionic-angular. I’m not sure which is the correct place but neither seems to work. I also tried console.log but…

Let me be more specific about my error (I should have done that in the first place). In my console window where I ran ionic serve I see this:

```
ERROR in ./app/pages/page1/page1.js
Module build failed: SyntaxError: D:/Projects/kitten-alarm-clock/app/pages/page1/page1.js: Unexpected token (9:14)
})
export class Page1 {
  constructor(@Inject(AlarmService) alarmService) {}
}

    at Parser.pp.raise (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:1378:13)
    at Parser.pp.unexpected (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:2817:8
)
    at Parser.pp.parseBindingAtom (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:
1536:12)
    at Parser.pp.parseMaybeDefault (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js
:1575:23)
    at Parser.pp.parseBindingList (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:
1558:23)
    at Parser.pp.parseMethod (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:1092:
22)
    at Parser.pp.parseClassMethod (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:
2495:8)
    at Parser.pp.parseClassBody (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:24
56:10)
    at Parser.pp.parseClass (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:2339:8
)
    at Parser.pp.parseStatement (D:\Projects\kitten-alarm-clock\node_modules\babel-core\node_modules\babylon\index.js:18
13:19)
 @ ./app/pages/tabs/tabs.js 12:12-37

```

It seems it doesn’t like the ampersand, even though the ionic docs say to use it…I don’t know.  
In chrome in the console I get the following errors:  
app.bundle.js:63648Uncaught Error: Cannot find module "…/page1/page1"webpackMissingModule @ app.bundle.js:63648(anonymous function) @ app.bundle.js:63648\_\_webpack\_require\_\_ @ app.bundle.js:20(anonymous function) @ app.bundle.js:3191\_\_webpack\_require\_\_ @ app.bundle.js:20(anonymous function) @ app.bundle.js:50\_\_webpack\_require\_\_ @ app.bundle.js:20(anonymous function) @ app.bundle.js:40(anonymous function) @ app.bundle.js:43  
?ionicplatform=android:54 Uncaught ReferenceError: ionic is not defined(anonymous function) @ ?ionicplatform=android:54  
app.bundle.js:63648 Uncaught Error: Cannot find module "…/page1/page1"webpackMissingModule @ app.bundle.js:63648(anonymous function) @ app.bundle.js:63648\_\_webpack\_require\_\_ @ app.bundle.js:20(anonymous function) @ app.bundle.js:3191\_\_webpack\_require\_\_ @ app.bundle.js:20(anonymous function) @ app.bundle.js:50\_\_webpack\_require\_\_ @ app.bundle.js:20(anonymous function) @ app.bundle.js:40(anonymous function) @ app.bundle.js:43  
?ionicplatform=ios:54 Uncaught ReferenceError: ionic is not defined(anonymous function) @ ?ionicplatform=ios:54  
undefined:1 Uncaught (in promise) TypeError: object is not a constructor  
at then (native)

I guess this makes sense that it can’t find the module because I’m causing a module build error. But I don’t know why it doesn’t like the ampersand.

---

<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 25, 2016, 4:19pm UTC](https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454/4 "2016-03-25T16:19:24Z")

</div>

I think that in JavaScript you could inject a service this way:

```auto
export class Page1 {
  static get parameters() {
    return [[AlarmService]];
  }

  constructor(alarmService) {}
}

```

---

<div class="post-metadata">

**Author:** ![xr0master](https://avatars.discourse-cdn.com/v4/letter/x/b4bc9f/32.png) [@xr0master](https://forum.ionicframework.com/u/xr0master)\
**Post date:** [March 25, 2016, 4:23pm UTC](https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454/5 "2016-03-25T16:23:29Z")

</div>

Sorry, I’m use TS, so i don’t know all nuances of native js. But people use **static get parameters()**

---

<div class="post-metadata">

**Author:** ![rloui](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rloui/32/98753_2.png) [@rloui](https://forum.ionicframework.com/u/rloui)\
**Post date:** [March 25, 2016, 4:45pm UTC](https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454/6 "2016-03-25T16:45:08Z")

</div>

Thank you everyone for your replies. You were both correct about the static get parameters piece, and thank you @iignatov especially for the example. The final working code looks like this:

```
import {Page} from 'ionic-angular';
import {Inject} from 'angular2/core';
import {AlarmService} from './alarm.service';

@Page({
  templateUrl: 'build/pages/page1/page1.html',
  providers: [AlarmService]
})
export class Page1 {

  static get parameters() {
    return [[AlarmService]];
  }
  constructor(alarmService) {}
}

```

However I think the real lesson here is…use TypeScript. All the Angular 2 docs are TypeScript (There’s an option for JS but most of the content isn’t there yet), and it seems much cleaner than this code. Also, it would be nice if Ionic changed their troubleshooting guide to show this.

But, thank you both again for helping me out, it was a good learning experience.

---

<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 25, 2016, 7:50pm UTC](https://forum.ionicframework.com/t/why-cant-i-inject-a-service-into-a-page-javascript/47454/7 "2016-03-25T19:50:07Z")

</div>

One other thing, although it may be outdated at this point. The `@Injectable` decorator at least used to be a bit counterintuitive. One would think it would be used as you did, on the class being injected. However, it needs to go on the class that requires DI to inject things into its constructor (`Page1` in this case).