replacing http module with http-client

Author: tsonevn

Diff for: app/http/http-examples.module.ts

@@ -2,7 +2,7 @@ import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptRouterModule } from "nativescript-angular/router";
 import { NativeScriptCommonModule } from "nativescript-angular/common";
 import { NativeScriptFormsModule } from "nativescript-angular/forms";
-import { NativeScriptHttpModule } from "nativescript-angular/http";
+import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
 
 import { HttpExamplesComponent } from "./http-examples.component";
 
@@ -29,7 +29,7 @@ export const routerConfig = [
     schemas: [NO_ERRORS_SCHEMA],
     imports: [
         TitleAndNavButtonModule,
-        NativeScriptHttpModule,
+        NativeScriptHttpClientModule,
         NativeScriptFormsModule,
         NativeScriptCommonModule,
         NativeScriptRouterModule,

Diff for: app/http/http-get/http-get.component.html

@@ -4,20 +4,10 @@
         <Label class="p-15" row="1" col="0" text="User-Agent" textWrap="true"></Label>
         <Label class="p-15" row="2" col="0" text="Origin" textWrap="true"></Label>
         <Label class="p-15" row="3" col="0" text="Url" textWrap="true"></Label>
-        <Label class="p-15" row="4" col="0" text="Status code" textWrap="true"></Label>
-        <Label class="p-15" row="5" col="0" text="Status text" textWrap="true"></Label>
-        <Label class="p-15" row="6" col="0" text="Date" textWrap="true"></Label>
-        <Label class="p-15" row="7" col="0" text="ContentType" textWrap="true"></Label>
-        <Label class="p-15" row="8" col="0" text="Server" textWrap="true"></Label>
 
         <Label class="p-15" row="0" col="1" [text]="host" textWrap="true"></Label>
         <Label class="p-15" row="1" col="1" [text]="userAgent" textWrap="true"></Label>
         <Label class="p-15" row="2" col="1" [text]="origin" textWrap="true"></Label>
         <Label class="p-15" row="3" col="1" [text]="url" textWrap="true"></Label>
-        <Label class="p-15" row="4" col="1" [text]="status" textWrap="true"></Label>
-        <Label class="p-15" row="5" col="1" [text]="statusText" textWrap="true"></Label>
-        <Label class="p-15" row="6" col="1" [text]="dateHeader" textWrap="true"></Label>
-        <Label class="p-15" row="7" col="1" [text]="typeHeader" textWrap="true"></Label>
-        <Label class="p-15" row="8" col="1" [text]="serverHeader" textWrap="true"></Label>
     </GridLayout>
 </ScrollView>

Diff for: app/http/http-get/http-get.component.ts

@@ -12,17 +12,11 @@ export class HttpGetComponent implements OnInit {
     public userAgent: string;
     public origin: string;
     public url: string;
-    public status: number;
-    public statusText: string;
-    public dateHeader: string;
-    public typeHeader: string;
-    public serverHeader: string;
 
     constructor(private myService: MyHttpGetService) { }
 
     ngOnInit() {
         this.extractData();
-        this.extractResponseInfo();
     }
 
     extractData() {
@@ -34,19 +28,6 @@ export class HttpGetComponent implements OnInit {
             });
     }
 
-    extractResponseInfo() {
-        this.myService.getResponseInfo()
-            .subscribe(res => {
-                this.status = res.status;
-                this.statusText = res.statusText;
-                this.typeHeader = res.headers.get("Content-Type");
-                this.dateHeader = res.headers.get("Date");
-                this.serverHeader = res.headers.get("Server");
-            }, (error) => {
-                console.log("onGetResponseInfo" + error);
-            });
-    }
-
     private onGetDataSuccess(res) {
         this.host = res.headers.Host;
         this.userAgent = res.headers["User-Agent"];
@@ -61,4 +42,3 @@ export class HttpGetComponent implements OnInit {
     }
 }
 // << http-get-component
-

Diff for: app/http/http-get/http-get.services.ts

@@ -1,31 +1,30 @@
 // >> http-get-service
 import { Injectable } from "@angular/core";
-import { Http, Headers, Response } from "@angular/http";
 import { Observable as RxObservable } from "rxjs/Observable";
-
+import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
 import "rxjs/add/operator/map";
 import "rxjs/add/operator/do";
 
 @Injectable()
 export class MyHttpGetService {
     private serverUrl = "https://httpbin.org/get";
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     getData() {
         let headers = this.createRequestHeader();
         return this.http.get(this.serverUrl, { headers: headers })
-            .map(res => res.json());
+            .map(res => res);
     }
 
     getResponseInfo() {
         let headers = this.createRequestHeader();
         return this.http.get(this.serverUrl, { headers: headers })
-            .do(res => res);
+            .do(res =>  res);
     }
 
     private createRequestHeader() {
-        let headers = new Headers();
+        let headers = new HttpHeaders();
         // set headers here e.g.
         headers.append("AuthKey", "my-key");
         headers.append("AuthToken", "my-token");

Diff for: app/http/http-post/http-post.component.ts

@@ -14,7 +14,6 @@ export class HttpPostComponent {
     // >> (hide)
     public isItemVisible: boolean = false;
     // << (hide)
-
     constructor(private myPostService: MyHttpPostService) { }
 
     public submit() {
@@ -25,7 +24,7 @@ export class HttpPostComponent {
         this.myPostService
             .postData({ username: this.user, password: this.pass })
             .subscribe(res => {
-                this.message = res.json.data.username;
+                this.message = (<any>res).json.data.username;
                 // >> (hide)
                 this.isItemVisible = true;
                 // << (hide)

Diff for: app/http/http-post/http-post.services.ts

@@ -1,28 +1,27 @@
 // >> http-post-service
 import { Injectable } from "@angular/core";
-import { Http, Headers, Response, RequestOptions } from "@angular/http";
 import { Observable as RxObservable } from "rxjs/Observable";
 import "rxjs/add/operator/map";
+import { HttpClient, HttpHeaders, HttpResponse } from "@angular/common/http";
 
 @Injectable()
 export class MyHttpPostService {
     private serverUrl = "https://httpbin.org/post";
 
-    constructor(private http: Http) { }
+    constructor(private http: HttpClient) { }
 
     postData(data: any) {
         let options = this.createRequestOptions();
-        return this.http.post(this.serverUrl, { data }, options)
-            .map(res => res.json());
+        return this.http.post(this.serverUrl, { data }, { headers: options })
+            .map(res => res);
     }
 
     private createRequestOptions() {
-        let headers = new Headers();
-        headers.append("AuthKey", "my-key");
-        headers.append("AuthToken", "my-token");
-        headers.append("Content-Type", "application/json");
-        let options = new RequestOptions({ headers: headers });
-        return options;
+        let headers = new HttpHeaders();
+        headers.set("AuthKey", "my-key");
+        headers.set("AuthToken", "my-token");
+        headers.set("Content-Type", "application/json");
+        return headers;
     }
 }
 // << http-post-service