web-dev-qa-db-fra.com

Angular 2+: IE 11 Impossible d'obtenir la propriété 'call' de référence non définie ou nulle)

J'ai un problème avec Internet Explorer qui s'étouffe avec quelque chose avec Webpack. J'utilise Angular-CLI 1.7.4 et Angular 5.2.10, les versions actuelles. J'obtiens cette erreur:

SCRIPT: 5007 Impossible d'obtenir la propriété 'call' de référence non définie ou nulle. Inline bundle.js (55,12)

Ceci est différent de ce problème , en ce sens qu'il se trouve sur une ligne différente dans le bundle. La ligne ressemble à ceci:

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

J'ai essayé de modifier le code du webpack dans le node_modules En console.log Le moduleId, mais il ne se connecte pas pour une raison quelconque.

J'ai trouvé ce fil , où beaucoup de gens font face à ce problème. Je ne suis pas en mesure de voir ce qui est pertinent pour mon problème.

Je n'ai aucun avertissement de dépendance circulaire de la CLI.

J'ai rétabli mon code dans plusieurs versions précédentes différentes, réinstallé les modules de noeud et j'obtiens toujours la même erreur. C'est vraiment étrange.

MISE À JOUR: Voici les polyfills que j'ai dans:

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

J'ai également trouvé ce problème , ce qui montre qu'un certain nombre de personnes ont ce problème et que les solutions proposées ne fonctionnent pas.

MISE À JOUR: J'ai trouvé la raison pour laquelle le fichier console.log n'était pas appelé à partir de Webpack. C'est qu'il n'était pas nécessairement dans Webpack. J'ai cherché dans mon node_modules Pour modules[moduleId].call(module.exports, module, module.exports, __webpack_require__), et j'ai trouvé qu'il y avait 87 occurrences. J'ai supposé que parce qu'il disait 'webpack' qu'il faisait partie de webpack, c'est donc le premier endroit où j'ai regardé, qui est un endroit où il fait arriver, alors je me suis arrêté là en pensant que je l'avais trouvé.

En outre, je rencontre à nouveau ce problème et j'ai redémarré mon serveur Angular-CLI plusieurs fois, mais je ne suis pas en mesure d'obtenir une compilation qui fonctionne.

Cela devient critique, donc je vais lever une prime sur cette question.

MISE À JOUR: Il semble que IE s'étouffe sur l'invocation (Function.prototype.call) De la méthode qui ajoute les polyfills. J'ai capturé cela à partir de inline.bundle.js. C'est l'un des premières choses qui se produisent:

function(module, exports, __webpack_require__) {

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

}
javascriptangularwebpackangular-cliwebpack-2
15
BBaysinger

Cette erreur se produit uniquement lors de l'exécution de ng serve, et ne se produira pas dans une version de production. Le problème n'est donc pas critique et propose une solution de contournement, comme suit:

Solution: lorsque cela se produit, fermez votre navigateur, redémarrez le serveur de développement Angular-CLI et rouvrez le navigateur à votre application. (Vous n'avez pas besoin de vider le cache ou autre chose.)

Cela se produit parfois dans un environnement de test et pas dans d'autres.

Par ce fil , github.com/jakehockey10 dit:

Je rencontre ce problème uniquement après un rechargement en direct avec les outils de développement ouverts. Aucun problème avec Chrome et Firefox, mais si j'ai les outils de développement ouverts dans IE11 et que j'enregistre une modification de mon TypeScript, presque 100% du temps, j'obtiens ces erreurs lors du rechargement.

En outre, Angular 6 est maintenant en version complète et utilise une nouvelle version majeure de Webpack. Je ne l'ai pas encore essayé, mais il serait bon de savoir si quelqu'un a essayé de résoudre le problème en mise à niveau.

11
BBaysinger

Même avec les polyfills ci-dessus inclus, vous utilisez peut-être toujours une fonctionnalité qui n'est pas prise en charge dans IE. Au lieu de cela, vous pouvez essayer ceci:

 import 'core-js/shim';

Cela comprendra TOUS les polyfills (ce qui n'ajoute pas vraiment grand-chose à votre bundle de toute façon). À tout le moins, cela aidera à éliminer le problème des polyfills.

La source de référence: https://github.com/zloirock/core-js/blob/master/shim.js

Bonne chance!

6
Pearman

SOLUTION: le problème étant lié au serveur de développement Webpack uniquement, nous avons choisi d'écrire simplement les fichiers avec ng build --watch, et les servir avec lite-server pour tester IE <= 11.

0
BBaysinger

Si ce code fonctionne dans d'autres navigateurs, vous avez peut-être rencontré un problème d'implémentation JS spécifique à IE. Dans votre projet, ouvrez le fichier src/polyfills.ts. Cela commence par un tas de lignes commentées avec IE polyfills. Décommentez-les toutes et reconstruisez l'application. Si cela vous aide, essayez de savoir quel polyfill spécifique a résolu votre problème et commentez le reste .

0
Yakov Fain