Интеграция woocommerce с использованием Angular 4, получая TypeError: crypto.createHmac не является функцией

Question

Я пытаюсь создать угловое 4 приложение с интеграцией woocommerce, чтобы перечислить все продукты.Вот мой код

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));
}}

Я получаю сообщение об ошибке в консоли

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

Да, эта проблема связана с недавними "обновлениями" в Angular6, в моем случае с Ionic4.Криптотека была исключена, так как считалась громоздкой.Кажется, от Angular нет четкого решения о том, как это можно решить, поэтому до сих пор нужно включать эти библиотеки извне.

Скорее всего, вы добавили что-то похожее на "package.json", который яесть даже ниже, чтобы получить это далеко.

"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
  },

Я также безуспешно пытался

1 - Установить @angular-builders/custom-webpack:

2 - Добавить пользовательский конструктор в angular.json: В angular.json> проект> architect> build> Builder заменить @ angular-devkit / build-angular: от браузера до @ angular-builders / custom-webpack: browser

3 - создать файл webpack.config.js в корне проекта: Это будет загружено новым компоновщиком (по умолчанию имя файла - webpack.config.js, но при необходимости вы можете выбрать другое, см. Здесь. Примечание: это добавит вашу конфигурацию к конфигурации webpack по умолчанию из angular.

4 - Добавить поддержку узлов в webpack.config.js: вот что нужно, например, для web3.

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

В конце концов я только что разбудил woocommerceAPI, и у меня есть рабочая версия. Я увидел, чтоПо крайней мере 40 форков сделали что-то похожее. Между приведенным ниже кодом и браузером это должно работать. Пользовательский веб-пакет не требуется.

Модифицированный WooCommerceAPI