1 votes

TS2339 and TS2322 errors in my Angular and PHP based user system.

I need to make a user system for angular, with mysql. The truth is that I have never made one and I am looking for some light to know where to start. My API is made in PHP.

I have been following the tutorial below:

The truth is that I do the login and everything perfect, so I decided to continue with the next tutorial, which is to get the data through an API, but I get an error I guess it will be because of the version of Angular.

This is the next tutorial I followed:

The following is important in the service:

import {Http, Response, Headers, RequestOptions, RequestMethod} from "@angular/http";

In the part of the service where I send it to make the login is where I have the error, the original code is this one:

  login(user) : Promise<any> {
    var usertologin =new UserService(user.usertologin,user.password);
    let headers = new Headers({'Content-Type': 'application/json'});
    let body = JSON.stringify({user});
    let options = new RequestOptions();
    return this._http.post(environment.apiUrl + environment.loginModuleUrl, body, {
        method: 'POST',
        headers: headers,
        body: body,
        url: environment.apiUrl + environment.loginModuleUrl
      })
      .toPromise()
      .then(response => this.handleSuccess(response))
      .catch(error=> this.handleError(error));
  }

I edited it by changing the RequestOptions by HttpHeaders() and setting the following import :

login(user) : Promise<any> {
    var usertologin =new UserService(user.usertologin,user.password);
    let headers = new Headers({'Content-Type': 'application/json'});
    let body = JSON.stringify({user});
    let options = new HttpHeaders();
    return this._http.post(environment.apiUrl + environment.loginModuleUrl, body, {
        method: 'POST',
        headers: headers,
        body: body,
        url: environment.apiUrl + environment.loginModuleUrl
      })
      .toPromise()
      .then(response => this.handleSuccess(response))
      .catch(error=> this.handleError(error));
}

And in the import I put the following:

import { HttpClient, HttpHeaders } from '@angular/common/http';

I still get the following errors:

 ERROR in src/app/services/login.service.ts(43,41): error TS2339: Property 'apiUrl' does not exist on type '{ production: boolean; }'.
src/app/services/login.service.ts(43,62): error TS2339: Property 'loginModuleUrl' does not exist on type '{ production: boolean; }'.
src/app/services/login.service.ts(45,10): error TS2322: Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'.
  Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'.
    Index signature is missing in type 'Headers'.
src/app/services/login.service.ts(47,27): error TS2339: Property 'apiUrl' does not exist on type '{ production: boolean; }'.
src/app/services/login.service.ts(47,48): error TS2339: Property 'loginModuleUrl' does not exist on type '{ production: boolean; }'.

I forgot to mention that my version of Angular is 7.

2 votes

Haven't you tried anything? What's wrong with you? If you don't specify a bit your question will be closed for being too broad.

2 votes

For your guidance, I have a small example on github: https://github.com/ojgarciab/angularjs-slim-crud . I'm porting it to Angular.io, but I haven't had time to advance in the new version yet. I hope that, at least, it will help you to understand some concepts.

0 votes

Hello, I edited the post to put what I've tried during these hours, the truth is that I'm super lost with this and I'm bitter about it.

2voto

OscarGarcia Points 15361

We must separate the two types of error messages you are getting.

On the one hand you have these messages from error TS2339 :

error TS2339: Property 'apiUrl' does not exist on type '{ production: boolean; }'.
error TS2339: Property 'loginModuleUrl' does not exist on type '{ production: boolean; }'.

In these messages you are informed that you are trying to access the properties apiUrl y loginModuleUrl from environment without having been defined in environments/environment.ts ( exact data obtained from the chat ):

export const environment = {
    apiUrl:'http://localhost/clinica-backend/index.php',
    loginModuleUrl:'/login',
    production: false
};

Second you have this message error TS2322 :

error TS2322: Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'.
  Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'.

It is informing you that the field headers expects a field of type HttpHeaders or, instead, a series of explicitly provided headers of the form { [header: string]: string | string[]; } ( see documentation ):

options: { headers?: HttpHeaders | { [header: string]: string | string[]; }; ...

In your case you are providing a variable of type Header which cannot be converted to any of the supported types, so the only solution is to generate the appropriate required type:

login(user) : Promise<any> {
  var usertologin = new UserService(user.usertologin, user.password);
  /* Aquí estaba el problema, usamos HttpHeaders en vez de Headers */
  let headers = new HttpHeaders(
    {'Content-Type': 'application/json'}
  );
  let body = JSON.stringify({user});
  return this._http.post(
    environment.apiUrl + environment.loginModuleUrl,
    body,
    {
      headers: headers,
    }
  )
    .toPromise()
    .then(response => this.handleSuccess(response))
    .catch(error => this.handleError(error));
}

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X