Simple Http Get Fails


#1

Newbie here trying to get a simple app to do a get on a simple rest service. I have a similar app working in Angular but not NativeScript. Could someone please help? Thanks much!

The HttpClient get() call fails with this output:
CONSOLE ERROR file:///app/pos.service.js:38:26: {
“headers”: {
“normalizedNames”: {},
“lazyUpdate”: null,
“headers”: {}
},
“status”: 0,
“statusText”: “Unknown Error”,
“url”: null,
“ok”: false,
“name”: “HttpErrorResponse”,
“message”: “Http failure response for (unknown url): 0 Unknown Error”,
“error”: {

The URL argument to get() is right. Tried tracing through the HttpClient module but couldn’t understand where the problem is. Salient code bits:

app.module.ts:
import { NgModule } from “(at)angular/core”;
import { NativeScriptFormsModule } from “nativescript-angular/forms”;
import { NativeScriptModule } from “nativescript-angular/nativescript.module”;
import { NativeScriptRouterModule } from “nativescript-angular/router”;
import { NativeScriptHttpModule } from “nativescript-angular/http”;
import { NativeScriptHttpClientModule } from “nativescript-angular/http-client”

import { AppComponent } from “./app.component”;
import { routes, navigatableComponents } from “./app.routing”;
import { Screen1Component } from “./pages/screen1/screen1.component”;

(at)NgModule({
imports: [
NativeScriptModule,
NativeScriptFormsModule,
NativeScriptHttpModule,
NativeScriptHttpClientModule,
NativeScriptRouterModule,
NativeScriptRouterModule.forRoot(routes)
],
declarations: [
AppComponent,
Screen1Component,
…navigatableComponents
],
bootstrap: [AppComponent]
})
export class AppModule {}

app.component.ts
import { Component } from “(at)angular/core”;
import { RandomNumber } from “./shared/RandomNumber/randomnumber”;
import { PosService } from “./pos.service”;
import { HttpClientModule } from ‘(at)angular/common/http’;

(at)Component({
selector: “main”,
providers: [PosService, HttpClientModule],
template: “”
})
export class AppComponent {}

pos.service.ts
import { Injectable } from ‘(at)angular/core’;
import { HttpClient, HttpHeaders } from ‘(at)angular/common/http’;
import { Observable } from ‘rxjs/Observable’;
import { of } from ‘rxjs/observable/of’;
import { catchError, map, tap } from ‘rxjs/operators’;
import { RandomNumber } from ‘./shared/RandomNumber/randomnumber’;

const httpOptions = {
headers: new HttpHeaders({ ‘Content-Type’: ‘application/json’ })
};

(at)Injectable()
export class PosService {
private posUrl = ‘http://localhost:3000/randomNumber’; // URL to random number service

constructor(
private http: HttpClient
) { }

getRandomNumber (): Observable<RandomNumber[]> {
this.log(‘fetching random number …’);
return this.http.get<RandomNumber[]>(this.posUrl)
.pipe(
tap(randomNumber => this.log(‘fetched random number’)),
catchError(this.handleError(‘getRandomNumber’, []))
);
}

/**

  • Handle Http operation that failed.

  • Let the app continue.

  • (at)param operation - name of the operation that failed

  • (at)param result - optional value to return as the observable result
    */
    private handleError (operation = ‘operation’, result?: T) {
    return (error: any): Observable => {

    // TODO: send the error to remote logging infrastructure
    console.error(error); // log to console instead

    // TODO: better job of transforming error for user consumption
    this.log(${operation} failed: ${error.message});

    // Let the app keep running by returning an empty result.
    return of(result as T);
    };
    }

private log(message: string) {
console.log('RandomNumberService: ’ + message);
}
}


#2

Your emulator may not know what is localhost, use IP instead.