使用 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