Angular 2/4/5 tidak berfungsi di IE11

124

Saya mencoba mencari tahu mengapa aplikasi sudut 2 saya macet saat menampilkan Memuat ... saat berjalan di IE 11.

Mengikuti saran seseorang, saya telah mencoba plunker ini, yang diposting oleh seseorang di stack overflow, di chrome dan IE 11. Berfungsi dengan baik di Chrome, tetapi gagal di IE 11. Kesalahan yang sama, berhenti saat mengatakan "Memuat ..."

Plunkernya adalah: 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>

Ada yang tahu mengapa IE 11 gagal menjalankan aplikasi sudut 2?

Terima kasih!

angular  typescript  internet-explorer 
— Pat Bone Crusher Laplante
sumber
Jawabannya adalah menggunakan 2.0.0-beta.0 untuk saat ini.
— Pat Bone Crusher Laplante

Jawaban:

187

Versi terbaru angular hanya diatur untuk browser evergreen secara default ...

Setup saat ini adalah untuk apa yang disebut browser "evergreen"; versi terakhir peramban yang secara otomatis memperbarui dirinya sendiri. Ini termasuk Safari> = 10, Chrome> = 55 (termasuk Opera), Edge> = 13 di desktop, dan iOS 10 dan Chrome di seluler.
Ini juga termasuk firefox, meski tidak disebutkan.

Lihat di sini untuk informasi lebih lanjut tentang dukungan browser bersama dengan daftar polyfill yang disarankan untuk browser tertentu. https://angular.io/guide/browser-support#polyfill-libs

Ini berarti Anda secara manual harus mengaktifkan polyfill yang benar agar Angular berfungsi di IE11 dan di bawahnya.

Untuk mencapai ini, masuk ke polyfills.ts(dalam srcfolder secara default) dan hapus komentar impor berikut ini:

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

Perhatikan bahwa komentar tersebut benar-benar ada di dalam file, jadi ini mudah ditemukan.

Jika Anda masih mengalami masalah, Anda dapat downgrade targetproperti untuk es5di tsconfig.jsonsebagai @MikeDubdisarankan. Apa yang dilakukannya adalah mengubah keluaran kompilasi dari es6definisi apa pun menjadi es5definisi. Misalnya, fungsi panah lemak ( ()=>{}) akan dikompilasi menjadi fungsi anonim ( function(){}). Anda dapat menemukan daftar browser yang didukung es6 di sini .

Catatan

• Saya ditanya di kolom komentar @jackOfAllapakah IE11 polyfill dimuat bahkan jika pengguna menggunakan browser evergreen yang tidak membutuhkannya. Jawabannya adalah, ya! Dimasukkannya polyfill IE11 akan mengubah file polyfill Anda dari ~162KBhingga ~258KB8 Agustus '17. Saya telah berinvestasi untuk mencoba memecahkan masalah ini, tetapi tampaknya tidak mungkin untuk saat ini.

• Jika Anda mendapatkan kesalahan di IE10 dan yang lebih lama, buka Anda package.jsondan turunkan versi webpack-dev-serverke 2.7.1secara khusus. Versi yang lebih tinggi dari ini tidak lagi mendukung versi IE "lama".

— Zze
sumber
3
Proyek angular 5 saya juga memiliki kesalahan yang sama meskipun saya telah menghapus komentar polyfill untuk IE, masih tidak dapat berfungsi di browser IE. Terlalu aneh ....
— Abby
Hapus komentar semua impor yang disebutkan serta impor NgClass di bawahnya. Terakhir instal "npm install --save classlist.js". Ini berhasil dalam kasus saya.
— Vaibhav
2
@dudewad Saya sedang bereksperimen dengan membuat 2 bundel terpisah, satu secara eksplisit untuk IE11, dan kemudian membungkus bundel itu dalam komentar bersyarat IE yang akan menghentikannya masuk di chrome.
— Zze
1
@Zze baik, itu pasti menyeluruh dari Anda. Bagus, saya suka itu.
— dudewad
1
@Zze komentar bersyarat dihapus di IE10, mereka hanya didukung di IE5-9. Jadi bundel IE Anda tidak akan dimuat untuk IE10 +, kecuali Anda secara khusus melakukan beberapa agen pengguna mengendus untuk menambahkan bundel Anda ke halaman saat runtime.
— bmcminn
22

Saya memiliki masalah yang sama persis dan tidak ada solusi yang berhasil untuk saya. Alih-alih menambahkan baris berikut di (beranda) .html di bawah <head>memperbaikinya.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Alex W.
sumber
Mempertimbangkan informasi dari SO stackoverflow.com/questions/26346917/… , rekomendasi untuk menggunakan X-UA-Compatible tampaknya tidak valid.
— Lubiluk
19

Saya mengalami masalah ini hari ini. Saya menemukan solusi di GitHub yang tidak memerlukan versi beta yang lebih baru.

Tambahkan skrip berikut ke html Anda:

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

Ini menyelesaikan masalah saya. Untuk lebih jelasnya, Anda dapat mengikuti masalah github di sini: https://github.com/angular/angular/issues/7144

— Ashley Grenon
sumber
2
solusi ini tidak berhasil untuk saya :( ... [pada proyek VS2015 yang berjalan di IE]
— Ceylan Mumun Kocabaş
12

Mulai Feb 2017

Menggunakan proyek Angular-Cli , semua baris dalam polyfills.tsfile sudah tidak diberi komentar sehingga semua polyfill sudah digunakan.

Saya menemukan solusi ini di sini untuk memperbaiki masalah saya.

Untuk meringkas link di atas, IE tidak mendukung fungsi lambda arrow / fat arrow yang merupakan fitur es6 . ( Ini jika polyfills.ts tidak bekerja untuk Anda ).

Solusi : Anda perlu menargetkan es5 agar dapat berjalan di versi IE apa pun, dukungan untuk ini hanya diperkenalkan di Edge Browser baru oleh Microsoft.

Ini ditemukan di bawah src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— MikeDub
sumber
Jawaban ini sangat menyesatkan. Polyfill adalah skrip yang membuat IE 9 dan di atasnya kompatibel dengan standar ES6 seperti yang terlihat di sini: angular.io/docs/ts/latest/guide/browser-support.html Jadi tidak masalah jika browser secara native mendukung fungsi panah, polyfill mengurangi masalah ini sepenuhnya.
— Zze
8
Bagaimana apa yang saya alami dalam kasus saya ... menyesatkan? Polyfill sudah tidak diberi komentar dan tidak memperbaiki masalah yang saya alami di IE11. Hampir tidak berpikir ini layak untuk mendapatkan suara negatif.
— MikeDub
Setelah membaca ulang ini, saya mengerti apa yang Anda coba katakan, tetapi cara yang saat ini menggunakan kata-kata, sepertinya Anda harus secara manual mengubah semua .tsfile Anda dari menggunakan panah gemuk ke fungsi anon. Saya pikir Anda harus memotong kutipan dari tautan itu tentang bagaimana keluaran kompiler berbeda jika Anda mengubah target skrip ecma yang selanjutnya mengurangi masalah.
— Zze
5
Selain itu, saya sudah menargetkan es5 di tsconfig saya dan saya masih mengalami masalah.
— gh0st
1
@MikeDub Saya mencoba menggunakan solusi Anda tetapi tidak berhasil untuk IE11. Bisakah Anda memberi saya pendekatan yang lebih baik.
— Prasanna Sasne
11

Anda harus menyesuaikan file polyfills.ts untuk browser target Anda dengan menghapus komentar di bagian yang sesuai.

/** 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
sumber
1
Ini bagus. Terima kasih.
— AtLeastTheresToast
10

Bagi saya dengan iexplorer 11 dan Angular 2, saya memperbaiki semua masalah di atas dengan melakukan 2 hal:

di index.html tambahkan:

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

di src \ polyfills.ts hapus komentar:

/** 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';
— Belen Martin
sumber
1
Ya, ini berfungsi untuk IE11 tetapi tidak untuk 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. Hapus komentar beberapa impor dalam file 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';
Luaskan cuplikan

Instal npm Pacakages Perhatikan ada beberapa perintah npm install di komentar. Jika Anda menggunakan Angular CLI versi awal, mungkin juga ada versi ketiga. Untuk Angular CLI versi 7, 6, dan 1.7 Anda perlu menjalankan:

npm install --simpan classlist.js

npm install --save web-animations-js

sekarang buka IE dan render aplikasi Anda dan periksa :)

— Ali
sumber
8

Pada September 2017 (versi node = v6.11.3, versi npm = 3.10.10), inilah yang berhasil untuk saya (terima kasih @Zze):

Edit polyfills.tsdan hapus komentar impor yang diperlukan untuk IE11.

Lebih tepatnya, edit polyfills.ts(terletak di srcfolder secara default) dan hapus komentar semua baris yang diperlukan untuk IE11 (komentar di dalam file menjelaskan dengan tepat impor apa yang diperlukan untuk dijalankan di IE11).

Peringatan kecil: perhatikan saat menghapus komentar pada baris untuk classlist.jsdan web-animations-js. Baris komentar ini memiliki komentar khusus masing-masing: Anda harus menjalankan perintah npm terkait sebelum menghapus komentarnya atau pemrosesan polyfills.ts akan rusak.

Sebagai penjelasan, polyfills adalah potongan kode yang mengimplementasikan fitur pada web browser yang tidak mendukungnya. Inilah sebabnya mengapa dalam konfigurasi polyfills.ts default hanya sekumpulan impor minimal yang aktif (karena ini ditujukan pada apa yang disebut browser "evergreen"; versi terakhir dari browser yang secara otomatis memperbarui dirinya sendiri ).

— Ekeko
sumber
8

EDIT 2018/05/15 : Ini dapat dicapai dengan tag meta ; harap tambahkan tag itu ke index.html Anda dan abaikan kiriman ini.

Ini bukan jawaban lengkap untuk pertanyaan (untuk jawaban teknis silakan merujuk ke jawaban @ Zze di atas ), tetapi ada langkah penting yang perlu ditambahkan:

MODE KOMPATIBILITAS

Bahkan dengan polyfill yang sesuai, masih ada masalah dengan menjalankan aplikasi Angular 2+ menggunakan polyfill di IE11. Jika Anda menjalankan situs dari inang intranet (mis. Jika Anda mengujinya di http: // localhost atau nama domain lokal lain yang dipetakan), Anda harus masuk ke pengaturan Tampilan Kompatibilitas dan menghapus centang "Tampilkan situs intranet dalam Tampilan Kompatibilitas", karena Tampilan Kompatibilitas IE11 melanggar beberapa konvensi yang disertakan dalam polyfill ES5 untuk Angular.

masukkan deskripsi gambar di sini

— Ninja Shotgun
sumber
1
Jika Anda mengikuti solusi ini, Anda harus melakukan ini pada semua klien yang menjalankan aplikasi Anda. Menambahkan tag khusus ke file html Anda memaksa browser untuk berjalan dalam versi terbaru yang tersedia, bukan mode kompatibilitas. Lihat jawaban berikut untuk menemukan tag: stackoverflow.com/a/47777695/4628364
— Poly
2
Menurut pengalaman saya, jika aplikasi Anda disajikan pada inang intranet, penggunaan tag meta ini tidak menggantikan pengaturan default IE 11 menjadi 'Tampilkan situs Intranet dalam Tampilan Kompatibilitas`. Pengguna aplikasi intranet masih perlu masuk dan secara manual menghapus centang opsi ini yang kurang dari ideal. Saat ini saya sedang mencari solusi - mungkin mengkompilasi ke ES5 daripada ES6.
— Kyle Vassella
6

Saya memiliki aplikasi Angular4, bahkan untuk saya juga tidak berfungsi di browser IE11, saya telah melakukan perubahan di bawah ini, sekarang berfungsi dengan benar. Cukup tambahkan kode di bawah ini di file index.html

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

Hanya Anda perlu menghapus komentar baris di bawah ini dari file 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 langkah di atas ini akan menyelesaikan masalah Anda, beri tahu saya jika ada masalah. Terima kasih!!!

— Sanjay Tiwari
sumber
Saya sudah 2 bagian ini tanpa komentar tetapi masih tidak berfungsi, apakah Anda punya solusi lain
— Menna Ramadhan
5

Jika Anda masih memiliki masalah yang tidak semua fungsi JavaScript berfungsi, tambahkan baris ini di polyfill Anda. Ini memperbaiki metode 'nilai' yang hilang:

import 'core-js/es7/object';

Dan baris ini memperbaiki metode 'include' yang hilang:

import 'core-js/es7/array'
— Kristen
sumber
4

Saya mengalami masalah yang sama, jika Anda telah mengaktifkan Tampilkan situs intranet dalam Tampilan Kompatibilitas, polyfills.ts tidak akan berfungsi, Anda masih perlu menambahkan baris berikut seperti yang telah diberitahukan.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Ivan Lopez
sumber
2

Apa yang berhasil bagi saya adalah saya mengikuti langkah-langkah berikut untuk meningkatkan kinerja aplikasi saya di IE 11 1.) Di file Index.html, tambahkan CDN berikut

<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.) Dalam file polyfills.ts dan tambahkan impor berikut:

import 'core-js/client/shim';
— gaurav gupta
sumber
2

Di 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`.
— Kuldip D Gandhi
sumber
2

Jika tidak ada solusi lain yang berhasil untuk Anda, ada baiknya menyelidiki sumber masalahnya. Mungkin lebih dari modul npm yang langsung memasukkan kode ES6, yang tidak dapat ditranspilasi.

Dalam kasus saya, saya memiliki file

SCRIPT1002: Kesalahan sintaks vendor.js (114536,27) di baris berikut ini:

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

Saya mencari folder node_modules dan menemukan dari file mana baris itu berasal. Ternyata pelakunya punycode.js yang di versi 2.1.0-nya langsung menggunakan ES6.

Setelah saya menurunkannya menjadi 1.4.1, yang menggunakan ES5, masalah terselesaikan.

— typhon04
sumber
1
Terimakasih banyak untuk respon Anda. Meskipun tidak menyelesaikan masalah, itu membantu saya menemukan modul pembuat masalah dan memberi tahu penulisnya tentang masalah tersebut.
— lucifer63
2

Cara mengatasi masalah ini di Angular8

polyfills.ts hapus komentar import 'classlist.js'; dan import 'web-animations-js';kemudian instal dua ketergantungan menggunakan npm install --save classlist.jsdan npm install --save web-animations-js.

memperbarui tsconfig.json dengan"target":"es5",

kemudian ng servejalankan aplikasi dan buka di IE, itu akan berfungsi

— Rijo
sumber
1

  1. Hapus komentar pada bagian IE di src / polyfill.js,

    / ** IE10 dan IE11 membutuhkan yang berikut ini untuk dukungan NgClass pada elemen SVG * /

    import 'classlist.js';

  2. Jika ada kesalahan versi untuk paket yang hilang,

    npm install classlist.js --save-exact

  3. Pastikan untuk menyertakan baris di bawah ini untuk mengatur mode dokumen IE default. Jika tidak, itu akan terbuka di versi 7

 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Sudheer Muhammad
sumber
0

Saya mencoba setiap solusi di utas ini serta banyak dari yang lain, tetapi tidak berhasil. Apa yang akhirnya memperbaiki ini untuk saya adalah memperbarui setiap paket dalam proyek saya, termasuk perubahan versi MAYOR. Begitu:

  1. Jalankan npm usang
  2. Perbarui package.json dengan nomor yang ditampilkan di kolom saat ini dari hasil (ini dapat merusak proyek Anda, hati-hati)
  3. Jalankan npm install
  4. Pastikan saya juga memiliki polyfill yang tidak diberi komentar seperti yang disebutkan di jawaban lain.

Itu dia. Saya berharap saya bisa menunjukkan perpustakaan mana yang menjadi pelakunya. Kesalahan sebenarnya yang saya dapatkan adalah "Kesalahan Sintaks" di vendor.js di Angular 6.

— Yordania
sumber
0

Angular 9 di luar kotak seharusnya berfungsi dengan baik di IE11 sekarang.

Saya mencoba semua saran yang tercantum di sini dan tidak ada yang berhasil. Namun saya berhasil melacaknya ke perpustakaan tertentu yang saya impor app.module( ZXingScannerModuletepatnya). Jika aplikasi Anda gagal di IE11 pada halaman pertama, coba hapus perpustakaan satu per satu dan periksa di IE11 - itu benar-benar tidak terjawab di semua kesalahan peringatan build saya. Jika Anda menemukan ini masalahnya, pertimbangkan untuk memisahkan area situs Anda yang menggunakan pustaka ini sebagai modul yang dimuat lambat.

— Andrew Junior Howard
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.