CODEWITHSUNDEEP
javascripttypescriptionic4angular8
Alessandra
Alessandra

Reputation: 495

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

I'm trying to use an external js npm library in an Angular 8 ionic 4 app and I received 

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

I tried to solve this problem by inserting in polyfill.ts the following code:

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

When I try to run the ionic app with "ionic serve" I receive a run time error with:

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)

Any suggestion?

Upvotes: 0

Views: 764

Answers (1)

pascalpuetz
pascalpuetz

Reputation: 5418

Original Answer

Angular is a Framework for client side. The runtime target is the browser. You cannot use libraries like process there, since those are only available when running a nodejs process.

You most likely want to split your application into a client and a server side.

Solution for rss-parser

As you mentioned in your comment, the library in question is rss-parser. As described 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.

The solution is to use the prebundled version that gets shipped with the library. To do that, add the prepackaged version to your angular.json, into the script array in your architects build section. RSSReader is now available globally, in your window object and can be used like this:

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;
    })
  }
}

Here is a working Stackblitz.

Upvotes: 2

Related Questions