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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/49911435/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 08:49:50  来源:igfitidea点击:

Angular 2+: IE 11 Unable to get property 'call' of undefined or null reference

javascriptangularwebpackangular-cliwebpack-2

提问by BBaysinger

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:

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

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

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

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

这与this issue不同,因为它位于捆绑包中的不同行上。该行如下所示:

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

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

我试着改装的的的WebPack代码node_modulesconsole.logmoduleId,但它不记录的某些原因。

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.

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

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

我没有来自 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.

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

UPDATE: Here are the polyfills I have in:

更新:这是我的 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';

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

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

UPDATE: I've found the reason the console.log wasn't being called from Webpack. It's that it wasn't necessarily inWebpack. I searched my node_modulesfor 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 doesoccur, so I stopped there thinking I'd found it.

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

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.

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

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

这变得越来越重要,所以我将在这个问题上悬赏。

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:

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

function(module, exports, __webpack_require__) {

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

}

采纳答案by BBaysinger

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:

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

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.)

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

This sometimes occurs in one testing environment and not others.

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

Per this thread, github.com/jakehockey10 says:

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

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.

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

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 6 现在已经完整发布,并且使用了 Webpack 的新主要版本。我还没有尝试过,但很高兴知道是否有人尝试通过升级来解决问题。

回答by Pearman

Even the with above polyfills included, you may still be using a feature that is not supported in IE. Instead you might try this:

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

 import 'core-js/shim';

This will include ALL of the polyfills (which doesn't really add that much to your bundle anyway). At the very least, this will help to eliminate that polyfills are the problem.

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

The source for reference: https://github.com/zltheitroadock/core-js/blob/master/shim.js

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

Good luck!

祝你好运!

回答by Yakov Fain

If this code works in other browsers, you might have run into some IE-specific JS implementation issue. In your project, open the file src/polyfills.ts. It starts with a bunch of commented out lines with IE polyfills. Uncomment all of them and rebuild the app. If this helps, try to find out which specific polyfill solved your issue and comment out the rest.

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

回答by BBaysinger

WORKAROUND: Since the problem is to do with the Webpack dev server only, we opted to just write the files with ng build --watch, and serve them with lite-serverfor testing IE <= 11.

变通方法:由于问题仅与 Webpack 开发服务器有关,因此我们选择仅使用 编写文件ng build --watch,并使用 lite-server它们提供服务以测试 IE <= 11。