Problem with loading my API service on the phone

Ionic Framework Ionic Angular
1

I am using Angular with my IONIC application, but I have a problem.
Create a service to request data to my API, everything works fine on my computer it does it great. But when compiling for android, when I install the APK and test my application the service does not work. What should I do? I’ve been searching but I can’t find the solution.

Now that same service is loaded in another component and if it works, what is happening because I have no idea.

My component where I try to load the service but it works on PC but not on mobile device:

“Usuario” It is my service where I establish the connection with my API.
“datausr” Where I save the data that the API returns, for example “Nombre”.

import { Component, OnInit } from '@angular/core';
import {ModalController} from '@ionic/angular';
import {Usuario} from '../service/user.service';
import { TokenService } from '../service/token.service';
import {EditperfilComponent} from '../editperfil/editperfil.component';
@Component({
  selector: 'app-perfil',
  templateUrl: './perfil.component.html',
  styleUrls: ['./perfil.component.scss'],
  providers:[Usuario]
})

export class PerfilComponent implements OnInit {
  usuario:any;

  datausr:any;

  constructor(

    public user:Usuario,

    public tokenService:TokenService,

    private modalController: ModalController

  ) { }

  ngOnInit() {
   this.loaddata();
  }
  loaddata(){
    this.usuario =this.tokenService.getUserName();
    this.user.getuserdetail(this.usuario).subscribe(
      result =>{
        if (result.Mensaje == 'ok') {
        this.datausr=result.Data;
        }else{
        }
      },
      error=>{
        console.log(<any>error);
      }
    );
  }
}

Now when I try to print that value in my ionic view, on PC it works normal, but on my device it does not load or does not execute the function “loaddata ()” or it may be that what it does not execute is "this.user.getuserdetail ( this.user) .subscribe () "

Can someone tell me what is happening or is it something I need to know or do before.

2

Since you haven’t posted the code of either of the service providers, I can’t comment on them, but going just off what you’ve posted here, a couple of red flags jump out at me.

First of all, do everything humanly possible to avoid typing the word any. There is no need for it to appear anywhere here.

You virtually never want anything in the providers of a Component. Doing this isolates the instance of Usuario that is injected into this component from any other instance in the application. Unless there is a very unusual reason for doing this (which should be commented extensively explaining why), remove it.

This also makes me very nervous. What are you doing with this import? Ordinarily, components should not be importing one another.

1 Like
3

Based on what I see in the code posted my take would be rebuilding the authentication following best practices… That’s why this is pointed out …

I’ve benefited a lot from reading and understanding tutorials by Jason Watmore’s. Here is one you can look at:
https://jasonwatmore.com/post/2019/06/22/angular-8-jwt-authentication-example-tutorial
He has others that also cover refresh tokens.

4

import {EditperfilComponent} from ‘…/editperfil/editperfil.component’;
It is to execute a modal, sorry do not put that function in the script that I provide.

5

I have managed to detect the problem. They were the restrictions of CORS, since in my service, the variable that has the parent URL had it in http and in other services created it had it in https, that’s why it was the only service that did not work for me on the device because on PC it had a Chrome extension that avoided CORS and of course it did not reflect any error. But the device didn’t have it, so I just replaced the http with https and my doubt was solved, I thought it was something big, maybe out of desperation I didn’t see that very important little detail.

Now my application works perfectly.

Thanks to those who answered the question, I thank you, I will return I think soon to ask I am a newbie in IONIC and I really like this framework.

Until next time. :grinning: :grinning: