angular - Bazel + Angular + SocketIO 导致 : Uncaught TypeError: XMLHttpRequest is not a constructor

Question

我要加 ngx-socket-io到我的 Angular 应用程序。我使用 Bazel 来运行我的 Angular 开发服务器。
不幸的是 ngx-socket-io似乎不适用于 ts_devserver盒子外面。我在浏览器控制台中收到此错误:

Uncaught TypeError: XMLHttpRequest is not a constructor
    at ts_scripts.js?v=1587802098203:16776
    at Object.23.../transport (ts_scripts.js?v=1587802098203:16780)
    at o (ts_scripts.js?v=1587802098203:11783)

好像是 xmlhttprequest-ssl引起的这是 engine.io-client 的依赖项 ngx-socket-io 需要它.但是这个问题只发生在 ts_devserver 上。 . 在 production 中运行 Angular 应用程序工作得很好。

最小复制

您可以自己轻松尝试: https://github.com/flolu/bazel-socketio-issue

只需运行 yarn install然后 yarn dev (它会导致浏览器控制台 @ http://localhost:4200 中的错误)。
请注意 yarn prod @ http://localhost:8080工作得很好!

编辑 1

目前，Windows 上似乎还有另一个问题。因此，如果您运行的是 Mac 或 Linux，您只能尝试示例 repo

Answer 1

问题来自engine.io-client , socket.io-client 内部使用:

当socket.io-client构建为由触发的 UMD 模块

     "@npm//socket.io-client:socket.io-client__umd",

在 BUILD.bazel , browser engine.io-client/package.json的 key :

 "browser": {
   "ws": false,
   "xmlhttprequest-ssl": "./lib/xmlhttprequest.js"
 },

似乎被忽略了。

因此， require('xmlhttprequest-ssl') node_modules/engine.io-client/lib/transports/*.js 中的语句保留在 UMD 构建中。因为 xmlhttprequest-ssl用于 headless 节点环境并且在浏览器中不起作用，这会导致错误。

我找不到此行为的原因/问题，但我找到了解决方案(不应将其视为解决方法):

重写 engine.io-client与 postinstall脚本:

安装shelljs包裹:yarn add -D shelljs

更新 postinstall在 package.json至:"postinstall": "node --preserve-symlinks --preserve-symlinks-main ./postinstall-patches.js && ngcc"

将以下代码放入postinstall-patches.js在项目根目录:

try {
  require.resolve('shelljs');
} catch (e) {
  // We are in an bazel managed external node_modules repository
  // and the resolve has failed because node did not preserve the symlink
  // when loading the script.
  // This can be fixed using the --preserve-symlinks-main flag which
  // is introduced in node 10.2.0
  console.warn(
      `Running postinstall-patches.js script in an external repository requires --preserve-symlinks-main node flag introduced in node 10.2.0. ` +
      `Current node version is ${process.version}. Node called with '${process.argv.join(' ')}'.`);
  process.exit(0);
}

const {set, cd, sed, ls} = require('shelljs');
const path = require('path');
const log = console.info;

log('===== about to run the postinstall-patches.js script     =====');
// fail on first error
set('-e');
// print commands as being executed
set('-v');

cd(__dirname);

log('\n# patch engine.io-client: rewriting \'xmlhttprequest-ssl\' to browser shim');
ls('node_modules/engine.io-client/lib/transports/*.js').forEach(function (file) {
  sed('-i', '\'xmlhttprequest-ssl\'', '\'../xmlhttprequest\'', file);
});

log('===== finished running the postinstall-patches.js script =====');

(灵感: https://bazelbuild.github.io/rules_nodejs/#patching-the-npm-packages ，链接到示例 https://github.com/angular/angular/blob/master/tools/postinstall-patches.js )

yarn install

yarn dev

我会在几分钟后向你的 GitHub 复制提交一个拉取请求。

可能的替代方案，无法让它们工作:

使用 socket.io-client/dist/socket.io.js但是有一个额外的“UMD shim”，因为它似乎是一个“匿名 UMD”模块，或者

一些npm_umd_bundle魔术

见问题 Every new npm dep needs a unique approach how to add it to ts_devserver #1055在 bazelbuild/rules_nodejs 有关这两种方式的更多信息。