Typescript Error Property 'Model' does not exist on type 'HttpClient'

Ionic Framework ionic-v3
1

Hello, i run a function which stores a value from a JSON object into a variable called token.The issue is that everytime that i refresh my chrome and run my app i got the error
Typescript Error Property ‘Model’ does not exist on type ‘HttpClient’.

import { HttpClient,HttpEvent } from '@angular/common/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import {Observable} from "rxjs/Observable";
import {Storage} from "@ionic/storage";

var webApihost="http://192.168.0.6:81/EBSWebApi/";
var scrollerid="ES00BACKUP/KHCApp_Items";
var scrid = "ES00BACKUP/KHCApp_Contacts";


@Injectable()
export class LoginserviceProvider {
public token:string;
public Mobile1:string;
  params: {
    SubscriptionPassword: string;
    model: {
      BranchID: string;
      LangID: string;
      UserID: string;
      Password: string;
    }
  };

  //scroller code below//

  paramsScroller: {
    headers: {
      Authorization: string;
    },
    data: {
      Code: string;

    }
  };
  //storage-scrid code below//
  paramsScrid:{
    Mobile1:string;
    Code:string;

  };


  url = webApihost + 'api/login';
  //scroller code below//
  url2 = webApihost + "api/rpc/SimpleScrollerRootTable/" + scrollerid;
  //scrid code below
  url3 = webApihost + "api/rpc/SimpleScrollerRootTable/" + scrid;


  constructor(public http: HttpClient,
              private storage:Storage) {

    console.log('Hello LoginserviceProvider Provider');
    this.url  =webApihost + 'api/login';
    this.url2 =webApihost + "api/rpc/SimpleScrollerRootTable/" + scrollerid;
    this.url3 =webApihost + "api/rpc/SimpleScrollerRootTable/" + scrid;
  }


  getWebApi(url, params): Observable<HttpClient> {
    return this.http.post<HttpClient>
    (this.url, params);
  }

  getScrollerID(url, paramsScroller): Observable<HttpEvent<HttpClient>> {
    return this.http.get<HttpClient>
    (this.url2, paramsScroller);
  }

  getScrid(url, paramsScroller): Observable<HttpEvent<HttpClient>> {
    return this.http.get<HttpClient>
    (this.url3, paramsScroller);
  }

  authenticationWebApi() {

    this.url = webApihost + 'api/login';

    this.params = {
      SubscriptionPassword: 'passx',
      model: {
        BranchID: "01",
        LangID: "el-GR",
        UserID: "khcadmin",
        Password: "P@ssw0rd",
      }
    };
    //this.token = "";

    console.log("Token Before = " + this.token);
    return this.getWebApi(this.url, this.params)
      .subscribe(data => {
        console.log(data);
        this.token = data.Model.WebApiToken;
        //this.storage.set('token',this.token);
       // console.log("Μόλις πήρα το Token -> " + this.token);

       // this.scrollerID();
        // this.scrid();
      });

  };
2

.subscribe(data => {
change To
.subscribe((data:any) => {

1 Like
3

This code makes no sense. The data you are getting from your server is not an HttpClient, so don’t cast it as an http client…

2 Likes
4

Thanks a lot !!!
It helped me to fix my code

5

Thanks for the feedback i got rid of these HttpClients they were unused indeed.But in those examples in youtube and in forums there were using observables and http clients! why is that?
second question: maybe a little dumb one but as i am newbie i don’t know a lot of stuff ,We need two different pages of code in order for HTTPClient to work?
And third one :blush:
i get this error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property ‘Mobile1’ of undefined
TypeError: Cannot read property ‘Mobile1’ of undefined

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {Storage} from "@ionic/storage";
import {LoginserviceProvider} from "../../providers/loginservice/loginservice";
import {HomePage} from "../home/home";

@IonicPage()
@Component({
  selector: 'page-loginscreen',
  templateUrl: 'loginscreen.html',
})
export class LoginscreenPage {
//   paramsScrid:{
//     Code: string;
//   Mobile1: string;
// };
  Code:string;
  Mobile1:string;

  constructor(public navCtrl: NavController,
              private loginservice:LoginserviceProvider,
              private storage:Storage
              ) {


    this.storage.get('paramsScrid').then((val)=>{
      if (val!=null){
        let paramsScrid =JSON.parse(val);
        this.Mobile1=this.loginservice.paramsScrid.Mobile1;
        this.Code=this.loginservice.paramsScrid.Code;
      } else{
        this.Mobile1='testMobile1';
        this.Code='testCode';
      }
    });
  }

// τον πετάει στο scrid function//
//   log():void {
//     this.loginservice.scrid();
//
//   }
  
  
// save data in storage//
 saveForm(){
    let paramsScrid={
      Mobile1:this.loginservice.paramsScrid.Mobile1,
      Code:this.loginservice.paramsScrid.Code
    };
    console.log(paramsScrid);
    this.storage.set('paramsScrid',JSON.stringify(paramsScrid));
    this.navCtrl.push(HomePage);
 }
//Load Data from storage//
 loadData(){
    this.storage.get(this.Mobile1).then((value => {
      console.log("to kinito  einai"+value);
   }))}
}