ionic 4 angular 8 中未定义全局、缓冲区和进程

Question

我正在尝试在 Angular 8 ionic 4 应用程序中使用外部 js npm 库，我收到了

ERROR Error: Uncaught (in promise): ReferenceError: global is not defined

我试图通过在 polyfill.ts 中插入以下代码来解决这个问题：

(window as any).global = window;
 import * as buffer from 'buffer';
 window['buffer'] = buffer;
 import * as process from 'process';
 window['process'] = process;

当我尝试使用 "ionic serve" 运行 ionic 应用程序时，我收到运行时间错误：

index.js:43 Uncaught ReferenceError: global is not defined
    at Object../node_modules/node-libs-browser/node_modules/buffer/index.js (index.js:43)
    at __webpack_require__ (bootstrap:84)
    at Module../src/polyfills.ts (polyfills.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Object.1 (zone-flags.ts:5)
    at __webpack_require__ (bootstrap:84)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at polyfills.js:1
...
ERROR Error: Uncaught (in promise): ReferenceError: global is not defined
ReferenceError: global is not defined
    at Object../node_modules/stream-http/lib/capability.js (capability.js:1)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/stream-http/lib/request.js (request.js:1)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/stream-http/index.js (index.js:1)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/rss-parser/lib/parser.js (parser.js:2)
    at __webpack_require__ (bootstrap:84)
    at Object../node_modules/rss-parser/index.js (index.js:3)
    at __webpack_require__ (bootstrap:84)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

有什么建议吗？

Answer 1

原答案

Angular 是客户端的框架。运行时目标是浏览器。您不能在那里使用像 process 这样的库，因为这些库仅在运行 nodejs 进程时可用。

您很可能希望将应用程序拆分为客户端和服务器端。

rss-parser 的解决方案

正如您在评论中提到的，有问题的图书馆是 rss-parser。如所述 in this issue, rss-parser is currently not working correctly with angular when using a bundler. Most likely due to not having ES Module support.

解决方案是使用库附带的预捆绑版本。为此，将预先打包的版本添加到 angular.json 中，添加到 architects build 部分的 script 数组中。 RSSReader 现在可以在您的 window 对象中全局使用，并且可以像这样使用：

import { Component } from '@angular/core';

// This tells TypeScript that you know this will be available globally during runtime.
// Unfortunately, RSSParser has no TS Declarations, so you have to use any or make a more concrete type yourself
declare const RSSParser:any;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html', 
  styleUrls: [ './app.component.css' ]
})   
export class AppComponent  {
  title:string = '';
  items:Array<any> = []; 

  constructor() {
    const CORS_PROXY = "https://cors-anywhere.herokuapp.com/" 
    let parser = new RSSParser(); 
    parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss', (err, feed) => {
      if (err) throw err;
      console.log(feed);
      this.title = feed.title;
      this.items = feed.items;
    })
  }
}

这里是a working Stackblitz.

ionic 4 angular 8 中未定义全局、缓冲区和进程

global, buffer and process are undefined in ionic 4 angular 8

javascript

typescript

ionic4

angular8