feat(http): Support for HttpClinet with "nativescript-angular/http-client" module.

Author: vakrilov

nativescript-angular/http-client/http-client.module.ts

@@ -0,0 +1,26 @@
+import { NgModule, Optional, Inject, Injectable } from "@angular/core";
+
+// IMPORTant: Importing "@angular/common/http" for the first time overwrites the
+// global.__extends function.
+const cachedExtends = global.__extends;
+import { HttpClientModule, HttpBackend } from "@angular/common/http";
+global.__extends = cachedExtends;
+
+import { NSFileSystem } from "../file-system/ns-file-system";
+import { NsHttpBackEnd } from "./ns-http-backend";
+
+@NgModule({
+    providers: [
+        NSFileSystem,
+        NsHttpBackEnd,
+        { provide: HttpBackend, useExisting: NsHttpBackEnd },
+    ],
+    imports: [
+        HttpClientModule,
+    ],
+    exports: [
+        HttpClientModule,
+    ]
+})
+export class NativeScriptHttpClientModule {
+}

nativescript-angular/http-client/index.ts

@@ -0,0 +1 @@
+export * from "./http-client.module";

nativescript-angular/http-client/ns-http-backend.ts

@@ -0,0 +1,88 @@
+import { Injectable } from "@angular/core";
+import {
+    HttpHandler, HttpRequest,
+    HttpEvent, HttpEventType,
+    XhrFactory, HttpResponse,
+    HttpErrorResponse, HttpXhrBackend
+} from "@angular/common/http";
+import { Observable } from "rxjs/Observable";
+import { Observer } from "rxjs/Observer";
+
+import { NSFileSystem } from "../file-system/ns-file-system";
+import { path } from "tns-core-modules/file-system";
+
+@Injectable()
+export class NsHttpBackEnd extends HttpXhrBackend {
+    constructor(xhrFactory: XhrFactory, private nsFileSystem: NSFileSystem) {
+        super(xhrFactory);
+    }
+
+    handle(req: HttpRequest<any>): Observable<HttpEvent<any>> {
+        let result: Observable<HttpEvent<any>>;
+
+        if (isLocalRequest(req.url)) {
+            result = this.handleLocalRequest(req.url);
+        } else {
+            result = super.handle(req);
+        }
+
+        return result;
+    }
+
+    private getAbsolutePath(url: string): string {
+        url = url.replace("~", "").replace("/", "");
+        url = path.join(this.nsFileSystem.currentApp().path, url);
+        return url;
+    }
+
+    private handleLocalRequest(url: string): Observable<HttpEvent<any>> {
+        url = this.getAbsolutePath(url);
+
+        // request from local app resources
+        return new Observable((observer: Observer<HttpEvent<any>>) => {
+            if (this.nsFileSystem.fileExists(url)) {
+                const localFile = this.nsFileSystem.fileFromPath(url);
+                localFile.readText()
+                    .then((data) => {
+                        try {
+                            const json = JSON.parse(data);
+                            observer.next(createSuccessResponse(url, json, 200));
+                            observer.complete();
+                        } catch (error) {
+                            // Even though the response status was 2xx, this is still an error.
+                            // The parse error contains the text of the body that failed to parse.
+                            const errorResult = { error, text: data };
+                            observer.error(createErrorResponse(url, errorResult, 200));
+                        }
+                    }, (err: Object) => {
+                        observer.error(createErrorResponse(url, err, 400));
+
+                    });
+            } else {
+                observer.error(createErrorResponse(url, "Not Found", 404));
+            }
+        });
+    }
+}
+
+function isLocalRequest(url: string): boolean {
+    return url.indexOf("~") === 0 || url.indexOf("/") === 0;
+}
+
+function createSuccessResponse(url: string, body: any, status: number): HttpEvent<any> {
+    return new HttpResponse({
+        url,
+        body,
+        status,
+        statusText: "OK"
+    });
+}
+
+function createErrorResponse(url: string, body: any, status: number): HttpErrorResponse {
+    return new HttpErrorResponse({
+        url,
+        error: body,
+        status,
+        statusText: "ERROR"
+    });
+}

nativescript-angular/http.ts

@@ -0,0 +1,34 @@
+import { NgModule } from "@angular/core";
+import { Http, XHRBackend, RequestOptions, HttpModule, XSRFStrategy } from "@angular/http";
+
+import { NSXSRFStrategy, NSHttp } from "./ns-http";
+import { NSFileSystem } from "../file-system/ns-file-system";
+
+export { NSHttp } from "./ns-http";
+
+export function nsHttpFactory(backend, options, nsFileSystem) {
+    return new NSHttp(backend, options, nsFileSystem);
+}
+
+export function nsXSRFStrategyFactory() {
+    return new NSXSRFStrategy();
+}
+
+@NgModule({
+    providers: [
+        { provide: XSRFStrategy, useFactory: nsXSRFStrategyFactory },
+        NSFileSystem,
+        {
+            provide: Http, useFactory: nsHttpFactory,
+            deps: [XHRBackend, RequestOptions, NSFileSystem]
+        }
+    ],
+    imports: [
+        HttpModule,
+    ],
+    exports: [
+        HttpModule,
+    ]
+})
+export class NativeScriptHttpModule {
+}

nativescript-angular/http/http.module.ts

@@ -0,0 +1 @@
+export * from "./http.module";

nativescript-angular/http/index.ts

@@ -14,78 +14,78 @@ import "rxjs/add/observable/fromPromise";
 import { NSFileSystem } from "../file-system/ns-file-system";
 
 export class NSXSRFStrategy {
-  public configureRequest(_req: any) {
-    // noop
-  }
+    public configureRequest(_req: any) {
+        // noop
+    }
 }
 
 @Injectable()
 export class NSHttp extends Http {
-  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private nsFileSystem: NSFileSystem) {
-    super(backend, defaultOptions);
-  }
+    constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private nsFileSystem: NSFileSystem) {
+        super(backend, defaultOptions);
+    }
 
-  /**
-   * Performs a request with `request` http method.
-   */
-  request(req: string | Request, options?: RequestOptionsArgs): Observable<Response> {
-    const urlString = typeof req === "string" ? req : req.url;
-    if (isLocalRequest(urlString)) {
-      return this._requestLocalUrl(urlString);
-    } else {
-      return super.request(req, options);
+    /**
+     * Performs a request with `request` http method.
+     */
+    request(req: string | Request, options?: RequestOptionsArgs): Observable<Response> {
+        const urlString = typeof req === "string" ? req : req.url;
+        if (isLocalRequest(urlString)) {
+            return this._requestLocalUrl(urlString);
+        } else {
+            return super.request(req, options);
+        }
     }
-  }
 
-  /**
-   * Performs a request with `get` http method.
-   */
-  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
-    if (isLocalRequest(url)) {
-      return this._requestLocalUrl(url);
-    } else {
-      return super.get(url, options);
+    /**
+     * Performs a request with `get` http method.
+     */
+    get(url: string, options?: RequestOptionsArgs): Observable<Response> {
+        if (isLocalRequest(url)) {
+            return this._requestLocalUrl(url);
+        } else {
+            return super.get(url, options);
+        }
     }
-  }
 
-  /**
-   * Uses a local file if `~/` resource is requested.
-   * @param url
-   */
-  private _requestLocalUrl(url: string): Observable<Response> {
-    // normalize url
-    url = normalizeLocalUrl(url);
-    // request from local app resources
-    return Observable.fromPromise<Response>(new Promise((resolve, reject) => {
-      let app = this.nsFileSystem.currentApp();
-      let localFile = app.getFile(url);
-      if (localFile) {
-        localFile.readText().then((data) => {
-          resolve(responseOptions(data, 200, url));
-        }, (err: Object) => {
-          reject(responseOptions(err, 400, url));
-        });
-      } else {
-        reject(responseOptions("Not Found", 404, url));
-      }
-    }));
-  }
+    /**
+     * Uses a local file if `~/` resource is requested.
+     * @param url
+     */
+    private _requestLocalUrl(url: string): Observable<Response> {
+        url = normalizeLocalUrl(url);
+
+        // request from local app resources
+        return Observable.fromPromise<Response>(new Promise((resolve, reject) => {
+            let app = this.nsFileSystem.currentApp();
+            let localFile = app.getFile(url);
+            if (localFile) {
+                localFile.readText().then((data) => {
+                    resolve(responseOptions(data, 200, url));
+                }, (err: Object) => {
+                    reject(responseOptions(err, 400, url));
+                });
+            } else {
+                reject(responseOptions("Not Found", 404, url));
+            }
+        }));
+    }
 }
 
 function isLocalRequest(url: string): boolean {
-  return url.indexOf("~") === 0 || url.indexOf("/") === 0;
+    return url.indexOf("~") === 0 || url.indexOf("/") === 0;
 }
 
 function normalizeLocalUrl(url: string): string {
-  return url.replace("~", "").replace("/", "");
+    return url.replace("~", "").replace("/", "");
 }
 
 function responseOptions(body: string | Object, status: number, url: string): Response {
-  return new Response(new ResponseOptions({
-    body: body,
-    status: status,
-    statusText: "OK",
-    type: status === 200 ? ResponseType.Default : ResponseType.Error,
-    url: url
-  }));
+    return new Response(new ResponseOptions({
+        body: body,
+        status: status,
+        statusText: "OK",
+        type: status === 200 ? ResponseType.Default : ResponseType.Error,
+        url: url
+    }));
 }

nativescript-angular/http/ns-http.ts

@@ -20,6 +20,7 @@ import {
     Sanitizer,
     InjectionToken
 } from "@angular/core";
+import { DOCUMENT } from "@angular/common";
 
 import { rendererLog, rendererError } from "./trace";
 import {
@@ -56,9 +57,16 @@ export class NativeScriptSanitizer extends Sanitizer {
     }
 }
 
+export class NativeScriptDocument {
+    createElement(tag: string) {
+        throw new Error("NativeScriptDocument is not DOM Document. There is no createElement() method.");
+    }
+}
+
 export const COMMON_PROVIDERS = [
     defaultPageFactoryProvider,
     { provide: Sanitizer, useClass: NativeScriptSanitizer },
+    { provide: DOCUMENT, useClass: NativeScriptDocument },
 ];
 
 export class NativeScriptPlatformRef extends PlatformRef {