Angular 2/4/5 ไม่ทำงานใน IE 11

124

ฉันกำลังพยายามหาสาเหตุว่าทำไมแอป angular 2 ของฉันจึงค้างแสดงการโหลด ... เมื่อทำงานใน IE 11

ตามคำแนะนำของใครบางคนฉันได้ลองใช้ plunker นี้ซึ่งโพสต์โดยใครบางคนใน stack overflow ทั้งบน Chrome และ IE 11 ทำงานได้ดีบน Chrome แต่ล้มเหลวบน IE 11 ข้อผิดพลาดเดียวกันติดอยู่ที่พูดว่า "กำลังโหลด ... "

Plunker คือ: 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 ได้?

ขอบคุณ!

angular  typescript  internet-explorer 
— Pat Bone Crusher Laplante
แหล่งที่มา
คำตอบคือใช้ 2.0.0-beta.0 สำหรับตอนนี้
— Pat Bone Crusher Laplante

คำตอบ:

187

เวอร์ชันล่าสุดangular คือการตั้งค่าสำหรับเบราว์เซอร์ที่เขียวชอุ่มตลอดปีโดยค่าเริ่มต้น ...

การตั้งค่าปัจจุบันใช้สำหรับเบราว์เซอร์ "เอเวอร์กรีน" เวอร์ชันล่าสุดของเบราว์เซอร์ที่อัปเดตตัวเองโดยอัตโนมัติ ซึ่งรวมถึง Safari> = 10, Chrome> = 55 (รวม Opera), Edge> = 13 บนเดสก์ท็อปและ iOS 10 และ Chrome บนมือถือ
นอกจากนี้ยังรวมถึง firefox แม้ว่าจะไม่ได้กล่าวถึง

ดูข้อมูลเพิ่มเติมเกี่ยวกับการรองรับเบราว์เซอร์พร้อมรายการโพลีฟิลล์ที่แนะนำสำหรับเบราว์เซอร์เฉพาะที่นี่ https://angular.io/guide/browser-support#polyfill-libs

ซึ่งหมายความว่าคุณต้องเปิดใช้งาน polyfills ที่ถูกต้องด้วยตนเองเพื่อให้ 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นิยาม ตัวอย่างเช่นฟังก์ชัน fat arrow ( ()=>{}) จะถูกคอมไพล์เป็นฟังก์ชันที่ไม่ระบุชื่อ ( function(){}) คุณสามารถค้นหารายการ ES6 เบราว์เซอร์ที่สนับสนุนที่นี่

หมายเหตุ

•ฉันถูกถามในความคิดเห็น@jackOfAllว่ามีการโหลดโพลีฟิลของ IE11 แม้ว่าผู้ใช้จะอยู่ในเบราว์เซอร์ที่เขียวชอุ่มตลอดปีซึ่งไม่ต้องการก็ตาม คำตอบคือใช่พวกเขา! รวมของ IE11 polyfills จะใช้ไฟล์ polyfill ของคุณจาก~162KBการ~258KBณ 8 สิงหาคม 17 ฉันได้ลงทุนในการพยายามแก้ไขปัญหานี้ แต่ดูเหมือนจะไม่สามารถทำได้ในขณะนี้

•หากคุณได้รับข้อผิดพลาดใน IE10 และต่ำกว่าให้เข้าไปหาคุณpackage.jsonและปรับลดรุ่นwebpack-dev-serverเป็น2.7.1เฉพาะ เวอร์ชันที่สูงกว่านี้จะไม่รองรับ IE เวอร์ชัน "เก่ากว่า" อีกต่อไป

— Zze
แหล่งที่มา
3
โครงการเชิงมุม 5 ของฉันยังมีข้อผิดพลาดเหมือนกันแม้ว่าฉันจะไม่ใส่เครื่องหมายโพลีฟิลล์สำหรับ IE แต่ก็ยังไม่สามารถทำงานในเบราว์เซอร์ IE ได้ แปลกเกินไป ....
— แอ๊บบี้
ยกเลิกการใส่ข้อคิดเห็นการนำเข้าทั้งหมดที่กล่าวถึงรวมทั้งการนำเข้า NgClass ด้านล่างนั้น สุดท้ายติดตั้ง "npm install --save classlist.js" สิ่งนี้ใช้ได้ผลในกรณีของฉัน
— Vaibhav
2
@dudewad ฉันกำลังทดลองสร้างบันเดิล 2 ชุดแยกกันชุดหนึ่งสำหรับ IE11 อย่างชัดเจนจากนั้นจึงรวมกลุ่มนั้นไว้ในความคิดเห็นที่มีเงื่อนไขของ IE ซึ่งจะหยุดการส่งผ่าน Chrome
— Zze
1
@ Zze ดีที่แน่นอนของคุณ ดีฉันชอบที่
— dudewad
1
ความคิดเห็นแบบมีเงื่อนไข @Zze ถูกลบออกใน IE10 พวกเขารองรับเฉพาะใน IE5-9 ดังนั้นชุด IE ของคุณจะไม่ถูกโหลดสำหรับ IE10 + เว้นแต่คุณจะทำการดมกลิ่นตัวแทนผู้ใช้โดยเฉพาะเพื่อเพิ่มบันเดิลของคุณในเพจขณะรันไทม์
— bmcminn
22

ฉันมีปัญหาเดียวกันและไม่มีวิธีแก้ไขใดที่ใช้ได้ผลกับฉัน แทนที่จะเพิ่มบรรทัดต่อไปนี้ใน (homepage) .html ภายใต้<head>แก้ไขแล้ว

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— อเล็กซ์ดับเบิลยู
แหล่งที่มา
เมื่อพิจารณาข้อมูลจาก SO stackoverflow.com/questions/26346917/…คำแนะนำให้ใช้ X-UA-Compatible ดูเหมือนจะไม่ถูกต้อง
— Lubiluk
19

ฉันพบปัญหานี้ในวันนี้ ฉันพบวิธีแก้ปัญหาใน GitHub ที่ไม่จำเป็นต้องไปที่รุ่นเบต้าในภายหลัง

เพิ่มสคริปต์ต่อไปนี้ใน html ของคุณ:

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

สิ่งนี้ช่วยแก้ปัญหาให้ฉันได้ สำหรับรายละเอียดเพิ่มเติมคุณสามารถติดตามปัญหา github ได้ที่นี่: https://github.com/angular/angular/issues/7144

— Ashley Grenon
แหล่งที่มา
2
วิธีนี้ใช้ไม่ได้สำหรับฉัน :( ... [ในโครงการ VS2015 ที่ทำงานบน IE]
— Ceylan Mumun Kocabaş
12

ณ เดือนกุมภาพันธ์ 2560

เมื่อใช้โปรเจ็กต์ Angular-Cliทุกบรรทัดในpolyfills.tsไฟล์ไม่ได้ใส่คอมเมนต์ไว้แล้วดังนั้นโพลีฟิลล์ทั้งหมดจึงถูกใช้ไปแล้ว

ฉันพบวิธีแก้ปัญหานี้ที่นี่เพื่อแก้ไขปัญหาของฉัน

เพื่อสรุปที่ลิงค์ข้างต้น, IE ไม่สนับสนุนแลมบ์ดาลูกศร / ฟังก์ชั่นลูกศรไขมันซึ่งเป็นคุณลักษณะของES6 ( นี่คือถ้า polyfills.ts ไม่ได้ผลสำหรับคุณ )

วิธีแก้ไข : คุณต้องกำหนดเป้าหมายes5เพื่อให้ทำงานใน IE เวอร์ชันใดก็ได้การสนับสนุนสำหรับสิ่งนี้ได้รับการแนะนำใน Edge Browser ใหม่โดย Microsoft เท่านั้น

สิ่งนี้อยู่ภายใต้src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— MikeDub
แหล่งที่มา
คำตอบนี้พลาดมาก polyfills เป็นสคริปต์ที่ทำให้ IE 9 ขึ้นไปเข้ากันได้กับมาตรฐาน ES6 ดังที่เห็นที่นี่: angular.io/docs/ts/latest/guide/browser-support.htmlดังนั้นจึงไม่สำคัญว่าเบราว์เซอร์จะรองรับฟังก์ชันลูกศรหรือไม่ polyfills ช่วยบรรเทาปัญหานี้ได้ทั้งหมด
— Zze
8
สิ่งที่ฉันประสบในกรณีของฉันเป็นอย่างไร ... ทำให้เข้าใจผิด? โพลีฟิลล์นั้นไม่มีการใส่ความคิดเห็นแล้วและไม่ได้แก้ไขปัญหาที่ฉันพบใน IE11 แทบจะไม่คิดว่าสิ่งนี้ควรค่าแก่การโหวตลด
— MikeDub
หลังจากอ่านสิ่งนี้อีกครั้งฉันเข้าใจสิ่งที่คุณพยายามจะพูด แต่วิธีการใช้คำในปัจจุบันดูเหมือนว่าคุณต้องเปลี่ยน.tsไฟล์ทั้งหมดด้วยตนเองจากการใช้ fat arrow เป็น anon funcs ฉันคิดว่าคุณควรตัดคำพูดออกจากลิงก์นั้นว่าเอาต์พุตของคอมไพเลอร์แตกต่างกันอย่างไรหากคุณเปลี่ยนเป้าหมายสคริปต์ ecma ซึ่งต่อจากนี้ไปจะช่วยบรรเทาปัญหาได้
— Zze
5
นอกจากนี้ฉันกำหนดเป้าหมาย es5 ใน tsconfig อยู่แล้วและยังมีปัญหา
— gh0st
1
@MikeDub ฉันลองใช้โซลูชันของคุณแล้ว แต่ใช้ไม่ได้กับ IE11 คุณช่วยให้แนวทางที่ดีกว่านี้ได้ไหม
— Prasanna Sasne
11

คุณจะต้องปรับไฟล์ 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';
— Jigar Bhatt
แหล่งที่มา
1
นี่มันเยี่ยมมาก ขอบคุณ.
— AtLeastTheresToast
10

สำหรับฉันที่มี iexplorer 11 และ Angular 2 ฉันแก้ไขปัญหาข้างต้นทั้งหมดโดยทำ 2 สิ่ง:

ใน index.html เพิ่ม:

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

ใน src \ polyfills.ts uncomment:

/** 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';
— เบเลนมาร์ติน
แหล่งที่มา
1
ใช่มันใช้งานได้กับ IE11 แต่ไม่ใช่สำหรับ IE10:ERROR Error: Uncaught (in promise): TypeError: Object doesn't support property or method 'setPrototypeOf' at EmptyError (http://localhost:4200/vendor.js:102653:9)
— Junior Mayhé
10
  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 Pacakages สังเกตว่ามีคำสั่งติดตั้ง npm อยู่ในความคิดเห็น หากคุณใช้ Angular CLI เวอร์ชันแรกอาจมีรุ่นที่สามเช่นกัน สำหรับ Angular CLI เวอร์ชัน 7, 6 และ 1.7 คุณต้องเรียกใช้:

ติดตั้ง npm - บันทึก classlist.js

การติดตั้ง npm - บันทึกเว็บแอนิเมชัน -js

ตอนนี้เปิด IE และแสดงแอปพลิเคชันของคุณแล้วตรวจสอบ :)

— อาลี
แหล่งที่มา
8

ณ เดือนกันยายน 2017 (เวอร์ชันโหนด = v6.11.3, เวอร์ชัน npm = 3.10.10) นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน (ขอบคุณ @Zze):

แก้ไขpolyfills.tsและยกเลิกการใส่ข้อคิดเห็นในการนำเข้าที่จำเป็นสำหรับ IE11

แก้ไขได้อย่างแม่นยำมากขึ้นpolyfills.ts(อยู่ในsrcโฟลเดอร์โดยค่าเริ่มต้น) และเพียงแค่ยกเลิกการแสดงความคิดเห็นทุกบรรทัดที่จำเป็นสำหรับ IE11 (ความคิดเห็นภายในไฟล์อธิบายว่าการนำเข้าใดที่จำเป็นในการรันบน IE11)

คำเตือนเล็ก ๆ ให้ความสนใจเมื่อ uncommenting สายสำหรับและclasslist.js web-animations-jsบรรทัดที่แสดงความคิดเห็นเหล่านี้มีความคิดเห็นเฉพาะแต่ละรายการ: คุณต้องรันคำสั่ง npm ที่เกี่ยวข้องก่อนที่จะยกเลิกการแสดงความคิดเห็นมิฉะนั้นการประมวลผล polyfills.ts จะแตก

ตามคำอธิบาย polyfills เป็นส่วนหนึ่งของโค้ดที่ใช้คุณลักษณะบนเว็บเบราว์เซอร์ที่ไม่รองรับ นี่คือสาเหตุที่ในการกำหนดค่าเริ่มต้น polyfills.ts มีเพียงชุดการนำเข้าขั้นต่ำเท่านั้นที่ใช้งานได้ (เนื่องจากมีเป้าหมายที่เรียกว่าเบราว์เซอร์ "เอเวอร์กรีน" ซึ่งเป็นเบราว์เซอร์เวอร์ชันสุดท้ายที่อัปเดตตัวเองโดยอัตโนมัติ )

— Ekeko
แหล่งที่มา
8

แก้ไข 2018/05/15 : นี้สามารถทำได้กับเมตาแท็ก ; โปรดเพิ่มแท็กนั้นใน index.html ของคุณและไม่ต้องสนใจโพสต์นี้

นี่ไม่ใช่คำตอบที่สมบูรณ์สำหรับคำถาม (สำหรับคำตอบทางเทคนิคโปรดดูคำตอบของ @ Zze ด้านบน ) แต่มีขั้นตอนสำคัญที่ต้องเพิ่ม:

โหมดความเข้ากันได้

แม้จะมีการใช้ polyfills ที่เหมาะสม แต่ก็ยังมีปัญหาในการเรียกใช้แอป Angular 2+ โดยใช้ polyfills บน IE11 หากคุณกำลังเรียกใช้ไซต์จากโฮสต์อินทราเน็ต (เช่นหากคุณกำลังทดสอบที่http: // localhostหรือชื่อโดเมนท้องถิ่นที่แมปอื่น) คุณต้องเข้าไปที่การตั้งค่ามุมมองที่เข้ากันได้และยกเลิกการเลือก "แสดงไซต์อินทราเน็ตในมุมมองที่เข้ากันได้" เนื่องจากมุมมองความเข้ากันได้ของ IE11 จะแบ่งข้อตกลงสองสามข้อที่รวมอยู่ในโพลีฟิลล์ ES5 สำหรับ Angular

ใส่คำอธิบายภาพที่นี่

— ปืนลูกซองนินจา
แหล่งที่มา
1
หากคุณทำตามวิธีนี้คุณต้องทำสิ่งนี้กับไคลเอนต์ทั้งหมดที่ใช้แอปพลิเคชันของคุณ การเพิ่มแท็กพิเศษลงในไฟล์ html จะบังคับให้เบราว์เซอร์ทำงานในเวอร์ชันล่าสุดที่มีให้ใช้งานแทนโหมดความเข้ากันได้ อ้างถึงคำตอบต่อไปนี้เพื่อค้นหาแท็กstackoverflow.com/a/47777695/4628364
— โพลี
2
จากประสบการณ์ของฉันหากแอปของคุณให้บริการบนโฮสต์อินทราเน็ตการใช้เมตาแท็กนี้จะไม่แทนที่การตั้งค่าเริ่มต้นของ IE 11 เป็น "แสดงไซต์อินทราเน็ตในมุมมองที่เข้ากันได้" ผู้ใช้แอปอินทราเน็ตจะยังคงต้องเข้าไปและยกเลิกการเลือกตัวเลือกนี้ด้วยตนเองซึ่งน้อยกว่าที่เหมาะสม ขณะนี้ฉันกำลังมองหาวิธีแก้ปัญหา - อาจรวบรวมเป็น ES5 แทนที่จะเป็น ES6
— Kyle Vassella
6

ฉันมีแอปพลิเคชั่น Angular4 แม้ว่าสำหรับฉันแล้วมันก็ไม่ทำงานในเบราว์เซอร์ IE11 ฉันได้ทำการเปลี่ยนแปลงด้านล่างแล้วตอนนี้มันทำงานได้อย่างถูกต้อง เพียงเพิ่มโค้ดด้านล่างในไฟล์index.html

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

เพียงแค่คุณต้องยกเลิกการแสดงความคิดเห็นบรรทัดด้านล่างเหล่านี้จากไฟล์polyfills.ts

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

2 ขั้นตอนข้างต้นนี้จะช่วยแก้ปัญหาของคุณได้โปรดแจ้งให้เราทราบหากมีอะไรเกิดขึ้น ขอบคุณ !!!

— สัญเจย์ทิวารี
แหล่งที่มา
ฉันพูดไปแล้ว 2 ส่วนโดยไม่แสดงความคิดเห็น แต่ยังใช้งานไม่ได้คุณมีวิธีแก้ปัญหาอื่นหรือไม่
— Menna Ramadan
5

หากคุณยังมีปัญหาว่าฟังก์ชัน JavaScript ไม่ทำงานทั้งหมดให้เพิ่มบรรทัดนี้ใน polyfills ของคุณ มันแก้ไขเมธอด 'ค่า' ที่ขาดหายไป:

import 'core-js/es7/object';

และบรรทัดนี้จะแก้ไขเมธอด "include" ที่หายไป:

import 'core-js/es7/array'
— คริสเตียน
แหล่งที่มา
4

ฉันประสบปัญหาเดียวกันหากคุณเปิดใช้งานไซต์อินทราเน็ตที่แสดงในความเข้ากันได้ดู polyfills.ts จะไม่ทำงานคุณยังคงต้องเพิ่มบรรทัดต่อไปนี้ตามที่ได้รับแจ้ง

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— อีวานโลเปซ
แหล่งที่มา
2

สิ่งที่ได้ผลสำหรับฉันคือฉันทำตามขั้นตอนต่อไปนี้เพื่อปรับปรุงประสิทธิภาพแอปพลิเคชันของฉันใน IE 11 1. ) ในไฟล์ Index.html ให้เพิ่ม CDN ต่อไปนี้

<script src="https://npmcdn.com/angular2@2.0.0- 
 beta.17/es6/dev/src/testing/shims_for_IE.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/classlist/1.2.201711092/classList.min.js"></script>

2. ) ในไฟล์ polyfills.ts และเพิ่มการนำเข้าต่อไปนี้:

import 'core-js/client/shim';
— gaurav gupta
แหล่งที่มา
2

ใน polyfills.ts

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/es7/array';

import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/weak-set';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.

/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/**
 * Required to support Web Animations `@angular/animation`.
 * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
 **/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.
— กุลดิปดีคานธี
แหล่งที่มา
2

หากไม่มีวิธีแก้ปัญหาอื่นใดที่เหมาะกับคุณคุณควรตรวจสอบต้นตอของปัญหา อาจเป็นเพราะโมดูล npm แทรกรหัส ES6 โดยตรงซึ่งไม่สามารถถ่ายทอดได้

ในกรณีของฉันฉันมีไฟล์

SCRIPT1002: Syntax error vendor.js (114536,27)ที่บรรทัดต่อไปนี้:

const ucs2encode = array => String.fromCodePoint(...array);

ฉันค้นหาโฟลเดอร์node_modulesและพบว่าไฟล์นั้นมาจากไฟล์ใด ปรากฎว่าผู้กระทำผิดคือpunycode.jsซึ่งในเวอร์ชัน 2.1.0 ใช้ ES6 โดยตรง

หลังจากที่ฉันลดระดับเป็น 1.4.1 ซึ่งใช้ ES5 ปัญหาได้รับการแก้ไข

— typhon04
แหล่งที่มา
1
ขอบคุณมากสำหรับคำตอบของคุณ แม้ว่าจะไม่สามารถแก้ปัญหาได้ แต่ก็ช่วยฉันค้นหาโมดูลตัวสร้างปัญหาและแจ้งให้ผู้เขียนทราบเกี่ยวกับปัญหา
— lucifer63
2

วิธีแก้ไขปัญหานี้ใน Angular8

polyfills.ts uncomment import 'classlist.js'; และimport 'web-animations-js';จากนั้นติดตั้งสองพึ่งพาการใช้และnpm install --save classlist.jsnpm install --save web-animations-js

อัปเดตtsconfig.jsonด้วย"target":"es5",

จากนั้นng serveเรียกใช้แอปพลิเคชันและเปิดใน IE ก็จะใช้งานได้

— Rijo
แหล่งที่มา
1

  1. ส่วน Uncomment IE ใน src / polyfill.js,

    / ** IE10 และ IE11 ต้องการสิ่งต่อไปนี้สำหรับการรองรับ NgClass บนองค์ประกอบ SVG * /

    นำเข้า 'classlist.js';

  2. หากข้อผิดพลาดในการสร้างสำหรับแพ็คเกจที่ขาดหายไป

    npm ติดตั้ง classlist.js - บันทึกแน่นอน

  3. อย่าลืมใส่บรรทัดด้านล่างเพื่อตั้งค่าโหมดเอกสาร IE เริ่มต้น ฉลาดอื่น ๆ จะเปิดในเวอร์ชัน 7

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Sudheer Muhammed
แหล่งที่มา
0

ฉันลองใช้วิธีแก้ปัญหาทุกอย่างในเธรดนี้รวมถึงกลุ่มอื่น ๆ แต่ไม่ประสบความสำเร็จ สิ่งที่แก้ไขได้สำหรับฉันคือการอัปเดตทุกแพ็คเกจในโครงการของฉันรวมถึงการเปลี่ยนแปลงเวอร์ชัน MAJOR ดังนั้น:

  1. รัน npm ล้าสมัย
  2. อัปเดต package.json ด้วยหมายเลขที่แสดงในคอลัมน์ปัจจุบันจากผลลัพธ์ (อาจทำให้โครงการของคุณเสียหายได้โปรดระวัง)
  3. เรียกใช้การติดตั้ง npm
  4. ตรวจสอบให้แน่ใจว่าฉันยังไม่มีการเติมโพลีฟิลล์ตามที่ระบุไว้ในคำตอบอื่น ๆ

แค่นั้นแหละ. ฉันหวังว่าจะสามารถระบุได้ว่าห้องสมุดใดเป็นตัวการ ข้อผิดพลาดจริงที่ฉันได้รับคือ "ข้อผิดพลาดทางไวยากรณ์" ใน vendor.js ใน Angular 6

— จอร์แดน
แหล่งที่มา
0

Angular 9 นอกกรอบควรใช้งานได้ดีใน IE11 ตอนนี้

ฉันลองทำตามคำแนะนำทั้งหมดที่ระบุไว้ที่นี่แล้วและไม่มีข้อใดได้ผล อย่างไรก็ตามฉันจัดการติดตามมันไปยังไลบรารีเฉพาะที่ฉันกำลังนำเข้าapp.module( ZXingScannerModuleเพื่อความแม่นยำ) หากแอปของคุณล้มเหลวใน IE11 ในหน้าแรกให้ลองลบไลบรารีทีละรายการและตรวจสอบใน IE11 ซึ่งพลาดไปโดยสิ้นเชิงในข้อผิดพลาดคำเตือนการสร้างทั้งหมดของฉัน หากคุณพบว่าเป็นกรณีนี้ให้พิจารณาการแบ่งส่วนพื้นที่ของไซต์ของคุณซึ่งใช้ไลบรารีนี้เป็นโมดูลที่โหลดแบบขี้เกียจ

— Andrew Junior Howard
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.