Ionic app not getting data from server API on Android device

i’m building an Ionic 6 App with API calls, everything works fine when i run it on the browser and i get all my data.

But when i build the app (ionic capacitor build android) and install the .apk in my phone, App runs show only apps title but i get NO data, and i don’t know why.

I followed instructions that i found here but still nothing.

I’m lost and don’t really know why it is not working. i have uploaded my images and api on godaddy server. Help neede please !.

<ion-buttons slot="end">
  <ion-button (click)="goToCartPage()">
    <ion-icon name="cart"></ion-icon> Cart
    <!-- Display the item count in a badge -->
    <ion-badge color="danger">{{ getCartItemCount() }}</ion-badge>
<ion-title>Product List</ion-title>
{{ }} Image

{{ }}

Price: ${{ product.price }}

    <ion-col size="3">
      <ion-button (click)="viewProduct(product)">
        <ion-icon name="eye-outline"></ion-icon> <!-- Replace "eye-outline" with the actual icon name you want to use -->

import { Component } from ‘@angular/core’;
import { ProductService } from ‘…/…/services/product.service’;
import { Product } from ‘…/…/models/product.model’;
import { NavController } from ‘@ionic/angular’;
import { CartService } from ‘…/…/services/cart.service’;

selector: ‘app-product’,
templateUrl: ‘./’,
styleUrls: [‘./’],
export class ProductPage {
products: Product = ;
cart: Product = ;

private productService: ProductService,
private navCtrl: NavController,
private cartService: CartService
) {}

ngOnInit() {
// Fetch all products using the ProductService

this.productService.getProducts().subscribe((data) => {
  // Convert the response data to the Product model
  this.products = => ({
    price: ProductData.price,
    itemdescription: ProductData.itemdescription,



addToCart(product: Product) {
this.cartService.addItemToCart(product); // Add the product to the cart

viewProduct(product: Product) {
// this.navCtrl.navigateForward(/product-detail/${});
goToCartPage() {
this.navCtrl.navigateForward(‘/cart’); // Navigate to the cart page

// Implement the getCartItemCount method to get the item count from the CartService
getCartItemCount(): number {
return this.cartService.getCartItems().length;

import { Injectable } from ‘@angular/core’;
import { HttpClient } from ‘@angular/common/http’;
import { Observable } from ‘rxjs’;
import { Product } from ‘…/models/product.model’;
import { map } from ‘rxjs/operators’;
import { tap } from ‘rxjs/operators’;

interface ProductData {
id: number;
name: string;
price: number;
itemdescription: string;

providedIn: ‘root’
export class ProductService {
private apiUrl = ‘’; // Replace with your API URL
// private apiUrl = ‘https://localhost/api.php’; // Replace with your API URL

constructor(private http: HttpClient) {}

getProducts(): Observable<ProductData> {
return this.http.get<ProductData>(this.apiUrl);

getProductById(id: number): Observable<ProductData | undefined> {
return this.getProducts().pipe(
map((products: ProductData) => {
console.log(‘ID parameter:’, id);
console.log(‘All products:’, products);
const product = products.find((p: ProductData) => === id.toString());
console.log(‘Filtered product:’, product);
return product;


App view when run in browser

App view when installed in mobile

what does your console says?

console does not show any error and runs apps successfully in browser.

i have also installed cordova-plugin-whitelist@1.3.5 (and adusjusted it with capacitor, bcoz my app using ionic capacitor)

have you made the app with an AI ?

yes got the help of AI. not all with AI