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

16

我在使用Webpack时遇到了Internet Explorer的问题。我正在使用Angular-CLI 1.7.4和Angular 5.2.10,这是当前版本。我收到了以下错误:

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

这与此问题不同,因为它在bundle的另一行上。该行看起来像这样:

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

我尝试修改node_modules中的webpack代码,将moduleId打印到控制台,但出于某些原因它不会记录日志。

我发现了这个帖子,很多人正在处理这个问题。但是我无法看到与我的问题相关的内容。

我没有从CLI获得任何循环依赖警告。

我把我的代码还原为几个不同的先前版本,重新安装了node模块,但仍然遇到相同的错误。这真的很奇怪。

更新:这里是我使用的polyfills:

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';

我也发现了这个问题,许多人都遇到了这个问题,而提供的解决方案并没有起作用。

更新:我找到了控制台中的console.log没有被Webpack调用的原因。这是因为它并不一定在Webpack中。 我在node_modules中搜索了modules[moduleId].call(module.exports, module, module.exports, __webpack_require__),发现有87个匹配项。 因为它说“webpack”,所以我认为它是webpack的一部分,所以我首先在那里查找,确实发现它在webpack中出现过,所以我就停在那里以为我找到了它。

另外,我再次遇到了这个问题,并重新启动了我的Angular-CLI服务器多次,但我无法得到一个正常工作的编译版本。

这变得非常紧急,所以我将在这个问题上设置赏金。

更新:看起来IE卡在了添加polyfills的方法(Function.prototype.call)的调用上。 我从inline.bundle.js中捕获了它。 这是发生的第一件事之一:

function(module, exports, __webpack_require__) {

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

}

1
我不确定。我该如何找出来? - BBaysinger
我的意思是,我不确定你所说的“loader”是什么意思。 - BBaysinger
1
抱歉,我以为你问 WebPack 的问题时已经知道了:无论如何,这里是有关加载器的信息:https://github.com/webpack/docs/wiki/using-loaders,这里是列出可用加载器的文档页面:https://webpack.js.org/loaders/。 - Randy Casburn
1
这很可能与webpack-dev-server有关,请查看此问题:https://github.com/webpack/webpack-dev-server/issues/1282 - Randy Casburn
我是通过以下链接找到的:https://dev59.com/2FYN5IYBdhLWcg3wRmah#47686431。在 package.json 中,它是 ~2.11.0,在 package.lock.json 中,它是 2.11.2。唉,我得明天再回来看看这个问题。 - BBaysinger
显示剩余2条评论
4个回答

13

这个错误只会在运行ng serve时出现,不会在生产构建中发生,因此问题不是关键性的,并且有一个解决方法如下:

解决方法:当出现此问题时,请关闭浏览器,重新启动Angular-CLI开发服务器,然后重新打开您的应用程序。(您无需清除缓存或执行其他操作。)

有时候这种情况在一个测试环境中会发生而在其他环境中不会。

根据此线程,github.com/jakehockey10说:

我只在使用开发者工具进行实时重载后出现这个问题。 在Chrome和Firefox中没有问题,但如果我在IE11中打开开发者工具并保存TypeScript更改,几乎100%的时间会在重新加载时出现这些错误。

此外,Angular 6现已发布全面使用了Webpack的新主要版本。虽然我还没有尝试过,但知道有人通过升级来解决此问题将会很好。


4
哇,经过尝试清除所有缓存后,我只是打开了一个全然相同的 URL 的新标签页,就解决了问题。 - worldsayshi
3
天啊,真的是因为实时重新加载。幸运的是我看到了这篇文章……否则我可能会浪费好几个小时在这上面。 - Sampgun
2
@Sampgun,我永远不会忘记,我不想告诉你我们在这上面浪费了多少时间。 - BBaysinger
很抱歉听到这个消息!但很高兴你分享给其他人知道了!祝一切顺利! - Sampgun

7
即使使用了上述的polyfills,您仍然可能使用了IE不支持的功能。相反,您可以尝试使用以下方法:
 import 'core-js/shim';

这将包括所有的polyfills(这对你的捆绑包来说并没有太大影响)。至少,这将有助于排除polyfills是问题的原因。
参考源代码: https://github.com/zloirock/core-js/blob/master/shim.js 祝你好运!

谢谢。此外,有人在类似的问题上建议尝试在 Angular 运行之前在索引中加载 polyfills。我也想尝试一下,但我需要弄清楚如何将它们全部编译成一个 .js 文件。 - BBaysinger
为什么?有了上面的导入,您不需要进行任何手动编译——Angular CLI会自动完成所有操作。 - Pearman
1
我猜想的是,可能是 polyfills 在 .call() 之后才被加载,但如果你说这不可能,我会相信你的话。 - BBaysinger
如果您正在使用CLI生成的polyfills.ts文件,它应该会为您处理生命周期。话虽如此,更奇怪的事情也发生过。 - Pearman
到目前为止,您的修复看起来不错。唯一的问题是,我需要重启服务器多次以确认这个修复。 - BBaysinger
问题 - 你是否完全关闭了IE(可能需要使用任务管理器),并在进行更改后重新打开它?它在缓存方面有一些独特的问题,偶尔需要完全重置。 - Pearman

0
如果这段代码在其他浏览器中可以正常工作,那么你可能遇到了一些IE特定的JS实现问题。在你的项目中,打开文件src/polyfills.ts。它以一堆被注释掉的IE polyfills行开始。取消所有注释并重新构建应用程序。如果这有所帮助,请尝试找出哪个具体的polyfill解决了你的问题,并注释掉其余部分。

抱歉,我忘了提到,我已经有所有的 polyfills 了。 - BBaysinger
2
我接下来会尝试升级CLI到最新的6版本RC。它在底层使用WebPack 4。看看这是否有帮助。 - Yakov Fain

-1

解决方法:由于问题仅与Webpack开发服务器有关,我们选择使用ng build --watch编写文件,并使用lite-server进行测试IE <= 11。


我认为答案与问题无关,观察选项不应影响输出。 - Amr Ibrahim
@Amr,你没有理解重点。我们放弃使用ng serve,而是运行一个完全不同的本地服务器,lite-server。 - BBaysinger

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接