迁移到Angular 7后出现“Buffer is not defined”错误

Question

我正在将一个 Angular 5 应用迁移到版本 7，但在某些现有代码中使用了 Buffer 全局变量，导致出现问题。

这段代码来自于 btoa 库，该库使用了这个全局变量。

在我的 Angular 7 应用中，当我尝试调用从这个库导出的 btoa 函数时，会抛出 ReferenceError: Buffer is not defined 错误。

然而，在我的 Angular 5 应用中，一切都运行良好。

这里可能发生了什么？我猜测与 angular CLI 的更改以及 webpack 打包方式的变化有关？

我在 此处 看到了一个类似的问题，有建议安装 buffer 包，我尝试了，但对我的情况没有任何影响。

谢谢。

- mindparse

---

你尝试过将"node"添加到你的tsconfig.json->compilerOptions->types数组中吗？ - Poul Kruijt

你能在 StackBlitz 上重现这个错误吗？ - Yaseen Ahmad

@PierreDuc - 我试过了，但没有任何区别。我本来就没在我的 Angular 5 版本的 tsconfig 中加入这个，所以我也没指望它会有什么变化。但还是谢谢你的建议！ - mindparse

你所引用的btoa库适用于Node.js。它使用了仅在Node内部可用的Buffer全局变量，而浏览器中则不包含该变量。为了正确编译，你需要拥有Node.js类型定义，并将node添加到你的类型数组中。如果你不在Node.js内运行应用程序，则不需要btoa包。 - Poul Kruijt

Answer 1

Angular ver 7.2

1. 安装缓冲区

$npm install buffer

2. 安装节点

$npm i @types/node

3. 然后将“node”添加到tsconfig.app.json而不是tsconfig.json中

 "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "types": ["node"]
  },

确保

"typeRoots": [
  "node_modules/@types"
],

在你的tsconfig.json文件中

4. 在你的polyfills.ts中添加全局变量Buffer

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

- YoungHyeong Ryu

---

你的指南中第2步 $npm i @types/node 和第4步 (window as any).global = window; (window as any).global.Buffer = (window as any).global.Buffer || require('buffer').Buffer; 在使用 Ionic 4 和 Angular 8 时似乎是不必要的。 - Patronaut