angular - 为什么我在导入文本编码 polyfill 后在 IE11 中得到 "ReferenceError: ' TextEncoder' is undefined”？

Question

我正在尝试填充一个库 fetch-readablestream ( https://github.com/jonnyreeves/fetch-readablestream )。我已经添加了 polyfills 并且大多数事情都可以工作，但是我一直收到关于 TextEncoder ERROR ReferenceError: 'TextEncoder' is undefined 的错误

我添加了所需的 pollyfill:web-streams-polyfill、text-encoding 和 babel-polyfill。我尝试了这些 polyfill 的其他等价物，但我遇到了同样的问题。

我取消注释所需的 IE 导入后的 polyfills.ts 文件。

import 'web-streams-polyfill'; // Run `npm install --save web-streams-polyfill`.
import 'text-encoding'; // Run `npm install --save text-encoding`.
import 'babel-polyfill'; // Run `npm install --save babel-polyfill`.

我也尝试将脚本添加到 index.html

<script src="node_modules/text-encoding/lib/encoding-indexes.js"></script>
<script src="node_modules/text-encoding/lib/encoding.js"></script>

我不希望有任何错误，但我得到了这个:

ERROR ReferenceError: 'TextEncoder' is undefined
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "'TextEncoder' is undefined",
      message: "'TextEncoder' is undefined",
      name: "ReferenceError",
      number: -2146823279,
      stack: "ReferenceError: 'TextEncoder' is undefined
   at responseParserFactory (http://localhost:4200/vendor.js:139703:3)
   at xhrTransport (http://localhost:4200/vendor.js:139960:1)
   at fetchStream (http://localhost:4200/vendor.js:139795:4)
   at DevicewiseService.prototype.getNotifications (http://localhost:4200/main.js:6577:9)
   at Anonymous function (http://localhost:4200/main.js:159:17)
   at SafeSubscriber.prototype.__tryOrUnsub (http://localhost:4200/vendor.js:145834:9)
   at SafeSubscriber.prototype.next (http://localhost:4200/vendor.js:145772:13)
   at Subscriber.prototype._next (http://localhost:4200/vendor.js:145715:5)
   at Subscriber.prototype.next (http://localhost:4200/vendor.js:145692:9)
   at MapSubscriber.prototype._next (http://localhost:4200/vendor.js:150984:5)",
      Symbol([[Cancel]])_g.r6fxkqwxet3: undefined,
      Symbol([[Pull]])_h.r6fxkqwxet3: undefined,
      Symbol(INITIAL_VALUE)_p.r6fxkqwxet3: undefined,
      Symbol(rxSubscriber)_o.r6fxkqwxet3: undefined
   }

我们可以在 fetchStream 调用中看到这种情况。

Answer 1

使用 npm 包:https://www.npmjs.com/package/text-encoding (现在已弃用，但效果很好)。

然后添加到 polyfills.ts 代码:

if (typeof window['TextEncoder'] !== 'function') {
  const TextEncodingPolyfill = require('text-encoding');
  window['TextEncoder'] = TextEncodingPolyfill.TextEncoder;
  window['TextDecoder'] = TextEncodingPolyfill.TextDecoder;
}

不使用 import 'text-encoding'; !