NativescriptのHttpClient

Question

を使用したとき、私は角度のHttpClient私Nativescriptアプリケーション 内を使用しようとしていますが、私は私のコンポーネントでそれをインポートするとき、私はError: Trying to link invalid 'this' to a Java object

を取得更新

私も試してみましたこれをGroceriesの例で変更せずに追加してください。 他のものは動作しません。

{ 
     "description": "ArkCash", 
     "license": "SEE LICENSE IN <your-license-filename>", 
     "readme": "NativeScript Application", 
     "repository": "<fill-your-repository-here>", 
     "nativescript": { 
     "id": "arkcash.chbtechnologies.ch.arkcash_mobile", 
     "tns-android": { 
      "version": "3.2.0" 
     } 
     }, 
     "dependencies": { 
     "@angular/animations": "~4.4.6", 
     "@angular/common": "~4.4.6", 
     "@angular/compiler": "~4.4.6", 
     "@angular/core": "~4.4.6", 
     "@angular/forms": "~4.4.6", 
     "@angular/http": "~4.4.6", 
     "@angular/platform-browser": "~4.4.6", 
     "@angular/platform-browser-dynamic": "~4.4.6", 
     "@angular/router": "~4.4.6", 
     "@ngrx/core": "^1.2.0", 
     "@ngrx/effects": "^2.0.5", 
     "@ngrx/router-store": "^4.1.0", 
     "@ngrx/store": "^2.2.3", 
     "angular2-jwt": "^0.2.3", 
     "lodash": "^4.17.4", 
     "moment": "^2.19.1", 
     "nativescript-angular": "~4.4.1", 
     "nativescript-drop-down": "^3.2.0", 
     "nativescript-fabric": "^1.0.6", 
     "nativescript-pro-ui": "^3.1.4", 
     "nativescript-pulltorefresh": "^2.0.2", 
     "nativescript-theme-core": "~1.0.4", 
     "nativescript-toast": "^1.4.6", 
     "ngrx-store-logger": "^0.2.0", 
     "reflect-metadata": "~0.1.8", 
     "reselect": "^3.0.1", 
     "rxjs": "~5.5.2", 
     "tns-core-modules": "^3.2.0", 
     "zone.js": "~0.8.2" 
     }, 
     "devDependencies": { 
     "babel-traverse": "6.26.0", 
     "babel-types": "6.26.0", 
     "babylon": "6.18.0", 
     "lazy": "1.0.11", 
     "nativescript-dev-android-snapshot": "^0.*.*", 
     "nativescript-dev-typescript": "~0.5.0", 
     "typescript": "~2.5.3" 
     } 
    } 

私もapp.module.tsにNativeScriptHttpClientModuleをインポートしました。

import { NgModule, LOCALE_ID } from "@angular/core"; 
import { NativeScriptFormsModule } from "nativescript-angular/forms"; 
import { NativeScriptHttpModule } from "nativescript-angular/http"; 
import { NativeScriptModule } from "nativescript-angular/nativescript.module"; 
import { NativeScriptRouterModule } from "nativescript-angular/router"; 
import { NavigationComponent } from "./components/navigation/navigation.component"; 
import { NativeScriptUIListViewModule } from "nativescript-pro-ui/listview/angular"; 
import { StoreModule, Store } from "@ngrx/store"; 
import { EffectsModule } from "@ngrx/effects"; 
import { DropDownModule } from "nativescript-drop-down/angular"; 
import { DateSelectModalComponent } from "./components/modal-date-select/modal-date-select.component"; 

import { AppComponent } from "./app.component"; 
import { routes, navigatableComponents } from "./app.routing"; 
import { FabricModule } from "nativescript-fabric/angular"; 

import reducer from "./reducers/index"; 
import { EntryActions, AddressActions, CategoryActions } from "./actions/index"; 
import { EntryEffects, AddressEffects, CategoryEffects } from "./effects"; 

import { EntryService } from './shared/entry/entry.service'; 
import { AddressService } from "./shared/address/address.service"; 
import { CategoryService } from "./shared/category/category.service"; 
import { UserService } from "./shared/user/user.service"; 
import { DrawerService } from "./shared/drawer/drawer.service"; 

import { n2s } from "./utils/number2string-pipe"; 
import { HTTP_INTERCEPTORS } from "@angular/common/http"; 
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client"; 
import { ArkcashInterceptor } from "./utils/interceptor"; 

export const EFFECTS = [ 
    EffectsModule.run(EntryEffects), 
    EffectsModule.run(AddressEffects), 
    EffectsModule.run(CategoryEffects) 
]; 

@NgModule({ 
    imports: [ 
    NativeScriptModule, 
    NativeScriptFormsModule, 
    NativeScriptHttpModule, 
    NativeScriptRouterModule, 
    NativeScriptUIListViewModule, 
    DropDownModule, 
    NativeScriptHttpClientModule, 
    FabricModule.forRoot(), 
    NativeScriptRouterModule.forRoot(routes), 
    StoreModule.provideStore(reducer), 
    EFFECTS 
    // EffectsModule.run(AddressEffects) 
    ], 
    declarations: [ 
    AppComponent, 
    NavigationComponent, 
    DateSelectModalComponent, 
    n2s, 
    ...navigatableComponents 
    ], 
    providers: [ 
    EntryActions, 
    EntryService, 
    UserService, 
    AddressActions, 
    AddressService, 
    CategoryActions, 
    CategoryService, 
    DrawerService, 
    // HttpClient, 
    {provide: LOCALE_ID, useValue:"de-CH"} 
    ], 
    bootstrap: [AppComponent], 
    entryComponents: [DateSelectModalComponent] 
}) 
export class AppModule {} 

そして、私のAppComponent

import { Component, OnInit } from "@angular/core"; 
import { RouterExtensions } from 'nativescript-angular/router'; 
import { Store } from "@ngrx/store"; 
import { AppState } from "./reducers/index"; 
import { EntryActions } from "./actions/index"; 
import { HttpClient } from "@angular/common/http"; 

@Component({ 
    selector: "main", 
    template: "<page-router-outlet></page-router-outlet>" 
}) 
export class AppComponent implements OnInit { 
    constructor(
    private store: Store<AppState>, 
    private entryActions: EntryActions, 
    private http: HttpClient 
) {} 

    ngOnInit() { 
    // this.store.dispatch(this.entryActions.loadEntries(0, 10)); 
    } 
} 

Answer 1

私は同じ問題に遭遇した、私が解決策を見つけたようです。 Angularのhttpモジュールを使ったNativecriptの基本的な問題は、初めてグローバルな.__ extends関数をインポートするときに上書きされるようです。

NativeScriptHttpClientModuleを最初に（app.module.ts内に）インポートすると、これを修正する必要があります。

あなたnativescript-角度モジュールが最新であるか、手でそのソリューションを複製することができれば、それはあなたのチェックのために助けにはならないので：

const cachedExtends = global.__extends; 
import { HttpClient } from '@angular/common/http'; 
global.__extends = cachedExtends;