Updated to new HttpClient

Author: Jason Watmore

app/_helpers/fake-backend.ts

@@ -1,88 +1,87 @@
-import { Http, BaseRequestOptions, Response, ResponseOptions, RequestMethod, XHRBackend, RequestOptions } from '@angular/http';
-import { MockBackend, MockConnection } from '@angular/http/testing';
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpInterceptor, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/of';
+import 'rxjs/add/observable/throw';
+import 'rxjs/add/operator/delay';
+import 'rxjs/add/operator/mergeMap';
+import 'rxjs/add/operator/materialize';
+import 'rxjs/add/operator/dematerialize';
 
-export function fakeBackendFactory(backend: MockBackend, options: BaseRequestOptions, realBackend: XHRBackend) {
-    // array in local storage for registered users
-    let users: any[] = JSON.parse(localStorage.getItem('users')) || [];
+@Injectable()
+export class FakeBackendInterceptor implements HttpInterceptor {
 
-    // configure fake backend
-    backend.connections.subscribe((connection: MockConnection) => {
-        // wrap in timeout to simulate server api call
-        setTimeout(() => {
+    constructor() { }
 
-            // authenticate
-            if (connection.request.url.endsWith('/api/authenticate') && connection.request.method === RequestMethod.Post) {
-                // get parameters from post request
-                let params = JSON.parse(connection.request.getBody());
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        // array in local storage for registered users
+        let users: any[] = JSON.parse(localStorage.getItem('users')) || [];
+
+        // wrap in delayed observable to simulate server api call
+        return Observable.of(null).mergeMap(() => {
 
+            // authenticate
+            if (request.url.endsWith('/api/authenticate') && request.method === 'POST') {
                 // find if any user matches login credentials
                 let filteredUsers = users.filter(user => {
-                    return user.username === params.username && user.password === params.password;
+                    return user.username === request.body.username && user.password === request.body.password;
                 });
 
                 if (filteredUsers.length) {
                     // if login details are valid return 200 OK with user details and fake jwt token
                     let user = filteredUsers[0];
-                    connection.mockRespond(new Response(new ResponseOptions({
-                        status: 200,
-                        body: {
-                            id: user.id,
-                            username: user.username,
-                            firstName: user.firstName,
-                            lastName: user.lastName,
-                            token: 'fake-jwt-token'
-                        }
-                    })));
+                    let body = {
+                        id: user.id,
+                        username: user.username,
+                        firstName: user.firstName,
+                        lastName: user.lastName,
+                        token: 'fake-jwt-token'
+                    };
+
+                    return Observable.of(new HttpResponse({ status: 200, body: body }));
                 } else {
                     // else return 400 bad request
-                    connection.mockError(new Error('Username or password is incorrect'));
+                    return Observable.throw('Username or password is incorrect');
                 }
-
-                return;
             }
 
             // get users
-            if (connection.request.url.endsWith('/api/users') && connection.request.method === RequestMethod.Get) {
+            if (request.url.endsWith('/api/users') && request.method === 'GET') {
                 // check for fake auth token in header and return users if valid, this security is implemented server side in a real application
-                if (connection.request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
-                    connection.mockRespond(new Response(new ResponseOptions({ status: 200, body: users })));
+                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
+                    return Observable.of(new HttpResponse({ status: 200, body: users }));
                 } else {
                     // return 401 not authorised if token is null or invalid
-                    connection.mockRespond(new Response(new ResponseOptions({ status: 401 })));
+                    return Observable.throw('Unauthorised');
                 }
-
-                return;
             }
 
             // get user by id
-            if (connection.request.url.match(/\/api\/users\/\d+$/) && connection.request.method === RequestMethod.Get) {
+            if (request.url.match(/\/api\/users\/\d+$/) && request.method === 'GET') {
                 // check for fake auth token in header and return user if valid, this security is implemented server side in a real application
-                if (connection.request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
+                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                     // find user by id in users array
-                    let urlParts = connection.request.url.split('/');
+                    let urlParts = request.url.split('/');
                     let id = parseInt(urlParts[urlParts.length - 1]);
                     let matchedUsers = users.filter(user => { return user.id === id; });
                     let user = matchedUsers.length ? matchedUsers[0] : null;
 
-                    // respond 200 OK with user
-                    connection.mockRespond(new Response(new ResponseOptions({ status: 200, body: user })));
+                    return Observable.of(new HttpResponse({ status: 200, body: user }));
                 } else {
                     // return 401 not authorised if token is null or invalid
-                    connection.mockRespond(new Response(new ResponseOptions({ status: 401 })));
+                    return Observable.throw('Unauthorised');
                 }
-
-                return;
             }
 
             // create user
-            if (connection.request.url.endsWith('/api/users') && connection.request.method === RequestMethod.Post) {
+            if (request.url.endsWith('/api/users') && request.method === 'POST') {
                 // get new user object from post body
-                let newUser = JSON.parse(connection.request.getBody());
+                let newUser = request.body;
 
                 // validation
                 let duplicateUser = users.filter(user => { return user.username === newUser.username; }).length;
                 if (duplicateUser) {
-                    return connection.mockError(new Error('Username "' + newUser.username + '" is already taken'));
+                    return Observable.throw('Username "' + newUser.username + '" is already taken');
                 }
 
                 // save new user
@@ -91,17 +90,15 @@ export function fakeBackendFactory(backend: MockBackend, options: BaseRequestOpt
                 localStorage.setItem('users', JSON.stringify(users));
 
                 // respond 200 OK
-                connection.mockRespond(new Response(new ResponseOptions({ status: 200 })));
-
-                return;
+                return Observable.of(new HttpResponse({ status: 200 }));
             }
 
             // delete user
-            if (connection.request.url.match(/\/api\/users\/\d+$/) && connection.request.method === RequestMethod.Delete) {
+            if (request.url.match(/\/api\/users\/\d+$/) && request.method === 'DELETE') {
                 // check for fake auth token in header and return user if valid, this security is implemented server side in a real application
-                if (connection.request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
+                if (request.headers.get('Authorization') === 'Bearer fake-jwt-token') {
                     // find user by id in users array
-                    let urlParts = connection.request.url.split('/');
+                    let urlParts = request.url.split('/');
                     let id = parseInt(urlParts[urlParts.length - 1]);
                     for (let i = 0; i < users.length; i++) {
                         let user = users[i];
@@ -114,43 +111,28 @@ export function fakeBackendFactory(backend: MockBackend, options: BaseRequestOpt
                     }
 
                     // respond 200 OK
-                    connection.mockRespond(new Response(new ResponseOptions({ status: 200 })));
+                    return Observable.of(new HttpResponse({ status: 200 }));
                 } else {
                     // return 401 not authorised if token is null or invalid
-                    connection.mockRespond(new Response(new ResponseOptions({ status: 401 })));
+                    return Observable.throw('Unauthorised');
                 }
-
-                return;
             }
 
             // pass through any requests not handled above
-            let realHttp = new Http(realBackend, options);
-            let requestOptions = new RequestOptions({
-                method: connection.request.method,
-                headers: connection.request.headers,
-                body: connection.request.getBody(),
-                url: connection.request.url,
-                withCredentials: connection.request.withCredentials,
-                responseType: connection.request.responseType
-            });
-            realHttp.request(connection.request.url, requestOptions)
-                .subscribe((response: Response) => {
-                    connection.mockRespond(response);
-                },
-                (error: any) => {
-                    connection.mockError(error);
-                });
-
-        }, 500);
-
-    });
+            return next.handle(request);
+            
+        })
 
-    return new Http(backend, options);
-};
+        // call materialize and dematerialize to ensure delay even if an error is thrown (https://github.com/Reactive-Extensions/RxJS/issues/648)
+        .materialize()
+        .delay(500)
+        .dematerialize();
+    }
+}
 
 export let fakeBackendProvider = {
     // use fake backend in place of Http service for backend-less development
-    provide: Http,
-    useFactory: fakeBackendFactory,
-    deps: [MockBackend, BaseRequestOptions, XHRBackend]
+    provide: HTTP_INTERCEPTORS,
+    useClass: FakeBackendInterceptor,
+    multi: true
 };

app/_helpers/index.ts

@@ -1 +1,2 @@
-export * from './fake-backend';
+export * from './jwt.interceptor';
+export * from './fake-backend';

app/_helpers/jwt.interceptor.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { Observable } from 'rxjs/Observable';
+
+@Injectable()
+export class JwtInterceptor implements HttpInterceptor {
+    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+        // add authorization header with jwt token if available
+        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
+        if (currentUser && currentUser.token) {
+            request = request.clone({
+                setHeaders: { 
+                    Authorization: `Bearer ${currentUser.token}`
+                }
+            });
+        }
+
+        return next.handle(request);
+    }
+}

app/_services/authentication.service.ts

@@ -1,17 +1,16 @@
 import { Injectable } from '@angular/core';
-import { Http, Headers, Response } from '@angular/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map'
 
 @Injectable()
 export class AuthenticationService {
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     login(username: string, password: string) {
-        return this.http.post('/api/authenticate', JSON.stringify({ username: username, password: password }))
-            .map((response: Response) => {
+        return this.http.post<any>('/api/authenticate', { username: username, password: password })
+            .map(user => {
                 // login successful if there's a jwt token in the response
-                let user = response.json();
                 if (user && user.token) {
                     // store user details and jwt token in local storage to keep user logged in between page refreshes
                     localStorage.setItem('currentUser', JSON.stringify(user));

app/_services/user.service.ts

@@ -1,40 +1,29 @@
 import { Injectable } from '@angular/core';
-import { Http, Headers, RequestOptions, Response } from '@angular/http';
+import { HttpClient } from '@angular/common/http';
 
 import { User } from '../_models/index';
 
 @Injectable()
 export class UserService {
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     getAll() {
-        return this.http.get('/api/users', this.jwt()).map((response: Response) => response.json());
+        return this.http.get<User[]>('/api/users');
     }
 
     getById(id: number) {
-        return this.http.get('/api/users/' + id, this.jwt()).map((response: Response) => response.json());
+        return this.http.get('/api/users/' + id);
     }
 
     create(user: User) {
-        return this.http.post('/api/users', user, this.jwt()).map((response: Response) => response.json());
+        return this.http.post('/api/users', user);
     }
 
     update(user: User) {
-        return this.http.put('/api/users/' + user.id, user, this.jwt()).map((response: Response) => response.json());
+        return this.http.put('/api/users/' + user.id, user);
     }
 
     delete(id: number) {
-        return this.http.delete('/api/users/' + id, this.jwt()).map((response: Response) => response.json());
-    }
-
-    // private helper methods
-
-    private jwt() {
-        // create authorization header with jwt token
-        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
-        if (currentUser && currentUser.token) {
-            let headers = new Headers({ 'Authorization': 'Bearer ' + currentUser.token });
-            return new RequestOptions({ headers: headers });
-        }
+        return this.http.delete('/api/users/' + id);
     }
 }

app/app.module.ts

@@ -1,18 +1,17 @@
 import { NgModule }      from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { FormsModule }    from '@angular/forms';
-import { HttpModule } from '@angular/http';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
 // used to create fake backend
 import { fakeBackendProvider } from './_helpers/index';
-import { MockBackend, MockConnection } from '@angular/http/testing';
-import { BaseRequestOptions } from '@angular/http';
 
 import { AppComponent }  from './app.component';
 import { routing }        from './app.routing';
 
 import { AlertComponent } from './_directives/index';
 import { AuthGuard } from './_guards/index';
+import { JwtInterceptor } from './_helpers/index';
 import { AlertService, AuthenticationService, UserService } from './_services/index';
 import { HomeComponent } from './home/index';
 import { LoginComponent } from './login/index';
@@ -22,7 +21,7 @@ import { RegisterComponent } from './register/index';
     imports: [
         BrowserModule,
         FormsModule,
-        HttpModule,
+        HttpClientModule,
         routing
     ],
     declarations: [
@@ -37,11 +36,14 @@ import { RegisterComponent } from './register/index';
         AlertService,
         AuthenticationService,
         UserService,
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: JwtInterceptor,
+            multi: true
+        },
 
-        // providers used to create fake backend
-        fakeBackendProvider,
-        MockBackend,
-        BaseRequestOptions
+        // provider used to create fake backend
+        fakeBackendProvider
     ],
     bootstrap: [AppComponent]
 })