Angular 6 - process is not defined when trying to serve application

21
votes

I am getting the following error when I try to serve my angular 6 application using cosmicjs:

Uncaught ReferenceError: process is not defined
    at Object../node_modules/cosmicjs/dist/index.js (index.js:6)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app.component.ts (main.js:94)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app.module.ts (app.component.ts:9)
    at __webpack_require__ (bootstrap:81)
    at Object../src/main.ts (environment.ts:18)
    at __webpack_require__ (bootstrap:81)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:81)

My latest theory is something to do with the process.env property being undefined.

I'm following this tutorial here

and my exact code can be found here

The tutorial seems to be using an older version of angular that uses .angular-cli.json instead of the new angular.json and I think this is part of the issue in trying to specify the environment variables.

5
javascriptangularangular6

5 Answers

40
votes

In polyfill.ts, add this line:

(window as any).process = {
  env: { DEBUG: undefined },
};

Reference: https://github.com/algolia/algoliasearch-client-javascript/issues/691

Or npm i -S process, then add this to polyfill.ts:

import * as process from 'process';
window['process'] = process;
14
votes

To fix the problem, I added the following lines to 'polyfills.ts' file, 

(window as any).global = window;
global.Buffer = global.Buffer || require('buffer').Buffer;
global.process = require('process');
10
votes

This is an incompatibility with Angular v6. They removed support (shim) of process and global variables in browser.

I suggest you to use Angular 5, till cosmic.js fixes the error. Maybe you can even open an issue for it.

7
votes

This is an incompatibility with Angular 6. They removed support (shim) of process and global variables in browser.

Adding the following before your closing into your index.html will remove the error.

<script>
  var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
    env: { DEBUG: undefined },
    version: []
  };
</script>
2
votes

As long as you are not satisfied with putting some random logic into polyfills.ts and looking for a way to actually access the process.env in your Angular application please find below solution.

Change your "builder": "@angular-devkit/build-angular:dev-server" to "builder": "@angular-builders/custom-webpack:dev-server" in angular.json.