javascript - 全局、缓冲区和进程在 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;

当我尝试使用“ionicserve”运行 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解析器的解决方案

正如您在评论中提到的，有问题的库是rss-parser。如上所述in this issue , 使用 bundler 时，rss-parser 当前无法与 Angular 正常工作。最有可能是由于 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 .