Angular 2+:IE 11 无法获取未定义或空引用的属性“调用" [英] Angular 2+: IE 11 Unable to get property 'call' of undefined or null reference

问题描述

我遇到了 Internet Explorer 被 Webpack 阻塞的问题.我使用的是当前版本的 Angular-CLI 1.7.4 和 Angular 5.2.10.我收到此错误:

I'm having an issue with Internet Explorer choking on something with Webpack. I'm using Angular-CLI 1.7.4, and Angular 5.2.10, the current versions. I'm getting this error:

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

SCRIPT:5007 Unable to get property 'call' of undefined or null reference. Inline bundle.js (55,12)

这不同于 this issue，因为它在包中的不同行上.该行如下所示:

This is different than this issue, in that it is on a different line in the bundle. The line looks like this:

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

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

I tried modding the webpack code in the node_modules to console.log the moduleId, but it doesn't log for some reason.

我发现了这个帖子，很多人都在那里处理这个问题.我看不到与我的问题相关的内容.

I found this thread, where a lot of people are dealing with this issue. I'm not able to see what is relevant to my issue.

我没有收到来自 CLI 的任何循环依赖警告.

I do not have any circular dependency warnings from the CLI.

我已经将我的代码恢复到几个不同的先前版本，重新安装了节点模块，但我仍然遇到相同的错误.这真的很奇怪.

I've reverted my code to several different previous versions, reinstalled the node modules, and I still get the same error. That's really strange.

更新:以下是我的 polyfill:

UPDATE: Here are the polyfills I have in:

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

我还发现了这个问题，这表明很多人遇到了这个问题，并且提供的解决方案不起作用.

I also found this issue, which shows that a number of people are having this problem, and the solutions offered are not working.

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

UPDATE: I've found the reason the console.log wasn't being called from Webpack. It's that it wasn't necessarily in Webpack. I searched my node_modules for modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), and found there were 87 occurrences. I assumed that because it said 'webpack' that it was part of webpack, so that was the first place I looked, which is a place where it does occur, so I stopped there thinking I'd found it.

此外，我又遇到了这个问题，并重新启动了我的 Angular-CLI 服务器多次，但我无法获得正在运行的编译.

Also, I'm having this problem again, and restarted my Angular-CLI server a bunch of times, but I'm not able to get a compile that is working.

这变得很重要，所以我要对这个问题进行悬赏.

This is becoming critical, so I'm going to raise a bounty on this question.

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

UPDATE: It looks like IE is choking on the invocation (Function.prototype.call) of the method that adds the polyfills. I captured this from inline.bundle.js. It's one of the first things that happens:

function(module, exports, __webpack_require__) {

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

}

推荐答案

此错误仅在运行 ng serve 时发生，在生产版本中不会发生，因此问题不严重，并有一个解决方法，如下所示:

This error only happens when running ng serve, and will not occur in a production build, so the issue is non-critical, and has a workaround, as follows:

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

Workaround: When this occurs, close your browser, restart Angular-CLI dev server, and reopen the browser to your app. (You don't need to clear cache, or anything else.)

这有时会发生在一种测试环境中，而不会发生在其他环境中.

This sometimes occurs in one testing environment and not others.

根据 这个线程，github.com/jakehockey10 说:

Per this thread, github.com/jakehockey10 says:

我只有在实时重新加载后才会遇到这个问题开发者工具打开.Chrome 和 Firefox 没有问题，但如果我有开发者工具在 IE11 中打开并保存对我的打字稿的更改，几乎 100% 的情况下，我都会在重新加载时遇到这些错误.

I'm having this issue only after a live-reload occurs with the Developer Tools open. No issue with Chrome and Firefox, but if I have the Developer Tools open in IE11 and save a change to my typescript, nearly 100% of the time, I get these errors upon reload.

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

Also, Angular 6 is now in full release, and uses a new major version of Webpack. I haven't tried it yet, but would be good to know if someone has tried resolving the issue by upgrading.

这篇关于Angular 2+:IE 11 无法获取未定义或空引用的属性“调用"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！