Integration of woocommerce using angular 4 getting TypeError: crypto.createHmac is not a function

Question

I am trying to make a angular 4 app with woocommerce integration to list all the products. Here is my code

import { Component, OnInit } from '@angular/core';
import {Headers, Http, RequestOptions, URLSearchParams} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import * as WC from 'woocommerce-api';
import { WooApiService } from 'ng2woo';
import * as CryptoJS from 'crypto-js';
@Component({
selector: 'app-pcat',
templateUrl: './pcat.component.html',
styleUrls: ['./pcat.component.scss']
})
export class PcatComponent implements OnInit {
WooCommerce: any;
products: any;
public crypto: any;
typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
constructor(private woo: WooApiService) {}
ngOnInit(): void  {
this.woo.fetchItems('products')
.then(products => console.log(products));
}}

I am getting error in console

Error: Uncaught (in promise): TypeError: crypto.createHmac is not a function
TypeError: crypto.createHmac is not a function
hash_function@webpack-internal:///../../../../woocommerce-api/index.js:133:16
OAuth.prototype.getSignature@webpack-internal:///../../../../oauth-1.0a/oauth-1.0a.js:100:12
OAuth.prototype.authorize@webpack-internal:///../../../../oauth-1.0a/oauth-1.0a.js:87:34
WooCommerceAPI.prototype._request@webpack-internal:/woocommerce-api/index.js:186:17
WooCommerceAPI.prototype.get@webpack-internal:/woocommerce-api/index.js:213:10
fetchItems/<@webpack-internal:/ng2woo/dist/src/woocommerce.service.js:24:13
ZoneAwarePromise@webpack-internal:/zone.js/dist/zone.js:891:29

Answer 1

Yes this issue is related to the recent "upgrades" in Angular6, in my case with Ionic4. The crypto library was excluded as it was seen as been to bulky. There seems to be no clear solution from Angular on how this can be solved, so up till now one has to include these libraries externally.

Most likely you have added something similar to the "package.json" what I have below even to get this far.

"browser": {
    "aws4": false,
    "aws-sign2": false,
    "crypto": false,
    "ecc-jsbn": false,
    "http": false,
    "http-signature": false,
    "https": false,
    "net": false,
    "oauth-sign": false,
    "path": false,
    "request": false,
    "sshpk": false,
    "stream": false,
    "tls": false
  },

I have also tried without success

1 - Install @angular-builders/custom-webpack :

2 - Add custom builder in angular.json : In angular.json > project > architect > build > builder replace @angular-devkit/build-angular:browser to @angular-builders/custom-webpack:browser

3 - Create a file webpack.config.js at the root of the project : This will be loaded by the new builder (by default the filename is webpack.config.js but you can have a custom one if needed see here. Note : This will append your config to the default webpack config from angular.

4 - Add node support in webpack.config.js : Here is what is needed for web3 for example.

module.exports = {
  node: {
    crypto: true,
    http: true,
    https: true,
    os: true,
    vm: true,
    stream: true
  }
}

I eventually just forked the woocommerceAPI and I have a working version. I saw that at least 40 forks have done something similar. Between the code bellow and the browser it should work. The custom webpack is not necessary.

Modified WooCommerceAPI