Juri Strumpflohner

Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, occasionally speaks at conferences and holds training workshops.

Learn about the new interceptors introduced in Angular 4.3.1

Angular version 4.3.1 introduced one important new feature: the new HTTP client. Not only did it bring optimizations in how we can execute requests to backend APIs, but it made intercepting HTTP requests extremely easy.

Contents are based on Angular version >= 4.3.1

Learn everything about the new Http client introduced in Angular 4.3 and now default in Angular 5 in my latest Egghead.io video course on “Learn HTTP in Angular”.

In the following Egghead.io video lesson I implement an HTTP interceptor which intercepts the request, adding some headers, the response as well as potential HTTP errors.

The new HTTP client

Installing and Registering

The new HTTP client resides in the @angular/common package under the @angular/common/http. You need to register the HttpClientModule and register the interceptor on the HTTP_INTERCEPTORS.

Runnable Plunker

That’s it. Check out the Egghead video lesson at the beginning of this article or simply start playing straight away with this runnable Plunker. Just open it in another window and inspect the console.log statements on the your browser’s devtools.

Common mistakes/pitfalls

Here are some common mistakes or pitfalls I came across when using interceptors in Angular.

CreateListFromArrayLike called on non-object

Strange error, not very expressive. The issue occured to me when setting custom headers, especially when not converting the header values to a string before setting them.