0

I am lost here, i dont have a clue why i have this error:

Its Ionic 4

I have a service for all my rest api communication. http in the service is undefined, so .post fail. So why is my service constructor never called?

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'post' 
of undefined
TypeError: Cannot read property 'post' of undefined
at Object.<anonymous> (http-service.service.ts:27)
...

http-service.service.ts:

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';

@Injectable()
export class HttpServiceService {
constructor(
    private httpClient: HttpClient
) {
    console.log('service'); // not called
}

async poster() {
    console.log(this.httpClient); // undefined
     this.httpClient
        .post(this.backend_url, {/*params*/})
        .subscribe(res => {});

}
}

app.module.ts

...
import {HttpClient} from '@angular/common/http';
import {HttpClientModule} from '@angular/common/http';

import {HttpServiceService} from './http-service.service';

@NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
        BrowserModule,
        HttpClientModule,
        IonicModule.forRoot(),
        IonicStorageModule.forRoot(),
        AppRoutingModule,
    ],
    providers: [
        StatusBar,
        SplashScreen,
        HttpClient,
        HttpServiceService,
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

some.page.ts

import {HttpServiceService} from '../http-service.service';
...
constructor(private http: HttpServiceService) {...}
....
this.http.poster()

UPDATE (2019-03-21 17:50 (GMT)): Already tried to.

  • remove HttpClient from app.module.ts
  • add @Injectable({ providedIn: 'root' })
  • remove HttpServiceService from app.module.ts
  • private http: Http; import {Http} from '@angular/http'; (deprecated btw)

Look at the whole code: https://github.com/digital-scouts/Frontend/tree/dev/src/app My http-service is called in loading.page.ts:100

UPDATE END

Janneck Lange
  • 882
  • 2
  • 11
  • 34
  • did you try like `private http: Http` doing `import {Http} from '@angular/http';` and `HttpModule` on app.module.ts? not remembering now, but I think I faced this problem before. – Antonio Correia Mar 20 '19 at 21:33
  • https://stackoverflow.com/a/45129865/3093561 referencing the difference – Antonio Correia Mar 20 '19 at 21:35
  • Try and add @Injectable({ providedIn: 'root' }) and remove the HttpServiceService from app.module.ts .. if that doesn't help, create a fiddle, then ill gladly troubleshoot it for you... – balslev Mar 20 '19 at 23:19
  • 1
    You have HttpClient listed in providers, but the HttpClientModule should be doing that for you already. The way you are providing your service is fine/looks correct. I'd first try not having 'HttpClient' in the providers –  Mar 20 '19 at 23:24
  • Thank you, for the many tips, unfortunately, no one helped. I have updated my contribution. @balslev – Janneck Lange Mar 21 '19 at 17:55

0 Answers0