Nativescript with Angular error when using HttpClient

Question

I am trying to use the Angular's HttpClient in my Nativescript application but when I import it in my component I get Error: Trying to link invalid 'this' to a Java object

Update

I also tried adding this in the Groceries example without changing anything else and it doesn't work

{
      "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"
      }
    }

I imported NativeScriptHttpClientModule in my app.module.ts also.

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 {}

And my 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

I ran into the same problem and it seems that I found the solution. The basic problem in Nativescript with Angular's http module seems to be that it overwrites the global.__extends function upon importing it the first time.

Importing NativeScriptHttpClientModule first (in app.module.ts) should fix this.

Since it does not help for your check if your nativescript-angular module is up-to-date or you could replicate its solution by hand:

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