Angular 2 – Jaime Vintharas answers my Http/JSON headers question

Question:

I read your Updating your Angular 2 app from rc4 to rc5 post and have been looking at your PeopleService class in your consuming real data with http repo in github.

Answer:

Hi Charles! ^_^

That’s to account for how different browsers behave and because it’s the right thing to do since we expect the response to be json.
If I omit the Accept: application/json header in Chrome, Chrome will include the Accept header with a value of */* and the API will return it’s preferred media type which in this case is application/json. (It’s up to the API implementer to make that decision when they’re implementing their API). So, in this case, even if I don’t add a header explicitly everything works as fine.
If I omit the Accept header in Firefox, Firefox will include the Accept header with a value of text/html. The star wars API is configured to respond with help web pages for any given resource when the media type is text/html. That you can have different representations for the same resource is a pretty core principle of RESTful APIs, so it’s actually a pretty neat API in that sense. For the case of our application though this means that, all of the sudden, we’re getting an html response that we try to parse as if it were JSON and it crashes our app.
So that’s why we have the getHeaders in the example, and explicitly setting the Accept header to application/json. When you are consuming a REST API you need to specify with media types you can consume so that the API provider can either give you the right representation or an error message that you can properly handle when the representation is not available (this is known as *Content Negotiation). In absence of that each browser is going to use it’s own defaults and each API implementer is going to respond based on how the implementers thought best.
Hope it helped, ^_^
Have a nice day!
Kind Regards,
Jaime
Content negotiation (from Wikipedia) are mechanisms defined as a part of HTTP that make it possible to serve different versions of a document (or more generally, representations of a resource) at the same URI, so that user agents can specify which version fit their capabilities the best. One classical use of this mechanism is to serve an image in GIF or PNG format, so that a browser that cannot display PNG images (e.g. MS Internet Explorer 4) will be served the GIF version.
HTTP provides for several different content negotiation mechanisms including: server-driven (or proactive), agent-driven (or reactive), transparent, and/or hybrid combinations thereof.
Advertisements

Angular 2 – NgModule and Compilation

Angular 2 ngModule series by John Papa (September, 2016)


NgModuleMetadata from angular.io docs


ng-book 2 authors’ summary of ngModule by Nate, Felipe, Ari, & Carlos (August, 2016)


Updating Your Angular 2 App From RC4 to RC5: A Practical Guide by Jaime Vintharas (August, 2016) Useful post AND comments about modules (HttpModule is what I was curious about) and how import statements change from rc4 to rc5 to accommodate NgModule concept.


NgModule on large project – Rob Wormald reply (August, 2016)


Angular 2 RC5 – NgModules, Lazy Loading and AoT compilation


Angular 2 NgModule Intro – Ahead Of Time Compilation And Lazy Loading – Avoid Common Pitfalls by Iurii Kyrylenko, Angular University (August, 2016)


Angular Modules (NgModule) from angular.io docs


Angular Modules (NgModules) have landed in Angular RC5!


Just in Time (JIT) Compilation – good choice during development

Ahead of Time (AOT) Compilation – Ahead of Time compiled applications benefit from decreased load time and increased performance


Angular 2 : Organization Using {barrels} by Shayne Boyer (May, 2016)


What are all the index.ts used for? stackoverflow (June, 2016)


Barrel Issues (July, 2016):

Angular 2 Http

Http/json headers Jaime Vintharas answers my question about incuding headers in Http.get call (August, 2016)


HTTP client – Includes sample and references Observables & Promises, JSON, error handling, and CORS. fyi – I have an ASP.NET CORS post.


Stackoverflow Http posts:

How to I load JSON data into Angular2 component Answered by  Thierry Templier (April, 2016)

How to Consume Http Component efficiently in a service in angular 2 beta? Answered by  Thierry Templier (December, 2015)

Angular2: Code organisation of web service/http requests – Stackoverflow answer by Torgeir Helgevold (12.21.2015)


Torgeir Helgevold’s early Angular 2.0 And Http sample (7.22.2015)


auth0’sAngular 2 Series – Part 3: Using Http (Fall 2015)