Nativescript-angular: HttpClient import `Error: Trying to link invalid 'this' to a Java object`

[tsili852]

Hello, I am trying to use the HttpClient 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.
```js
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));
  }
}

[m-abs]

Could you post your tsconfig.json? And the TypeScript version?

[tsili852]

Yes, here you go

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "noEmitHelpers": true,
        "noEmitOnError": true,
        "lib": [
            "es6",
            "dom",
            "es2015.iterable"
        ],
        "baseUrl": ".",
        "paths": {
            "*": [
                "./node_modules/tns-core-modules/*",
                "./node_modules/*"
            ]
        }
    },
    "exclude": [
        "node_modules",
        "platforms",
        "**/*.aot.ts"
    ]
}

"typescript": "~2.5.3"

[tsonevn]

Hi @tsili852 ,

Thank you for reporting this problem.
I tested this case on my side and was able to recreate the same behavior.
We will investigate further, what is causing this problem and will provide more info about this case.

[tsonevn]

Hi @tsili852,
We investigate further this case and found that to use the HTTPClinet , you just need to add NativeScriptHttpClientModule module in the imports. Then you should be able to access the http-client. An example of this case could be found here.

If the problem persists please provide sample project.

[tsili852]

Thank you very much for the response and the investigation. I will try the solution above and report back the results

[tsili852]

Hello @tsonevn,
Your solution worked very well for me. Thank you.
But as you can see from my code above I was importing the NativeScriptHttpClientModule, but not at the top, I've had it at the bottom. Do you think that was the problem ?

[tompanq]

Hi @tsili852,

I had the same issue as you and moving the import statement to the top of imports solved the problem too.

Thank you,

[tsonevn]

Hi @tsili852, @tompanq ,
I am glad to hear that you were able to resolve this behavior.
Perhaps this could be related to the time when the `NativeScriptHttpClientModule``is loaded. I will test this behavior on my side.

[tsonevn]

Hi @tsili852
I tested the scenario while changing the position of the module in my sample project, however, was unable to recreate to recreate this behavior.
It would help if you could provide sample project, which could be used for debugging this issue.

[tsili852]

Hello @tsonevn ,
Unfortunately, I can't share the code for the real app, and I don't think its a good example because I am using many plugins apart from nativescript-angular/http-client. I am using ngrx also. But this is my app.module.ts and It's working fine after I moved the import more to the top. But the interesting part is that the import is still under NativeScriptHttpModule.

import { NgModule, LOCALE_ID } from "@angular/core";
import { DatePipe } from "@angular/common";
import { HttpClient } from "@angular/common/http";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
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";
var nsPlatform = require("nativescript-platform-css");
nsPlatform.sizeGroupings(true);

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 { AuthService } from "./shared/auth/auth.service";
import { DrawerService } from "./shared/drawer/drawer.service";

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

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,
    EntrySearchPipe,
    ...navigatableComponents
  ],
  providers: [
    AddressActions, 
    AddressService,
    EntryActions, 
    EntryService, 
    UserService, 
    AuthService,
    CategoryActions, 
    CategoryService, 
    DrawerService,
    DatePipe,
    {provide: HTTP_INTERCEPTORS, useClass: ArkcashInterceptor, multi: true},
    {provide: LOCALE_ID, useValue:"de-CH"}
  ],
  bootstrap: [AppComponent],
  entryComponents: [DateSelectModalComponent]
})
export class AppModule {}

[RoyiNamir]

So do I need both ??

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

[yonghongren]

I ran into the same issue. After reading the comment "It's working fine after I moved the import more to the top", I experimented around and found that it's HTTP_INTERCEPTORS must be imported after NativeScriptHttpClientModule. Thanks @tsili852 for the inspiration.

@RoyiNamir, I import NativeScriptHttpClientModule only (and angular/common/http).

[tsonevn]

Hi @tsili852, @yonghongren ,
If I understand you correctly the issue on your side is resolved by including NativeScriptHttpClientModuleon in front position in the imports. Is that correct or the issue still persists?
@RoyiNamir with the latest nativescript and Angular you should use only ``"nativescript-angular/http-client"

[manojdcoder]

@tsonevn If I have EffectsModule.forRoot(effects) in app.module, then app works only if I import NativeScriptHttpClientModule at top of app.module. This happens only in Android.

[tsonevn]

HI @manojdcoder,
Could you provide some sample project, where the issue could be reproduced?

Thank you in advance for your cooperation.

[manojdcoder]

@tsonevn I managed to reproduce the issue in default ng template. Basically this happens when I don't import NativeScriptHttpClientModule inside app.module (but somewhere else) and inject HttpClient in any of the services (providers).

Usually I keep often used modules / directives / pipes inside shared.module so I can re-use them in other modules. I have been using NativeScriptHttpModule too the same way but recently when I migrated to NativeScriptHttpClientModule it started crashing only in Android until I moved the import to app.module. The error description is also strange not so meaningful.

http-client.zip

[manojdcoder]

@tsonevn Were you able to reproduce the issue?

[tsonevn]

Hi @manojdcoder,
yes, we were able to recreate this behavior. We will investigate it and will verify what could cause this problem.
For further info keep track on the issue.

[dcasbonne]

I also have the bug but moving

import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";

to the top of the "app.module.ts" file solves the problem.

[manojdcoder]

@tsonevn Any updates here? I think at least we should keep this issue state open?