JSONP callback issue with Angular 4

Question

I want to use flickr Jsonp along with Angular 4 to be able to retrieve images.

It gives me the following errors:-

VM637 global-functions.helpers.ts!transpiled:12 Response {_body: "JSONP injected script did not invoke callback.", status: 200, ok: true, statusText: "Ok", headers: Headers…}

Please, find a plunker of the issue here:-

https://plnkr.co/edit/oySgh2weZMOJddYA44Rp?p=preview

Here is the code that seams to be causing the issue:-

this.jsonp.request(`https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=&callback=JSONP_CALLBACK`).

      subscribe(images => {


      },
      (error) => {
        console.error(error);
      }

Answer 1

Based on my own analysis, this is why it is not working:-

callback=JSONP_CALLBACK normally changes the callback function name of the called Jsonp to make it the same as the callback that I give it in the parameter.\\

For example:

https://itunes.apple.com/search?term=ff&media=music&limit=20&callback=JSONP_CALLBACK

will return a json response similar to:-

JSONP_CALLBACK ({ .... })

If I supply a url similar to:

https://itunes.apple.com/search?term=ff&media=music&limit=20&callback=sun

will return a response similar to:-

sun ({ .... })

and so forth.

When Angular sees a call similar to that: https://itunes.apple.com/search?term=ff&media=music&limit=20&callback=JSONP_CALLBACK

it transfers the call to:

ng_jsonp .__req0.finished( { ... })

and it waits for this callback function to intercept the response.

However, the problem is for the public flicker api, the url is not customisable:-

When I send a url similar to: https://api.flickr.com/services/feeds/photos_public.gne?format=json&tags=&callback=JSONP_CALLBACK

the response always starts with:-

jsonFlickrFeed({ .... })

and this is why it fails, because the callback method name cannot be changed.