Question

我正在努力制作一个带有woocommerce集成的角度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。

Modified WooCommerceAPI

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

1 个答案: