Woocommerce Products are not displaying

Hey all guys, hope you are all will be fine
Actually I am facing a problem with woocommerce products in ionic. You can see the error

Saw my ts file code:
import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import * as HA from ‘woocommerce-api’;

selector: ‘page-all-products’,
templateUrl: ‘all-products.html’,
export class AllProductsPage {
WooCommerce: any;
products: any;
moreProducts: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
this.WooCommerce = HA({
url: ‘My Web link’,
consumerKey: ‘My consumerKey’,
consumerSecret: ‘My consumerSecret’,
wpAPI: true,
version: ‘wc/v3’,
queryStringAuth: true // Force Basic Authentication as query string true and using under HTTPS
this.WooCommerce.get(‘products’, function(err, data, res) {
this.products = JSON.parse(data.body).products;
}, (err) => {
ionViewDidLoad() {
console.log(‘ionViewDidLoad AllProductsPage’);
also saw my html file:



<ion-title style=“text-align: center;”> Our Products </ion-title>



<ion-content padding>


<ion-item *ngFor=“let product of moreProducts”>


<img [src]=“product.featured_src”>


<h2> {{ product.title }} </h2>


<span [innerHTML]=“product.short_description”></span>

<span [innerHTML]=“product.price_html”></span>





Can someone help me???

Hey there
I had been working with this npm package before, i think you may want to check out this link: async requests are possible
Promified Woocommerce methods - GITHUB

also you may want to export your woocommerce functions to a service/provider for better abstraction and ease of reading

Hope this helps!

Can you please send me your code?

I had to go back and try and find my old project
I have copied and pasted the relavent code, let me know if missed anything please!

this is what i had working in Ionic 3:


import { Injectable } from '@angular/core';
import { environment }  from '../path/to/environment';

export class WooCommerceService {

    wooCommerce: any;

    constructor() {
        // use your private api from you env config
        this.wooCommerce = WooCommerce(environment.wooCommerceApiConfig);

    public async getProducts() {
        try {
            const list = await this.wooCommerce.getAsync('products');
            const parsedList: Product[] = JSON.parse(list.toJSON().body);
            console.log('productList = ', ...parsedList);
            return parsedList;
        catch (error) { return null }
    //other api methods


import { Component,  OnInit } from '@angular/core';
import { WooCommerceService } from '../path/to/service';

@IonicPage()       // <-- only if IONIC v3
    selector: 'page-products',
    templateUrl: 'products.page.html',
    styleUrls: ['./products.scss']
export class ProductsPage implements OnInit {

    public productList: Product[] = [];

    constructor(private wooCommerce: WooCommerceService) {}

    public async ngOnInit(): Promise<void> {

    public async getAllProducts(): Promise<void> {
        try { this.productList = await this.wooService.getProducts()  }
        catch(e) { console.log(e) }


  <!--  HEADER CONTENT -->

            <ion-col *ngFor="let product of productList">
                <!-- use 'product' to iterate through the list  -->
1 Like

Thanks for your help. Please send me your project src folder as a zip or rar file. Only pages, I will replace my api there. It will be very easy for me because I am new in Ionic, and I don’t know too much about this. And I don’t know where to make this file ( woocommerce.service.ts ) in my project.