升级到 angular-6.x 会出现“Uncaught ReferenceError: global is not defined”

IT技术 javascript angular angular-cli angular6
2021-01-21 10:38:03

我将我的项目从 angular-5.x 升级到 angular-6.x，它开始出现以下错误，甚至创建虚拟全局变量也无法像这里给出的那样工作Angular 6 Auth0 - global not defined

错误如下：

Uncaught ReferenceError: global is not defined
    at Object../node_modules/has-binary2/index.js (index.js:10)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/socket.io-parser/index.js (index.js:8)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/socket.io-client/lib/index.js (index.js:7)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app4pc/apiConnection/services/ApiConnectionServer.ts (auth.interceptor.ts:8)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/app4pc/apiConnection/toServer.module.ts (ApiConnectionServer.ts:11)
    at __webpack_require__ (bootstrap:81)

解决此问题后，我收到以下错误：

Uncaught ReferenceError: process is not defined
    at Object../node_modules/process-nextick-args/index.js (index.js:3)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:26)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/readable-stream/readable-browser.js (readable-browser.js:1)
    at __webpack_require__ (bootstrap:81)
    at Object../node_modules/simple-peer/index.js (index.js:7)
    at __webpack_require__ (bootstrap:81)
    at Object../src/app/util/services/call.services.ts (notification.service.ts:12)
    at __webpack_require__ (bootstrap:81)

并继续下去。

6个回答

将此行添加到polyfills.ts应解决节点全局错误

(window as any).global = window;

在这个angular-cli issue thred中提到了解决方案

按照 angular-cli 的建议添加到 polyfills.ts 并没有解决我的问题。似乎某些 3rd 方库试图在加载 polyfills.ts 之前访问全局（即，可能在加载 angular 之前？）。我能解决这个问题的唯一方法是通过修改我的 index.html 页面来遵循上面接受的解决方案。:-(
2021-03-16 10:38:03
如@risingTide 所述，作为导入添加到 polyfills.ts 文件对我有用。
2021-04-04 10:38:03
补充说，从工作中的 Angular 11 升级到 Angular 12 后，这个问题出现在我身上。很多东西一定在幕后发生了变化......启动“全局”一定是其中之一。我没有使用它，但一定有人在寻找它。
2021-04-05 10:38:03
如果直接将其添加到 polyfills.ts 不起作用，另一种仍然使用此解决方案的方法是添加一个新文件（例如称为 global-shim.ts）并在其中添加脚本，然后导入新文件进入 polyfills.ts。此angular-cli 问题线程中提到了此解决方案
2021-04-06 10:38:03

在起始页中添加以下代码，例如 index.html

var global = global || window;
var Buffer = Buffer || [];
var process = process || {
  env: { DEBUG: undefined },
  version: []
};

例子：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Client</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script>
    var global = global || window;
    var Buffer = Buffer || [];
    var process = process || {
      env: { DEBUG: undefined },
      version: []
    };
  </script>
</head>
<body>
  <app-root>
    <div class="loader"></div>
  </app-root>
</body>
</html>

以上将适用于混合应用程序（在 Node 环境中）以及浏览器

  • 对于“未捕获的 ReferenceError：全局未定义”：

    var global = global || window;

  • 对于“未捕获的 ReferenceError：缓冲区未定义”：

    var Buffer = Buffer || [];

  • 对于“未捕获的引用错误：未定义进程”：

    var process = process || {
  env: { DEBUG: undefined }
}

  • 对于“未捕获的类型错误：无法读取未定义的属性‘切片’”：

    var process = process || {
  env: { DEBUG: undefined },
  version: []
};
基本上是新的角度环境，它期望这些仅在节点环境中可用的全局变量。所以我们为他们做了代理。
2021-03-22 10:38:03
对于来到这里的任何人，请检查添加的 http 客户端module是来自 @angular/common/http 还是来自 selenium-webdriver/http。selenium-webdriver/http 也会导致同样的问题。
2021-03-28 10:38:03
它有效，但你能解释这个错误的原因以及它是如何修复的吗？
2021-03-30 10:38:03
如果您按上述定义流程值，则该应用程序由服务器端应用程序组成。它不会被视为网络应用程序。默认情况下，您将收到 process.browser 值。
2021-03-31 10:38:03
如何修复此错误 Uncaught TypeError: Cannot read property 'slice' of undefined
2021-04-01 10:38:03

我使用HttpClient并意外选择了默认导入'selenium-webdriver/http'

如果你的 app.module.ts 有 import { HttpClient } from 'selenium-webdriver/http';

将其更新为 import { HttpClient } from '@angular/common/http';

那解决了我的问题。

高超。这对我来说是同样的问题。按你说的做了，成功了。非常感谢。
2021-03-30 10:38:03

将此行添加到pollyfills.ts解决我的问题中（只是@kemalbirinci在此处所说的一种解决方法）

(window as any).global = window;

万一，如果你的目标是webpack( ) 中的节点target: 'node'，因为你想修复"Can't resolve 'fs'. 然后您会收到以下错误，Fix: "Uncaught ReferenceError: global is not defined"请按如下方式操作node: { global: true, fs: 'empty' }。奖励：如果出现错误，"Uncaught ReferenceError: exports is not defined".只需添加libraryTarget: 'umd'. 完整的 webpack 配置代码如下。

const webpackConfig = {
  node: { global: true, fs: 'empty' }, // Fix: "Uncaught ReferenceError: global is not defined", and "Can't resolve 'fs'".
  output: {
    libraryTarget: 'umd' // Fix: "Uncaught ReferenceError: exports is not defined".
  }
};

module.exports = webpackConfig; // Export all custom Webpack configs.

这里提出了很多解决方案：https : //github.com/angular/angular-cli/issues/8160

其它你可能感兴趣的问题
上一篇使用 Lodash 分块分割 JavaScript 数组 下一篇未终止字符串文字的常见来源