CODEWITHSUNDEEP
angular
Bouazza
Bouazza

Reputation: 139

ORIGINAL EXCEPTION: TypeError: is not a function

I need to call a web service into a service file to use it in my typeahead Component but it returns me this problem message in my console

this is my service file 

export class DslamService {
private host = window.location.host;

constructor(private http: Http) {}

getDslams() : Observable<Site[]>  {
    return this.http.get('http://' + this.host + '/dslam_service.php')
            .map(this.extractData)
            .catch(this.handleError);
}


private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }

  private handleError (error: any) {
    // In a real world app, we might use a remote logging infrastructure
    // We'd also dig deeper into the error to get a better message
    let errMsg = (error.message) ? error.message :
      error.status ? `${error.status} - ${error.statusText}` : 'Server     error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
  }
}

And my typeahead component :

  providers: [HTTP_PROVIDERS, DslamService],
  directives: [TYPEAHEAD_DIRECTIVES, CORE_DIRECTIVES, FORM_DIRECTIVES],
  export class TypeaheadComponent implements OnInit {
       private dslam: Site[];
       constructor(private service: DslamService) {}
       ngOnInit() { this.getDslams(); }
       getDslams() {
            this.service.getDslams()
                    .subscribe(
                     dslam => this.dslam = dslam);
       }

And in my navigator console i have this message :

enter image description here

Upvotes: 2

Views: 9714

Answers (2)

DarthAyokas
DarthAyokas

Reputation: 51

Angular2 differentiate between functions and methods.

So if you have no parameters in your function it is a method for angular, therefore you must call getDslams without ().

this.service.getDslams; // this is a method call
this.service.getDslams(parameter); // this is a function call

For working with a WebService / REST, keep in mind, that angular does not create implemented functions when parsing JSON response to a angular-object. You can access all attributes, but no functions / methods until you instanciate an object on your own with the values from your service-call.

Hope this will help =)

Upvotes: 5

Nige
Nige

Reputation: 1233

Few things to check

In your service file have you done your DI?

So...

import {Injectable} from 'angular2/core';
import {Http, HTTP_PROVIDERS, Headers} from 'angular2/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class DslamService {
private host = window.location.host;

constructor(private http: Http) {}

getDslams() : Observable<Site[]>  {
    return this.http.get('http://' + this.host + '/dslam_service.php')
            .map(this.extractData)
            .catch(this.handleError);
}

...

Then have you added the DslamService to your project by bootstrapping the Service Class DslamService?

like... import {DslamService} from './location/of/DslamService';

bootstrap(AppComponent, [
  DslamService
]);

Bootstrapping occurs at the base of your application. Usually in main.ts/app.ts

Lastly in your component in your constructor changed the service to public and retest. Like so...

constructor(public service: DslamService) {}

Upvotes: 0

Related Questions