تايب سكريبت - Angular 2/4/5 لا يعمل في IE11

أحاول معرفة سبب توقف تطبيقي Angular 2 عند عرض 'جار التحميل...' عند التشغيل في IE 11.

اتباعًا لاقتراح شخص ما، جربت هذا البرنامج التجريبي، الذي نشره شخص ما على Stack Overflow، على كل من كروم وIE 11. يعمل بشكل جيد على كروم، لكنه يفشل على IE 11. نفس الخطأ، عالق عند عبارة "جارٍ التحميل..."

الرابط هو: https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview

<!DOCTYPE html>
<html>
  <head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Router Sample</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    <script src="https://code.angularjs.org/tools/system.js"></script>
    <script src="https://code.angularjs.org/tools/typescript.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/Rx.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.1/http.dev.js"></script>
    <script>
      System.config({
        transpiler: 'typescript', 
        typescriptOptions: { emitDecoratorMetadata: true }, 
        packages: {'src': {defaultExtension: 'ts'}} 
      });
      System.import('src/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <body>
    <my-app>loading...</my-app>
  </body>

</html>

هل لدى أي شخص فكرة عن سبب فشل IE 11 في تشغيل تطبيق Angular 2؟

شكراً لك!

الإجابة رقم 1

الإصدار الأحدث من angular مُعد فقط للمتصفحات الحديثة بشكل افتراضي...

الإعداد الحالي مخصص لما يُعرف بـ 'المتصفحات الدائمة التحديث'؛ آخر إصدارات المتصفحات التي تقوم بتحديث نفسها تلقائيًا. يشمل ذلك Safari >= 10، وChrome >= 55 (بما في ذلك Opera)، وEdge >= 13 على سطح المكتب، وiOS 10 وChrome على الأجهزة المحمولة.
يشمل هذا أيضًا Firefox، على الرغم من عدم ذكره.

انظر هنا لمزيد من المعلومات حول دعم المتصفح مع قائمة بمكتبات البوليفيل المقترحة للمتصفحات المحددة. https://angular.io/guide/browser-support#polyfill-libs

هذا يعني أنه يتعين عليك يدويًا تمكين الحشوات الصحيحة لجعل Angular يعمل في IE11 والإصدارات أدناه.

لتحقيق ذلك، انتقل إلى polyfills.ts (في مجلد src بشكل افتراضي) وما عليك سوى إلغاء التعليق على الاستيرادات التالية:

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following 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';

لاحظ أن التعليق موجود حرفياً في الملف، لذا فالأمر سهل العثور عليه.

إذا كنت لا تزال تواجه مشاكل، يمكنك تقليل قيمة الخاصية target إلى es5 في tsconfig.json كما اقترح @MikeDub. ما يفعله هذا هو تغيير مخرجات الترجمة لأي تعريفات es6 إلى تعريفات es5. على سبيل المثال، سيتم ترجمة دوال السهم (()=>{}) إلى دوال مجهولة (function(){}). يمكنك العثور على قائمة المتصفحات التي تدعم es6 هنا.

ملاحظات

• تم سؤالي في التعليقات من قبل @jackOfAll عما إذا كانت polyfills لمتصفح IE11 يتم تحميلها حتى إذا كان المستخدم يستخدم متصفحًا حديثًا لا يحتاج إليها. الإجابة هي، نعم يتم تحميلها! سيؤدي تضمين polyfills الخاصة بـ IE11 إلى زيادة حجم ملف الـ polyfill الخاص بك من ~162KB إلى ~258KB اعتبارًا من 8 أغسطس '17. لقد استثمرت جهداً لمحاولة حل هذا، إلا أنه لا يبدو ممكنًا في الوقت الحالي.

• إذا كنت تواجه أخطاء في IE10 وما دونه، انتقل إلى ملف package.json الخاص بك وقم بخفض إصدار webpack-dev-server إلى 2.7.1 تحديدًا. الإصدارات الأعلى من هذا لم تعد تدعم إصدارات IE "الأقدم".

الإجابة رقم 2

لقد واجهت نفس المشكلة تمامًا ولم تنجح أي من الحلول معي. بدلاً من ذلك، إضافة السطر التالي في (homepage).html تحت <head> حلت المشكلة.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

الإجابة رقم 3

لقد واجهت هذه المشكلة اليوم. لقد وجدت حلاً على GitHub لا يتطلب الانتقال إلى نسخة تجريبية أحدث.

أضف البرنامج النصي التالي إلى ملف HTML الخاص بك:

<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

هذا حل المشكلة بالنسبة لي. لمزيد من التفاصيل، يمكنك متابعة مسألة جيتهاب هنا: https://github.com/angular/angular/issues/7144

الإجابة رقم 4

اعتبارًا من فبراير 2017

باستخدام مشروع Angular-Cli، كانت جميع الأسطر في ملف polyfills.ts غير معطّلة بالفعل، لذا كان يتم استخدام جميع البوليفيلز بالفعل.

لقد وجدت هذا الحل هنا لإصلاح مشكلتي.

لتلخيص الرابط أعلاه، إنترنت إكسبلورر لا يدعم دوال السهم/السهم السمين وهي ميزة من es6. (هذا إذا لم تعمل لديك polyfills.ts).

الحل: تحتاج إلى استهداف es5 لكي تعمل في أي من إصدارات IE، تم تقديم الدعم لذلك فقط في متصفح Edge الجديد من مايكروسوفت.

هذا موجود تحت src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",

الإجابة رقم 5

ستحتاج إلى تعديل ملف polyfills.ts لمتصفحاتك المستهدفة عن طريق إلغاء تعليق الأقسام المناسبة.

/** IE9, IE10 and IE11 requires all of the following 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/weak-map';
import 'core-js/es6/set';

الإجابة رقم 6

بالنسبة لي مع iexplorer 11 و Angular 2 لقد أصلحت كل تلك المشاكل أعلاه عن طريق القيام بشيئين:

في index.html أضف:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

في src\polyfills.ts قم بإلغاء التعليق:

/** IE9, IE10 and IE11 requires all of the following 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/weak-map';
import 'core-js/es6/set';

الإجابة رقم 7

  1. قم بإلغاء تعليق بعض الاستيرادات في ملف polyfill.ts.

/** IE9, IE10 and IE11 requires all of the following 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/weak-map';
import 'core-js/es6/set';

تثبيت حزم npm لاحظ أن هناك بعض أوامر تثبيت npm في التعليقات. إذا كنت تستخدم إصدارًا مبكرًا من Angular CLI، قد يكون هناك أيضًا أمر ثالث. بالنسبة لإصدارات Angular CLI 7 و 6 و 1.7، تحتاج إلى تشغيل:

npm install --save classlist.js

npm install --save web-animations-js

الآن افتح IE وقم بعرض تطبيقك وتحقق :)