http is not defined in angular2

Question

I'm trying to make a REST Api call to my other localhost server, I've made this service:

import {Injectable} from 'angular2/core';
import {Http} from 'angular2/http';
import {GlobalService} from '../app.service';

@Injectable()
export class AuthenticationService {
    constructor(private _globals: GlobalService) {}
    constructor(private _http: Http) {}
    globals = this._globals.getGlobals()

    getAuthenticationData() {
        this._http.get(globals.apiURL)
    }
}

And calling it in my component:

import { Component } from 'angular2/core';
import {AuthenticationService} from '../services/authentication.service';

@Component({
    selector: 'wd-header';
    templateUrl: 'app/templates/header.html'
    providers: [AuthenticationService]
})

export class HeaderComponent {
    constructor(private _authenticationService: AuthenticationService) {}
    authentication = this._authenticationService.getAuthenticationData()
}

For some reason though, Angular claims that Http is undefined:

EXCEPTION: Error during instantiation of HeaderComponent!. angular2.dev.js:22911:9

ORIGINAL EXCEPTION: TypeError: this._http is undefined

What am I doing wrong?

Edit to include main.ts:

import {bootstrap}    from 'angular2/platform/browser';

import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from './app.component';
import {GlobalService} from './app.service';

bootstrap(App, [
    ROUTER_PROVIDERS,
    HTTP_PROVIDERS,
    GlobalService
]);

Is the `http.dev.js` file being referenced in your `index.html`? — Brad, Apr 24 '16 at 04:38

score 3 · Accepted Answer · answered Apr 24 '16 at 06:55

3

I would refactor the code of your service this way:

@Injectable()
export class AuthenticationService {
  constructor(private _globals: GlobalService, private _http: Http) {
    this.globals = this._globals.getGlobals();
  }

  getAuthenticationData() {
    return this._http.get(this.globals.apiURL);
  }
}

You need to have only one constructor for your service and initialize the globals property into this constructor.

Be also careful to use the "this" keyword to reference class properties from the class itself.

answered Apr 24 '16 at 06:55

Thierry Templier

198,364
44
396
360

This fixed the errors, but looking at the network console in firefox, the http request is actually never made. – Sebastian Olsen Apr 24 '16 at 09:49
You need to subscribe on the object returned by the getAuthenticationData method. Observables are lazy. They are only executed when subscribed ;-) – Thierry Templier Apr 24 '16 at 10:55
Could you give me an example? – Sebastian Olsen Apr 24 '16 at 10:56
Something like `this.getAuthenticationData().subscribe((data) => { console.log(data); });` – Thierry Templier Apr 24 '16 at 10:57
Thank you! Additionally, is it possible to have angular request json instead of plain html? my API will return json if requested. – Sebastian Olsen Apr 24 '16 at 11:29
You're welcome! You simply need to extract the payload as hein: return this.http.get(...).map(res => res.json()); – Thierry Templier Apr 24 '16 at 12:32
What's the import for that? Couldn't find it on the documentation. – Sebastian Olsen Apr 24 '16 at 12:41
It's for rxjs. See this question for more details: http://stackoverflow.com/questions/34515173/angular-2-http-get-with-typescript-error-http-get-map-is-not-a-function-in/34515276#34515276 – Thierry Templier Apr 24 '16 at 12:43

score 2 · Answer 2 · answered Apr 24 '16 at 00:43

2

I think that the problem in your code is that you use two constructors in your AuthenticationService.

Try to edit it like this:

constructor(private _globals: GlobalService, private _http: Http) {}

And add a return statement in getAuthenticationData().

Let me know if it fixes it.

answered Apr 24 '16 at 00:43

Matteo Tosi

434
4
8

Now `_globals` is undefined. – Sebastian Olsen Apr 24 '16 at 00:52
So the services are not ready to be used. Try to initialize globals in the onOnit method in AuthenticationService. Same thing for authentication in HeaderComponent. – Matteo Tosi Apr 24 '16 at 01:07

http is not defined in angular2

2 Answers2