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
– Brad, Commented Apr 24, 2016 at 4:38

Thierry Templier · Accepted Answer · 2016-04-24 06:55:21Z

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, 2016 at 6:55

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sebastian Olsen Over a year ago

This fixed the errors, but looking at the network console in firefox, the http request is actually never made.

Thierry Templier Over a year ago

You need to subscribe on the object returned by the getAuthenticationData method. Observables are lazy. They are only executed when subscribed ;-)

Sebastian Olsen Over a year ago

Could you give me an example?

Thierry Templier Over a year ago

Something like this.getAuthenticationData().subscribe((data) => { console.log(data); });

Sebastian Olsen Over a year ago

Thank you! Additionally, is it possible to have angular request json instead of plain html? my API will return json if requested.

|

Matteo Tosi · Accepted Answer · 2016-04-24 00:43:55Z

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, 2016 at 0:43

Matteo Tosi

4344 silver badges8 bronze badges

2 Comments

Sebastian Olsen Over a year ago

Now _globals is undefined.

Matteo Tosi Over a year ago

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.

Collectives™ on Stack Overflow

http is not defined in angular2

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related