Angular：utils/util.js -> 未捕获的引用错误：进程未定义

Question

我觉得这个问题应该很简单地解决，但经过几次尝试，我就是没有找到解决方案。

这是我收到的错误：

未捕获的引用错误：进程未定义
38509@[项目路径] ode_modules\util\util.js:109

当我将 web3 实例化到一个干净/新的站点时（还有另外两个“测试”组件，一个链接一个按钮），这会被触发

我搜索并发现了大量信息表明

• process 是一个服务器端“节点”变量，我可以通过添加到我的 webpack.config.js 来将其设置为在客户端可用，我已经完成了。
• 我也许可以通过在我的 app.component.ts 中声明一个全局角度变量来解决，但似乎这个依赖项目 .js 文件没有访问它。

我也尝试过直接更新依赖项目，但即使进行了编译，我的更改似乎也没有分发到 webpack build /dist/ 结果中。

我认为这可能有一个非常简单的解决方案，但我只是忽略了它。我只是在这里打转我的轮胎，需要一点帮助，但我是我圈子里第一个冒险进入 web3 的人，而且没有一个亲密的朋友可以帮助我解决这个问题。这里有人可以提供一些见解或替代方案来解决这个问题吗？

相关代码：

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'),  
    }, 
    }
}

全局常量.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;
}

utils/util.js 的相关部分（第 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

将以下内容添加到polyfills.ts（通常在src目录中）：

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

Answer 2

npm i util
npm i process

并在编译器选项中的 tsconfig.json 中添加 types:["node"]

并将 webpack 配置与进程合并

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

Answer 3

我通过更正导入语句解决了该问题。我不小心使用了 Node Express 模块中的路由器，而不是 @angular/router 中的路由器。