Angular 2+：IE 11 无法获取未定义或空引用的属性“调用”

Posted 2023-03-15

【中文标题】Angular 2+：IE 11 无法获取未定义或空引用的属性“调用”

【英文标题】：Angular 2+: IE 11 Unable to get property 'call' of undefined or null reference

【发布时间】：2018-09-29 09:18:46

【问题描述】：

我在使用 Webpack 时遇到了 Internet Explorer 阻塞的问题。我正在使用当前版本的 Angular-CLI 1.7.4 和 Angular 5.2.10。我收到此错误：

SCRIPT:5007 无法获取未定义或 null 的属性“调用” 参考。内联 bundle.js (55,12)

这与this issue 不同，因为它位于包中的不同行。该行如下所示：

/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

我尝试将 node_modules 中的 webpack 代码修改为 console.log moduleId，但由于某种原因它没有记录。

我找到了this thread，很多人都在处理这个问题。我看不到与我的问题相关的内容。

我没有来自 CLI 的任何循环依赖警告。

我已将我的代码还原为几个不同的先前版本，重新安装了节点模块，但我仍然遇到相同的错误。真是奇怪。

更新：这是我使用的 polyfill：

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

我还找到了this issue，这表明很多人都遇到了这个问题，并且提供的解决方案不起作用。

更新：我找到了没有从 Webpack 调用 console.log 的原因。只是它不一定是 in Webpack。我在我的node_modules 中搜索modules[moduleId].call(module.exports, module, module.exports, __webpack_require__)，发现有87 次出现。我假设因为它说“webpack”它是 webpack 的一部分，所以这是我看的第一个地方，这是它确实发生的地方，所以我停在那里以为我找到了它。

另外，我又遇到了这个问题，我重新启动了我的 Angular-CLI 服务器很多次，但我无法得到一个正在工作的编译。

这变得很关键，所以我将在这个问题上提出赏金。

更新：看起来 IE 对添加 polyfill 的方法的调用 (Function.prototype.call) 感到窒息。我从 inline.bundle.js 中捕获了这个。这是最先发生的事情之一：

function(module, exports, __webpack_require__) 

    module.exports = __webpack_require__("./src/polyfills.ts");

【问题讨论】：

出于好奇，您使用的是哪个加载器？

我不确定。我怎样才能知道呢？

我的意思是，我不确定你所说的“装载机”是什么意思。

抱歉，假设你问的是 WebPack 问题，你会知道：无论如何，这里是加载器：github.com/webpack/docs/wiki/using-loaders，这里是列出可用加载器的文档页面：@987654325 @

这很可能与 webpack-dev-server 有关：请看这个问题：github.com/webpack/webpack-dev-server/issues/1282

【参考方案1】：

如果此代码在其他浏览器中运行，您可能会遇到一些特定于 IE 的 JS 实现问题。在您的项目中，打开文件 src/polyfills.ts。它从一堆带有 IE polyfill 的注释行开始。取消注释所有这些并重建应用程序。如果这有帮助，请尝试找出哪个特定的 polyfill 解决了您的问题并注释掉其余部分。

【讨论】：

对不起，忘了说，我把所有的 polyfill 都放进去了。

我尝试的下一步是将 CLI 升级到版本 6 的最新 RC。它在后台使用 WebPack 4。看看这是否有帮助。

【参考方案2】：

即使包含上述 polyfill，您可能仍在使用 IE 不支持的功能。相反，你可以试试这个：

 import 'core-js/shim';

这将包括所有的 polyfills（无论如何，它并没有真正为你的包添加那么多）。至少，这将有助于消除 polyfill 的问题。

参考来源： https://github.com/zloirock/core-js/blob/master/shim.js

祝你好运！

【讨论】：

谢谢。此外，有类似问题的人建议在 Angular 运行之前尝试在索引中加载 polyfill。我也想尝试一下，但我必须弄清楚如何将它们全部编译到 .js 文件中。

为什么？通过上面的导入，您不需要进行任何手动编译——Angular CLI 会自动完成所有工作。

我猜想是在 .call() 之后才加载 polyfill，但如果你说这不可能，我会相信你的话。

如果您使用 CLI 生成的 polyfills.ts 文件——它应该为您处理生命周期。话虽如此，奇怪的事情发生了。

到目前为止，您的修复工作进展顺利。唯一的问题是，我需要多次重启服务器才能确认这一点。

【参考方案3】：

解决方法：由于问题仅与 Webpack 开发服务器有关，因此我们选择仅使用 ng build --watch 和 serve them with lite-server 编写文件以测试 IE

【讨论】：

我认为答案与问题无关，watch选项应该不会影响输出

@Amr，你没抓住重点。我们放弃使用 ng serve，并运行一个完全不同的本地服务器，lite-server。

【参考方案4】：

此错误仅在运行 ng serve 时发生，不会在生产构建中发生，因此该问题不严重，并且有解决方法，如下所示：

解决方法：发生这种情况时，关闭浏览器，重新启动 Angular-CLI 开发服务器，然后将浏览器重新打开到您的应用程序。（您不需要清除缓存或其他任何内容。）

这有时会发生在一个测试环境中而不是其他环境中。

根据this thread，github.com/jakehockey10 说：

只有在使用 开发者工具打开。 Chrome 和 Firefox 没有问题，但如果我有 开发人员工具在 IE11 中打开并保存对我的打字稿的更改， 几乎 100% 的时间，我在重新加载时都会收到这些错误。

此外，Angular 6 现已全面发布，并使用了新的主要版本的 Webpack。我还没有尝试过，但很高兴知道是否有人尝试通过升级来解决问题。

【讨论】：

哇，在尝试清除所有缓存后，我刚刚为完全相同的 url 打开了一个新选项卡，并且有效。

天啊。这真的是因为实时重载。幸运的是，我遇到了这篇文章......我可能会为此浪费几个小时。

@Sampgun，我永远不会忘记，我不想告诉你我们为此浪费了多少时间。

很遗憾听到这个消息！但很高兴你分享给别人知道！万事如意