Góc 2/4/5 không hoạt động trong IE11


124

Tôi đang cố gắng tìm hiểu tại sao ứng dụng 2 góc của tôi bị kẹt khi hiển thị Đang tải ... khi chạy trong IE 11.

Theo đề nghị của ai đó, tôi đã thử trình tải này, được đăng bởi ai đó trên stack stack, trên cả chrome và IE 11. Hoạt động tốt trên Chrome, nhưng không thành công trên IE 11. Lỗi tương tự, bị kẹt khi nói "Đang tải ..."

Plunker là: 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>

Bất cứ ai cũng có ý tưởng về lý do tại sao IE 11 không chạy ứng dụng góc 2?

Cảm ơn bạn!


Trả lời là sử dụng 2.0.0-beta.0 ngay bây giờ.
Máy nghiền xương Pat Laplante

Câu trả lời:


187

Phiên bản mới nhất angular chỉ được thiết lập cho các trình duyệt thường xanh theo mặc định ...

Thiết lập hiện tại dành cho các trình duyệt được gọi là "thường xanh"; các phiên bản cuối cùng của trình duyệt tự động cập nhật. Điều này bao gồm Safari> = 10, Chrome> = 55 (bao gồm Opera), Edge> = 13 trên máy tính để bàn và iOS 10 và Chrome trên thiết bị di động.
Điều này cũng bao gồm firefox, mặc dù không được đề cập.

Xem ở đây để biết thêm thông tin về hỗ trợ trình duyệt cùng với danh sách các polyfill được đề xuất cho các trình duyệt cụ thể. https://angular.io/guide/browser-support#polyfill-libs


Đây có nghĩa là bạn bằng tay phải kích hoạt polyfills đúng để làm việc kiễu góc trong IE11 và dưới đây.


Để đạt được điều này, hãy đi vào polyfills.ts(trong srcthư mục theo mặc định) và chỉ cần bỏ ghi chú nhập sau:

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

Lưu ý rằng bình luận có nghĩa đen trong tệp, vì vậy điều này rất dễ tìm.

Nếu bạn vẫn gặp vấn đề, bạn có thể hạ cấp targettài sản để es5tsconfig.jsonnhư @MikeDubgợi ý. Điều này làm là thay đổi đầu ra biên dịch của bất kỳ es6định nghĩa thành es5định nghĩa. Ví dụ, các hàm mũi tên chất béo ( ()=>{}) sẽ được biên dịch thành các hàm ẩn danh ( function(){}). Bạn có thể tìm thấy một danh sách các trình duyệt được hỗ trợ es6 tại đây .


Ghi chú

• Tôi đã được hỏi trong các nhận xét bởi @jackOfAllliệu các polyfill IE11 có được tải ngay cả khi người dùng đang ở trong trình duyệt thường xanh không cần chúng không. Câu trả lời là, đúng vậy! Việc đưa các IE11 polyfills sẽ mất tập tin của bạn từ polyfill ~162KBđể ~258KBtính đến ngày 08 Tháng 8 '17. Tôi đã đầu tư vào việc cố gắng giải quyết điều này tuy nhiên dường như không thể vào lúc này.

• Nếu bạn đang nhận sai sót trong IE10 và dưới, đi vào bạn package.jsonvà hạ cấp webpack-dev-serverđể 2.7.1cụ thể. Các phiên bản cao hơn phiên bản này không còn hỗ trợ các phiên bản IE "cũ".


3
Dự án angular 5 của tôi cũng có lỗi tương tự ngay cả khi tôi chưa hoàn thành polyfill cho IE, vẫn không thể hoạt động trong trình duyệt IE. Quá lạ ....
Abby

Uncomment tất cả các nhập khẩu được đề cập cũng như nhập khẩu NgClass dưới đó. Cuối cùng cài đặt "npm install --save classlist.js". Điều này làm việc trong trường hợp của tôi.
Vaibhav

2
@dudewad Tôi đã thử nghiệm tạo 2 gói riêng biệt, một gói rõ ràng cho IE11, và sau đó gói gói đó trong một nhận xét có điều kiện IE sẽ dừng nó trong chrome.
Zze

1
@Zze tốt, đó chắc chắn là kỹ lưỡng của bạn. Đẹp, tôi thích điều đó.
dudewad

1
@Zze bình luận có điều kiện đã bị xóa trong IE10, chúng chỉ được hỗ trợ trong IE5-9. Vì vậy, gói IE của bạn sẽ không được tải cho IE10 +, trừ khi bạn đặc biệt làm một số tác nhân người dùng đánh hơi để thêm gói của bạn vào trang khi chạy.
bmcminn

22

Tôi đã có cùng một vấn đề và không có giải pháp nào hiệu quả với tôi. Thay vào đó, thêm dòng sau vào (trang chủ) .html dưới đã <head>sửa nó.

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

Xem xét thông tin từ SO stackoverflow.com/questions/26346917/ cấp này , khuyến nghị sử dụng X-UA-Tương thích dường như không hợp lệ.
Lubiluk

19

Tôi gặp vấn đề này ngày hôm nay. Tôi đã tìm thấy một giải pháp trên GitHub mà không cần phải chuyển sang phiên bản beta mới hơn.

Thêm đoạn mã sau vào html của bạn:

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

Điều này giải quyết vấn đề cho tôi. Để biết thêm chi tiết, bạn có thể theo dõi vấn đề github tại đây: https://github.com/angular/angular/issues/7144


2
giải pháp này không hiệu quả với tôi :( ... [trên dự án VS2015 chạy trên IE]
Ceylan Mumun Kocabaş

12

Tính đến tháng 2 năm 2017

Sử dụng một dự án Angular-Cli , tất cả các dòng trong polyfills.tstệp đã không bị thiếu nên tất cả các polyfill đã được sử dụng.

Tôi tìm thấy giải pháp này ở đây để khắc phục vấn đề của tôi.

Để tóm tắt liên kết trên, IE không hỗ trợ các chức năng mũi tên / mỡ mũi tên lambda là một tính năng của es6 . ( Đây là nếu polyfills.ts không hoạt động cho bạn ).

Giải pháp : bạn cần nhắm mục tiêu es5 để nó chạy trong mọi phiên bản IE, hỗ trợ cho điều này chỉ được Microsoft giới thiệu trong Trình duyệt Edge mới.

Điều này được tìm thấy dưới src/tsconfig.json:

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

Câu trả lời này rất sai. Các polyfill là các tập lệnh làm cho IE 9 trở lên tương thích với các tiêu chuẩn ES6 như được thấy ở đây: angular.io/docs/ts/latest/guide/browser-support.html Vì vậy, trình duyệt không hỗ trợ các chức năng mũi tên, các polyfill giảm thiểu hoàn toàn vấn đề này.
Zze

8
Làm thế nào là những gì tôi trải nghiệm trong trường hợp của tôi ... gây hiểu lầm? Các polyfill đã không bị lỗi và chúng không khắc phục được sự cố mà tôi gặp phải trong IE11. Khó có thể nghĩ rằng điều này là xứng đáng với một downvote.
MikeDub

Sau khi đọc lại, tôi hiểu những gì bạn đang cố gắng nói, nhưng cách mà nó hiện đang được diễn đạt, có vẻ như bạn phải thay đổi thủ công tất cả các .tstệp của mình từ sử dụng mũi tên béo sang anon funcs. Tôi nghĩ rằng bạn nên cắt một trích dẫn ra khỏi liên kết đó về cách đầu ra của trình biên dịch khác nhau nếu bạn thay đổi mục tiêu tập lệnh ecma từ đó giảm thiểu vấn đề.
Zze

5
Hơn nữa, tôi đã nhắm mục tiêu es5 trong tsconfig của tôi và tôi vẫn gặp sự cố.
gh0

1
@MikeDub Tôi đã thử sử dụng giải pháp của bạn nhưng nó không hoạt động cho IE11. Bạn có thể cung cấp cho tôi cách tiếp cận tốt hơn.
Prasanna Sasne

11

Bạn sẽ cần điều chỉnh tệp polyfills.ts cho các trình duyệt mục tiêu của mình bằng cách bỏ qua các phần thích hợp.

/** 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
Điều đó thật tuyệt. Cảm ơn bạn.
AtLeastTheresToast

10

Đối với tôi với iexplorer 11 và Angular 2, tôi đã khắc phục tất cả các vấn đề trên bằng cách thực hiện 2 điều:

trong index.html thêm:

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

trong 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
Có, cái này hoạt động cho IE11 nhưng không phải cho 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. Hủy nhận xét một số nhập khẩu trong tệp 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';

Cài đặt npm Pacakages Lưu ý rằng có một số lệnh cài đặt npm trong các bình luận. Nếu bạn đang sử dụng phiên bản đầu của Angular CLI, thì cũng có thể có phiên bản thứ ba. Đối với Angular CLI phiên bản 7, 6 và 1.7, bạn cần chạy:

cài đặt npm --save classlist.js

cài đặt npm - lưu web-animations-js

Bây giờ hãy mở IE và kết xuất ứng dụng của bạn và kiểm tra :)


8

Kể từ tháng 9 năm 2017 (phiên bản nút = v6.11.3, phiên bản npm = 3.10.10), đây là những gì làm việc cho tôi (cảm ơn @Zze):

Chỉnh sửa polyfills.tsvà bỏ ghi chú nhập khẩu cần thiết cho IE11.

Chính xác hơn, chỉnh sửa polyfills.ts(nằm trong srcthư mục theo mặc định) và chỉ cần bỏ ghi chú tất cả các dòng cần thiết cho IE11 (các bình luận bên trong tệp giải thích chính xác những gì nhập cần thiết để chạy trên IE11).

Một cảnh báo nhỏ: chú ý khi bỏ ghi chú cho classlist.jsweb-animations-js. Mỗi dòng nhận xét này có một nhận xét cụ thể: bạn phải chạy các lệnh npm được liên kết trước khi bỏ ghi chú hoặc xử lý polyfills.ts sẽ bị hỏng.

Như một lời giải thích, các polyfill là những đoạn mã triển khai một tính năng trên trình duyệt web không hỗ trợ nó. Đây là lý do tại sao trong cấu hình polyfills.ts mặc định, chỉ có một bộ nhập tối thiểu được kích hoạt (vì nó nhắm đến các trình duyệt được gọi là "thường xanh"; các phiên bản trình duyệt cuối cùng tự động cập nhật ).


8

EDIT 2018/05/15 : Điều này có thể đạt được với thẻ meta ; vui lòng thêm thẻ đó vào index.html của bạn và bỏ qua bài đăng này.

Đây không phải là câu trả lời hoàn chỉnh cho câu hỏi (đối với câu trả lời kỹ thuật, vui lòng tham khảo câu trả lời của @ Zze ở trên ), nhưng có một bước quan trọng cần được thêm vào:

CHẾ ĐỘ TƯƠNG THÍCH

Ngay cả với các polyfill thích hợp đã có, vẫn có vấn đề với việc chạy các ứng dụng Angular 2+ bằng cách sử dụng các polyfill trên IE11. Nếu bạn đang chạy trang web khỏi máy chủ mạng nội bộ (ví dụ: nếu bạn đang kiểm tra nó tại http: // localhost hoặc tên miền cục bộ được ánh xạ khác), bạn phải vào cài đặt Chế độ xem tương thích và bỏ chọn "Hiển thị trang web mạng nội bộ trong Chế độ xem tương thích", kể từ khi Chế độ xem tương thích của IE11 phá vỡ một số quy ước được bao gồm trong các polyfill ES5 cho Angular.

nhập mô tả hình ảnh ở đây


1
Nếu bạn làm theo giải pháp này, bạn phải làm điều này trên tất cả các máy khách đang chạy ứng dụng của bạn. Thêm một thẻ đặc biệt vào tệp html của bạn buộc trình duyệt chạy trong phiên bản mới nhất có sẵn thay vì chế độ tương thích. Tham khảo câu trả lời sau để tìm thẻ: stackoverflow.com/a/47777695/4628364
Poly

2
Theo kinh nghiệm của tôi, nếu ứng dụng của bạn được phục vụ trên máy chủ mạng nội bộ, việc sử dụng thẻ meta này sẽ không ghi đè cài đặt mặc định của IE 11 thành 'Hiển thị trang web Intranet trong Chế độ xem tương thích`. Người dùng ứng dụng mạng nội bộ sẽ vẫn cần truy cập và bỏ chọn thủ công tùy chọn này ít hơn lý tưởng. Tôi hiện đang tìm kiếm một cách giải quyết - có lẽ là biên dịch sang ES5 chứ không phải ES6.
Kyle Vassella

6

Tôi có một ứng dụng Angular4, ngay cả đối với tôi nó cũng không hoạt động trong trình duyệt IE11, tôi đã thực hiện các thay đổi dưới đây, bây giờ nó hoạt động chính xác. Chỉ cần thêm bên dưới mã trong index.html tập tin

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

Chỉ cần bạn bỏ ghi chú những dòng dưới đây từ tệp 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 bước trên sẽ giải quyết vấn đề của bạn, xin vui lòng cho tôi biết nếu có bất cứ điều gì sẽ ở đó. Cảm ơn!!!


Tôi đã sử dụng 2 phần chưa hoàn thành nhưng nó vẫn không hoạt động, bạn có giải pháp nào khác không
Menna Ramadan

5

Nếu bạn vẫn gặp sự cố mà không phải tất cả các hàm JavaScript đều hoạt động, hãy thêm dòng này vào polyfill của bạn. Nó sửa phương thức 'giá trị' bị thiếu:

import 'core-js/es7/object';

Và dòng này sửa phương thức 'bao gồm' bị thiếu:

import 'core-js/es7/array'

4

Tôi cũng gặp vấn đề tương tự, nếu bạn đã bật Hiển thị trang web mạng nội bộ trong Tương thích Xem polyfills.ts sẽ không hoạt động, bạn vẫn cần thêm dòng sau như đã nói.

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


2

Điều làm việc cho tôi là tôi đã làm theo các bước sau để cải thiện độ hoàn thiện ứng dụng của mình trong IE 11 1.) Trong tệp Index.html, thêm các CDN sau

<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.) Trong tệp polyfills.ts và thêm nhập sau:

import 'core-js/client/shim';

2

Trong 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

Nếu không có giải pháp nào khác phù hợp với bạn, thì đáng để nghiên cứu nguồn gốc của vấn đề. Nó có thể hơn một mô-đun npm chèn trực tiếp mã ES6, không thể dịch mã.

Trong trường hợp của tôi, tôi đã có

SCRIPT1002: Cú pháp lỗi nhà cung cấp.js (114536,27) ở dòng sau:

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

Tôi đã tìm kiếm thư mục node_modules và tìm thấy từ đó dòng đến. Hóa ra thủ phạm là Punycode.js , trong phiên bản 2.1.0 sử dụng ES6 trực tiếp.

Sau khi tôi hạ cấp xuống 1.4.1, sử dụng ES5, vấn đề đã được giải quyết.


1
Rất cám ơn phản hồi của bạn. Mặc dù nó không giải quyết được vấn đề, nhưng nó đã giúp tôi tìm ra mô-đun gây rối và thông báo cho tác giả về rắc rối.
lucifer63

2

Cách giải quyết vấn đề này trong Angular8

polyfills.ts uncomment import 'classlist.js';import 'web-animations-js';sau đó cài đặt hai phụ thuộc bằng npm install --save classlist.jsnpm install --save web-animations-js.

cập nhật tsconfig.jsonvới"target":"es5",

sau đó ng servechạy ứng dụng và mở trong IE, nó sẽ hoạt động


1
  1. Phần IE không ghi chú trong src / polyfill.js,

    / ** IE10 và IE11 yêu cầu những điều sau đây để hỗ trợ NgClass về các yếu tố SVG * /

    nhập 'classlist.js';

  2. Nếu có lỗi xây dựng cho gói bị thiếu thì,

    npm cài đặt classlist.js - chính xác

  3. Đảm bảo bao gồm dòng bên dưới để đặt chế độ tài liệu IE mặc định. Thông thái khác, nó sẽ mở trong phiên bản 7

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

0

Tôi đã thử mọi giải pháp trong chủ đề này cũng như bó từ những người khác, nhưng không thành công. Điều cuối cùng đã khắc phục điều này đối với tôi là cập nhật mọi gói trong dự án của tôi, bao gồm các thay đổi phiên bản MAJOR. Vì thế:

  1. Chạy npm lỗi thời
  2. Cập nhật gói.json với số được hiển thị trong cột hiện tại từ kết quả (điều này có thể phá vỡ dự án của bạn, hãy cẩn thận)
  3. Chạy cài đặt npm
  4. Hãy chắc chắn rằng tôi cũng có các polyfill không bị thiếu như đã lưu ý trong các câu trả lời khác.

Đó là nó. Tôi ước tôi có thể xác định chính xác thư viện nào là thủ phạm. Lỗi thực tế tôi gặp phải là "Lỗi cú pháp" trong Vendor.js trong Angular 6.


0

Angular 9 ra khỏi hộp nên hoạt động hoàn toàn tốt trong IE11.

Tôi đã thử tất cả các đề xuất được liệt kê ở đây và không ai trong số họ làm việc. Tuy nhiên tôi đã quản lý để theo dõi nó đến một thư viện cụ thể mà tôi đang nhập vào app.module( ZXingScannerModulechính xác). Nếu ứng dụng của bạn bị lỗi trong IE11 trên trang đầu tiên, hãy thử xóa từng thư viện một lần và kiểm tra IE11 - nó hoàn toàn bị bỏ sót trong tất cả các lỗi cảnh báo xây dựng của tôi. Nếu bạn thấy đây là trường hợp, thì hãy xem xét ngăn chặn khu vực trang web của bạn sử dụng thư viện này như một mô-đun tải lười biếng.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.