使用angular 4获得TypeError的woocommerce集成：crypto.createHmac不是函数

Question

我正在尝试通过woocommerce集成制作一个angular 4应用程序以列出所有产品。 这是我的代码

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>项目>架构师>构建>构建器中，将@ angular-devkit / build-angular：browser替换为@ angular-builders / custom-webpack：browser

3-在项目的根目录下创建一个文件webpack.config.js：新的构建器将加载该文件（默认情况下，文件名是webpack.config.js，但如果需要，您可以自定义文件名，请参见此处。）注意：这会将您的配置附加到angular的默认Webpack配置中。

4-在webpack.config.js中添加节点支持：例如，这是web3所需要的。

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

我最终只是分叉woocommerceAPI，并且有一个工作版本。 我看到至少有40个叉子做了类似的事情。 在下面的代码和浏览器之间，它应该可以工作。 自定义Webpack是不必要的。

修改后的WooCommerceAPI