Angular: utils/util.js -> Uncaught ReferenceError: process is not defined

Question

I feel like this should be resolved simply, but after several attempts, I'm just not coming to a resolution.

Here is the error I've received:

Uncaught ReferenceError: process is not defined
38509 @ [PathToProject]\node_modules\util\util.js:109

This is getting triggered when I instantiate web3 into a clean/new site (there's two other 'test' components, one link one button)

I've searched and found numerous bits of information suggesting that

• process is a server side 'node' var, and I can set this to be available client-side by adding to my webpack.config.js, which I have done.
• I might be able to resolve by just declaring a global angular var in my app.component.ts, but it seems this dependency project .js file is not accessing it.

I've also tried just updating the dependency project directly, but even with a compile, it seems that my changes are not being distributed into the webpack build /dist/ result.

I think this probably has a blatantly simple solution, but I'm just overlooking it. I'm just spinning my tires here and could use a little help, but I'm the first in my circle to venture into web3 and don't have a close friend to bounce this off of. Can someone here provide some insight or an alternative resolve this issue?

Relevant bits of code:

webpack.config.js

var webpack = require('webpack');
const path = require('path');


module.exports = {
    module: {
      rules: [
        {
          test: /\.(sass|less|css|ts)$/,
          use: [
            'ts-loader'
          ],
        }
      ],
    },
    plugins: [
        new webpack.DefinePlugin({
          'process.env.NODE_ENV': 'develop',
        })
    ],
    entry: './src/main.ts',
    output: {
      filename: 'main.js',
      path: path.resolve(__dirname, 'dist'),
    },
    resolve: {
      extensions: [ '.js', '.ts', '.html' ],
      modules: [
          path.resolve(__dirname, 'node_modules/'),
          path.resolve("", "src")
      ],
      alias: {
          Environments: path.resolve(__dirname, 'src/environments/'),
      },
      fallback: {
        "fs": false,
        "tls": false,
        "net": false,
        "path": false,
        "zlib": false,
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "stream": false,
        "crypto": require.resolve("crypto-browserify"),
        "crypto-browserify": require.resolve('crypto-browserify'),  
    }, 
    }
}

global-constants.ts

export class GlobalConstants {
    public static process: any  = {
        env: {
            NODE_ENV: 'development'
        }
    }
}

app.component.ts

import { Component } from '@angular/core';
import{ GlobalConstants } from './common/global-constants';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Cool Title';
  process = GlobalConstants.process;
}

Relevant bit of utils/util.js (line 106-116)

var debugs = {};
var debugEnvRegex = /^$/;

if (process.env.NODE_DEBUG) {
  var debugEnv = process.env.NODE_DEBUG;
  debugEnv = debugEnv.replace(/[|\\{}()[\]^$+?.]/g, '\\$&')
    .replace(/\*/g, '.*')
    .replace(/,/g, '$|^')
    .toUpperCase();
  debugEnvRegex = new RegExp('^' + debugEnv + '$', 'i');
}

Answer 1

Add the following to polyfills.ts (usually inside src directory):

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

Answer 2

npm i util
npm i process

And add types:["node"] in tsconfig.json within compiler options

and merge the webpack config with process

merge(webpackConfig, {
    plugins:[
      new webpack.ProvidePlugin({
        process: 'process/browser'
      })
    ]
  })