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