导入和使用WooCommerce API后出现空白屏幕 [英] Getting Blank screen after importing and using WooCommerce API

问题描述

在我的主页中导入API之后，我试图在Ionic4应用程序中使用WooCommerce API，我在输出屏幕上看不到任何内容，如下所示:
home.page.ts

I'm trying to use WooCommerce API in Ionic4 application after importing API in my home page I cannot see anything on output screen below is code:
home.page.ts

import { Component } from '@angular/core';
import * as WC from '@woocommerce/woocommerce-rest-api';

@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {

//Local Objet WooCommerce of type any
WooCommerce: any;

constructor() {

this.WooCommerce = WC({ 
   url: "https://shop.example.com",
   consumerKey: "ck_fc057c56e5b430c9f4be64c86225e11943647ca1",
   consumerSecret: "cs_12842c6e3c1122e9a17cb5c6b4e33aca3e0199528",
 });

 this.WooCommerce.getAsync("products").then( (data) => {
  console.log(data);
 }, (err) => {
  console.log(err)
 })
 }
 }

使用此新的WooCommerce API，当我导入该API时，Ionic应用程序的主页就会消失.当我注释此代码时，它再次出现.这就是我导入和使用它的方式. 运行这段代码后，我在控制台输出上得到了它:

using this new WooCommerce API, and when I import this API my home page of Ionic app disappears. and when I comment this code it again reappears. Here is how I'm importing and using it. after running this code I'm getting this on console Output:

https://prntscr.com/p8kbmy

推荐答案

根据您的屏幕截图，您遇到的问题是未定义global.

Based on your screenshot, you are having problems with global not being defined.

该解决方案似乎要使用此方法定义全局自己行:

The solution seems to be to define global yourself using this line:

(window as any).global = window;

打开/src/polyfills.ts并将其添加到底部:

Open /src/polyfills.ts and add this to the bottom:

// BUG FIX: Add global to window, assigning the value of window itself.
// https://github.com/socketio/socket.io-client/issues/1166#issuecomment-386195105
(window as any).global = window;

这篇关于导入和使用WooCommerce API后出现空白屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！