[英]Integration of woocommerce using angular 4 getting TypeError: crypto.createHmac is not a function
I am trying to make a angular 4 app with woocommerce integration to list all the products. 我正在尝试通过woocommerce集成制作一个angular 4应用程序以列出所有产品。 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
Yes this issue is related to the recent "upgrades" in Angular6, in my case with Ionic4. 是的,这个问题与Angular6中最近的“升级”有关,就我而言,与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.
Angular似乎还没有明确的解决方案,因此到目前为止,必须在外部包含这些库。
Most likely you have added something similar to the "package.json" what I have below even to get this far. 很可能您已经添加了一些类似于“ 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
},
I have also tried without success 我也尝试过没有成功
1 - Install @angular-builders/custom-webpack
: 1-安装
@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 2-在angular.json中添加自定义构建器:在angular.json>项目>架构师>构建>构建器中,将@ angular-devkit / build-angular:browser替换为@ 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. 3-在项目的根目录下创建一个文件webpack.config.js:新的构建器将加载该文件(默认情况下,文件名是webpack.config.js,但如果需要,您可以自定义文件名,请参见此处。)注意:这会将您的配置附加到angular的默认Webpack配置中。
4 - Add node support in webpack.config.js : Here is what is needed for web3 for example. 4-在webpack.config.js中添加节点支持:例如,这是web3所需要的。
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. 我最终只是分叉woocommerceAPI,并且有一个工作版本。 I saw that at least 40 forks have done something similar.
我看到至少有40个叉子做了类似的事情。 Between the code bellow and the browser it should work.
在下面的代码和浏览器之间,它应该可以工作。 The custom webpack is not necessary.
自定义Webpack是不必要的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.