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 !.
Product.page.html
<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-button>
</ion-buttons>
<ion-title>Product List</ion-title>
{{ product.name }}
Price: ${{ product.price }}
</ion-col>
<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 -->
</ion-button>
</ion-col>
</ion-row>
Product.page.ts
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’;
@Component({
selector: ‘app-product’,
templateUrl: ‘./product.page.html’,
styleUrls: [‘./product.page.scss’],
})
export class ProductPage {
products: Product = ;
cart: Product = ;
constructor(
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 = data.map((ProductData) => ({
id: ProductData.id,
name: ProductData.name,
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/${product.id});
this.navCtrl.navigateForward(/product-info/${product.id});
}
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;
}
}
Product.service.ts
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;
}
@Injectable({
providedIn: ‘root’
})
export class ProductService {
private apiUrl = ‘https://gadkccs.in/api.php’; // 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) => p.id.toString() === id.toString());
console.log(‘Filtered product:’, product);
return product;
})
);
}
}
App view when run in browser
App view when installed in mobile
