Angular 2+:IE 11无法获得财产'电话'未定义或空引用的

时间:2018-04-19 01:44:19

标签: javascript angular webpack angular-cli webpack-2

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

  

脚本: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的任何循环依赖性警告。

我已将我的代码还原到几个不同的先前版本,重新安装了节点模块,我仍然得到相同的错误。这真的很奇怪。

更新:以下是我所拥有的填充物:

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,这表明很多人都遇到了这个问题,所提供的解决方案无效。

更新1:似乎每次编译都不会出现此问题。如果问题开始,请重新启动Angular-CLI服务器,或重新构建直到它运行。

更新2:我发现没有从Webpack调用console.log的原因。它不一定是 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");

}

4 个答案:

答案 0 :(得分:9)

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

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

这可能与我的测试环境有关,而不是其他任何事情。我们一直在使用SauceLabs来测试IE。我们最近也开始使用VirtualBox。 更新:有时也会在VirtualBox中发生这种情况,但奇怪的是,在一个构建中,它有时会发生在一个测试环境中,而不是另一个。

this thread,github.com / jakehockey10说:

  

我只是在发生了重新加载之后才遇到这个问题   开发者工具打开。 Chrome和Firefox没有问题,但如果有的话   在IE11中打开开发人员工具并保存对我的打字稿的更改,   几乎100%的时间,我在重新加载时会遇到这些错误。

此外,Angular 6现已完全发布,并使用了新的主要版本的Webpack。我还没有尝试过,但如果有人尝试通过升级来解决问题,我会很高兴。

答案 1 :(得分:6)

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

ps_server

这将包括所有的polyfills(无论如何它都不会真正为你的包添加太多)。至少,这将有助于消除polyfill是问题。

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

祝你好运!

答案 2 :(得分:0)

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

答案 3 :(得分:0)

替代方法:由于问题仅与Webpack dev服务器有关,我们选择只编写ng build --watchserve them with lite-server的文件来测试IE< = 11。