Ionic 4 woocommerce-api

HI friends hope you will be fine. Actually I am working with ionic 4 and woocommerce. When i try ti use wocommerce plugin which is this one ( https://www.npmjs.com/package/woocommerce-api ). i get an error:


;

Here is my code:

import { Component } from '@angular/core';
import * as HA from 'woocommerce';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class HomePage {
  Woocommerce: any;
  constructor(
  ) {
    this.Woocommerce = HA({
      url: 'https://mysite.com',
      consumerKey: 'ck_key',
      consumerSecret: 'cs_key',
      wpAPI: true,
      version: 'wc/v3',
    });
    this.Woocommerce.getAsync("products").then( (data) => {
      console.log(data);
    }, (err) => {
      console.log(err);
    });
  }
  



}

I also tried to use this code in packge.json file to solve this error:

  "browser": {
    "http": false,
    "https": false,
    "net": false,
    "path": false,
    "stream": false,
    "tls": false,
    "fs": false,
    "crypto": false,
    "zlib": false,
    "sshpk": false
  },

And i was successfull to get rid of this error but this simply ignore these file and then error occur global is not defined.

I used this code in index.html file file to get rid global error:

  <script>
    if (global === undefined) {
      var global = window;
    }
  </script>

It worked but then i get error prototype is not defined.

Please help??

did you solve this problem, I am getting the same error

Hi @heni2424 . I solved this with this way:
Open the file ‘node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js’ and edit line 105.
Replace
node: false
to
node: { crypto: true, stream: true, fs: "empty", net: "empty", tls: "empty" },
That’ll do.

thank you hammad for your quick response. first, I install wocommerce api Preformatted text plugin as you do.


I go to this error. how to import wocommerce app module

Install woocommerce from here:

And then import this at the topic like this:

import * as HA from ‘woocomemrce-api’;

Let me know if it’s work!

i already install import it but i have got un error how

  1. how to Add this woocommerce plugin to your app’s module in src/app/app.module.ts

Share the package.json file content.

{
  "name": "eGulit",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "browser": {
  "http": false,
  "https": false,
  "net": false,
  "path": false,
  "stream": false,
  "tls": false,
  "fs": false,
  "crypto": false,
  "zlib": false,
  "sshpk": false
},
  "private": true,
  "dependencies": {
    "@angular/common": "^7.2.2",
    "@angular/core": "^7.2.2",
    "@angular/forms": "^7.2.2",
    "@angular/http": "^7.2.2",
    "@angular/platform-browser": "^7.2.2",
    "@angular/platform-browser-dynamic": "^7.2.2",
    "@angular/router": "^7.2.2",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ionic/angular": "^4.1.0",
    "@ionic/pro": "2.0.4",
    "core-js": "^2.5.4",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "woocommerce-api": "^1.4.2",
    "zone.js": "~0.8.29"
  },
  "devDependencies": {
    "@angular-devkit/architect": "~0.13.8",
    "@angular-devkit/build-angular": "~0.13.8",
    "@angular-devkit/core": "~7.3.8",
    "@angular-devkit/schematics": "~7.3.8",
    "@angular/cli": "~7.3.8",
    "@angular/compiler": "~7.2.2",
    "@angular/compiler-cli": "~7.2.2",
    "@angular/language-service": "~7.2.2",
    "@ionic/angular-toolkit": "~1.5.1",
    "@types/node": "~12.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~8.3.0",
    "tslint": "~5.17.0",
    "typescript": "~3.1.6"
  },
  "description": "An Ionic project"
}

Remove these contents from package.json file:

 "browser": {
  "http": false,
  "https": false,
  "net": false,
  "path": false,
  "stream": false,
  "tls": false,
  "fs": false,
  "crypto": false,
  "zlib": false,
  "sshpk": false
},
  

and then Use your code something like this ( in the page where you want to use this plugin ):

`import * as HA from 'woocommerce-api';

export class HomePage {
  Woocommerce: any;
   constructor()  {
  this.Woocommerce = HA({
      url: 'https://websiteurl.com',
      consumerKey: 'ck_key',
      consumerSecret: 'cs_key',
      wpAPI: true,
      version: 'wc/v3',
      queryStringAuth: true
    });
}
     
}

`Let me know if it’s work!

when removing from package.json I have got this error
can you show me your src/app/app.module.ts how to use there in provider

[ng] chunk {vendor} vendor.js, vendor.js.map (vendor) 4.46 MB [initial] [rendered]
[ng] 
[ng] ERROR in ./src/app/app.component.ts
[ng] Module not found: Error: Can't resolve 'woocommerce' in '/home/supedplc/Documents/project/ionic/eGulit/src/app'
[ng] ℹ 「wdm」: Failed to compile.


You have to use woocoommerce-api in the import Okay!
See:

please,i mention before i use this in my page as it is the error i face about can you to import app.module.ts to use in from another page show src/app/app.module.ts how to use there in provider

thank you so much hammad works well

You can use the same approach in the provider.

Glad it worked. Please mark this as a solution if it’s solved your problem, thanks!