1

I am getting the following error. Uncaught TypeError: this.jsonp.request is not a function in Angular2. Can anyone please help me to fix that.

My code will like this:

  1. RequestService.ts 

    import {Component} from '@angular/core';
import {JSONP_PROVIDERS, Jsonp,RequestMethod, RequestOptions, URLSearchParams,JSONP_BINDINGS, BaseRequestOptions} from '@angular/http';
import {Injectable} from '@angular/core';  
import 'rxjs/add/operator/map';

@Injectable()

@Component({
   providers: [JSONP_PROVIDERS]
})

export class RequestService {    
  constructor(public jsonp?:Jsonp) {
     this.jsonp = Jsonp;
  }

getValues = (url) => {
 let  _urlParams = new URLSearchParams();
 _urlParams.set('contentType', 'application/jsonp; charset=utf-8');
 _urlParams.set('dataType', 'jsonp');
 _urlParams.set('timeout', '5000');       

 this.jsonp.request(url + "&callback=JSONP_CALLBACK", {       // getting error here
    contentType: "application/jsonp; charset=utf-8",
    dataType: 'jsonp',
    timeout: 5000
 })
    .map(res => {                 
         return res.json();
     })
     .subscribe(res => {
         // here some stuffs with response
     }), err => {
     console.log('error')
 };

}
}

  2. abc.ts

    import {RequestService}           from './../request_service';

export class ABC {
  private request:any = new RequestService();

  bindValues() {
     this.request.getValues('http://google.co.in');    // note: url given here is sample
      }
   }

Thanks in advance

Jeni
  • 320
  • 2
  • 12

1 Answers1

0

The problem is at this line:

constructor(public jsonp?:Jsonp) {
  this.jsonp = Jsonp; // <----
}

With the public or private keyword, you don't need to set the property. Moreover you set the class and not the constructor parameter...

Try the following:

constructor(public jsonp?:Jsonp) {
}

Edit

I think you have a problem with your decorators. In the case of a service, you just need the @Injectable one, not the @Component one (only for components).

So I would use the following:

@Injectable()
export class RequestService {    
  constructor(public jsonp?:Jsonp) {
  }

  (...)
}

Set the providers when bootstrapping your application:

bootstrap(AppComponent, [ JSONP_PROVIDERS ]);

See this question:

To understand how to inject dependencies into services, you could have a look at this question describing how hierarchical injectors work:

Community
  • 1
  • 1
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • Thanks for your reply.. But it didn't work. Still i am getting the same error. I have tried to set jsonp object to class property like this: `export class RequestService { private jsonobj:any; constructor(public jsonp?:Jsonp) { this.jsonobj = Jsonp; } }` – Jeni Aug 09 '16 at 05:23
  • I have tried this also `constructor(public jsonp?:Jsonp){}' In this case the jsonp is undefined. Even though jsonp is assigned in constructor. – Jeni Aug 09 '16 at 05:30
  • You're welcome! I think that it's a problem with decorators you use on your service... I updated my answer ;-) – Thierry Templier Aug 09 '16 at 06:02