Angular 2 Jsonp Injected Script Did Not Invoke Callback Error

I am running app on localhost://3000 with npm server Services file: import {Injectable} from '@angular/core'; import {Jsonp} from '@angular/http'; import 'rxjs/add/operator/map';

Solution 1:

Ok solution was making get request with http module and providing header with get request. Header part was main reason why it was failing.

let headers = newHeaders({'X-Mashape-Key':'Ns0SkjyRRomshq3PgEnGoz2Zkc71p1CYnWajsnphGctvrGt46W'});
    headers.append( 'Accept', 'application/json');
        returnthis._http.get("http://api.football-data.org/v1/competitions/",{
        headers: headers
      })
       .map((res) => res.json());

Solution 2:

Angular is replacing JSONP_CALLBACK with __ng_jsonp____req0_finished but it should be __ng_jsonp__.__req0.finished

Inspect your Network response. If you see __ng_jsonp____req0_finished({...json object...}) this is the problem.

Also, some services have different requirements for the callback query string parameter, which proves to be nasty because the error is exactly the same. I was using &callback=__ng_jsonp__.__req0.finished with MailChimp which produced the same error but the response had only a json object and no callback function. This is because MailChimp's spec is to use &c= instead of &callback=

When hardcoding the Jsonp callback (re: JSONP_CALLBACK issue) you need to account for the number of calls made, as Angular persists the state of each call. An example of what I'm doing for Mailchimp:

addEmailToList(email: string, listId: string, jsonpCalls: number, callback: any) {   

const cbJsonp = '__ng_jsonp__.__req' + jsonpCalls + '.finished';

let url = [
      'http://',
      host,
      '/subscribe',
      '/post-json',
    ].join('');

let queryParams: URLSearchParams = new URLSearchParams();
queryParams.set('u', Config.MAILCHIMP_API_KEY);
queryParams.set('id', listId);
queryParams.set('EMAIL', email);
queryParams.set('c', cbJsonp);  // non-standard; varies by service; usually 'callback'
...
}

Solution 3:

this._InstUrl = "your url";

let params1 = newURLSearchParams();
//params.set('search', term); // the user's search value//params.set('action', 'opensearch');
params1.set('format', 'json');
//params1.set('callback', "ng_jsonp.__req0.finished");
params1.set('callback', "JSONP_CALLBACK");

    returnthis._jsonp
        .get(this._InstUrl, { search: params1 })
        .map(response => { debugger; this.Result = response.json().data })
        .subscribe(
        (data) => {
            debuggerconsole.log(this.Result);
        },
        (error) => {
            debuggerconsole.log(error);
        });