Angular2 / Nativescript：使用RestService时非常奇怪/无益的错误

Question

I am busy working on a very basic barcode scanner app. There are two options: enter the barcode or scan the barcode. When I enter the barcode I get the following error: This error doesn't help me at all... Any idea what the cause of this might be/what I can look at?

my error:

JS: EXCEPTION: Uncaught (in promise): TypeError: Cannot read property 'getCookie' of null
JS: ORIGINAL STACKTRACE:
JS: Error: Uncaught (in promise): TypeError: Cannot read property 'getCookie' of null
JS:     at resolvePromise (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:416:31)
JS:     at /data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:452:17
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:223:37)
JS:     at Object.inner.inner.fork.onInvokeTask (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:6197:41)
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:222:42)
JS:     at Zone.runTask (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:123:47)
JS:     at drainMicroTaskQueue (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:355:35)
JS: Unhandled Promise rejection: Cannot read property 'getCookie' of null ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot read property 'getCookie' of null TypeError: Cannot read property 'getCookie' of null
JS:     at CookieXSRFStrategy.configureRequest (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/http/bundles/http.umd.js:1183:91)
JS:     at XHRBackend.createConnection (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/http/bundles/http.umd.js:1223:32)
JS:     at httpRequest (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/http/bundles/http.umd.js:1561:24)
JS:     at Http.request (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/http/bundles/http.umd.js:1661:38)
JS:     at Http.get (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/http/bundles/http.umd.js:1672:25)
JS:     at RestService.getProduct (/data/data/org.nativescript.barcodescanner/files/app/services/rest.service.js:18:26)
JS:     at AppComponent.submitBarcode (/data/data/org.nativescript.barcodescanner/files/app/app.component.js:22:26)
JS:     at /data/data/org.nativescript.barcodescanner/files/app/app.component.js:42:19
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:190:28)
JS:     at Object.inner.inner.fork.onInvoke (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:6206:41)
JS: Error: Uncaught (in promise): TypeError: Cannot read property 'getCookie' of null

my app.module.ts:

import { NgModule, ValueProvider } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptModule } from "nativescript-angular/platform";

import { HttpModule } from '@angular/http';

import { BarcodeScanner } from "nativescript-barcodescanner";
import { RestService } from './services/rest.service';

import { AppComponent } from "./app.component";






@NgModule({
    imports : [
    NativeScriptModule,     
    NativeScriptFormsModule, 
    HttpModule
    ],
    declarations : [
    AppComponent    
    ],
    providers : [
    RestService,
    BarcodeScanner],
    bootstrap : [AppComponent]      
})
export class AppModule {}

my app.component.ts:

import { Component, Input, OnInit, Inject } from "@angular/core";
import { BarcodeScanner } from "nativescript-barcodescanner";
import { ProductModel } from './models/product';

import { RestService } from './services/rest.service';



@Component({
    selector: "my-app",
    templateUrl : "./app.component.html"
})
export class AppComponent implements OnInit {
    public barcode: number;
    public textBarcode: number;
    @Input() product: ProductModel;


    public constructor(private restService: RestService, private barcodeScanner: BarcodeScanner) {

    }

    submitTextBarcode() {
        this.restService.getProduct(this.textBarcode)
    .subscribe(
    (res) => {
        this.product = new ProductModel(res.BaseURI, res.CustomError, res.ProviderName, res.RequestFormData, res.RequestURI, res.ResponseCode, res.AvgQty1, res.AvgQty2, res.AvgQty3, res.BarCode, res.Description, res.POSDescription, res.POSPrice, res.ProductCode, res.PurchCount, res.StockOnHand);    },
    (res) => {
        console.log("failure" + res);
    }
    );  
    }


    submitBarcode(barcode: number){ 
    this.restService.getProduct(barcode)
    .subscribe(
    (res) => {
        this.product = new ProductModel(res.BaseURI, res.CustomError, res.ProviderName, res.RequestFormData, res.RequestURI, res.ResponseCode, res.AvgQty1, res.AvgQty2, res.AvgQty3, res.BarCode, res.Description, res.POSDescription, res.POSPrice, res.ProductCode, res.PurchCount, res.StockOnHand);
        //console.log("returned product description: " + this.product.Description);
        //console.log(res);
    },
    (res) => {
        console.log("failure" + res);
    }
    );
    //console.log("product: " + product);

}


    public scan() {
        this.barcodeScanner.scan({
            formats : "EAN_13",
            cancelLabel : "Stop scanning",
            message : "Go scan something Use the volume buttons to turn on the flash",
            preferFrontCamera : false,
            showFlipCameraButton : false
        }).then((result) => {
            this.barcode = +result.text;
            this.submitBarcode(this.barcode);           
        }, (errorMessage) => {
            console.log("Error no scan" + errorMessage);
        });
    }

    public ngOnInit() {     

    }

}

my app.component.html:

<stackLayout>
<label text="Scan or enter a barcode"></label>
<textField hint="Enter barcode" keyboardType="number" [(ngModel)]="textBarcode"></textField>
<button *ngIf="textBarcode" text="Submit" (tap)="submitTextBarcode()"></button> 
<button text="Scan" (tap)="scan()"></button>

<label *ngIf="product" text="Description"></label>
<label *ngIf="product" [text]="product.Description"></label>

<label *ngIf="product" text="POS Description"></label>
<label *ngIf="product" [text]="product.POSDescription"></label>

<label *ngIf="product" text="POS price"></label>
<label *ngIf="product" [text]="product.POSPrice"></label>

<label *ngIf="product" text="Stock On Hand"></label>
<label *ngIf="product" text="product.StockOnHand"></label>

</stackLayout>

Answer 1

Бased on the sample-Groceries tutorial .. notice this line

import { NativeScriptHttpModule } from "nativescript-angular/http"; 

and the imports ni the same file for NativeScriptHttpModule ..also in the same section the following explanation :

"... .NativeScriptHttpModule is a NativeScript wrapper of Angular's HttpModule, a module that declares all of Angular's HTTP-based services—including the Http service that UserService uses..."