title: Nativescript with Angular error when using HttpClient
body: <p>I am trying to use the Angular's <code>HttpClient</code> in my Nativescript application
  but when I import it in my component I get <code>Error: Trying to link invalid 'this' to a Java object</code></p>
  
  <blockquote>
    <p><strong>Update</strong></p>
    
    <p>I also tried adding this in the Groceries example without changing
    anything else and it doesn't work</p>
  </blockquote>
  
  <pre><code>{
        "description": "ArkCash",
        "license": "SEE LICENSE IN &lt;your-license-filename&gt;",
        "readme": "NativeScript Application",
        "repository": "&lt;fill-your-repository-here&gt;",
        "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"
        }
      }
  </code></pre>
  
  <p>I imported NativeScriptHttpClientModule in my app.module.ts also.</p>
  
  <pre><code>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 {}
  </code></pre>
  
  <p>And my AppComponent </p>
  
  <pre><code>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: "&lt;page-router-outlet&gt;&lt;/page-router-outlet&gt;"
  })
  export class AppComponent implements OnInit {
    constructor(
      private store: Store&lt;AppState&gt;, 
      private entryActions: EntryActions,
      private http: HttpClient
    ) {}
  
    ngOnInit() {
      // this.store.dispatch(this.entryActions.loadEntries(0, 10));
    }
  }
  </code></pre>