Açısal 2/4/5 IE11'de çalışmıyor

124

Açısal 2 uygulamamın IE 11'de çalışırken Yükleniyor ... göstermeye neden takıldığını anlamaya çalışıyorum.

Birinin önerisine uyarak, hem Chrome hem de IE 11'de yığın taşması hakkında biri tarafından yayınlanan bu tıkayıcıyı denedim. Chrome'da iyi çalışıyor, ancak IE 11'de başarısız oluyor. Aynı hata, "Yükleniyor ..." derken takıldı.

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'in neden açısal 2 uygulamasını çalıştıramadığına dair bir fikri olan var mı?

Teşekkür ederim!

angular  typescript  internet-explorer 
— Pat Kemik Kırıcı Laplante
kaynak
Cevap şimdilik 2.0.0-beta.0 kullanmaktır.
— Pat Bone Crusher Laplante

Yanıtlar:

187

Uygulamasının en son sürümü, angular varsayılan olarak yalnızca eskimeyen tarayıcılar için kuruludur ...

Mevcut kurulum sözde "her zaman yeşil" tarayıcılar içindir; tarayıcıların kendilerini otomatik olarak güncelleyen son sürümleri. Buna Safari> = 10, Chrome> = 55 (Opera dahil), masaüstünde Edge> = 13 ve mobil cihazda iOS 10 ve Chrome dahildir.
Bu, belirtilmemiş olmasına rağmen firefox'u da içerir.

Belirli tarayıcılar için önerilen çoklu dolgular listesinin yanı sıra tarayıcı desteği hakkında daha fazla bilgi için buraya bakın. https://angular.io/guide/browser-support#polyfill-libs

Bu , IE11 ve altında Açısal çalışmayı elde etmek için doğru çoklu dolguları manuel olarak etkinleştirmeniz gerektiği anlamına gelir .

Bunu başarmak için polyfills.ts( srcvarsayılan olarak klasörde) bölümüne gidin ve aşağıdaki içe aktarımları kaldırın :

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

Yorumun kelimenin tam anlamıyla dosyada olduğunu ve bu nedenle bulmanın kolay olduğunu unutmayın.

Hâlâ sorun yaşıyorsanız, eski sürüme geçebilmek targetiçin mülk es5içinde tsconfig.jsonolarak @MikeDubönerdi. Bunun yaptığı şey, herhangi bir es6tanımın derleme çıktısını es5tanımlara dönüştürmektir. Örneğin, şişman ok işlevleri ( ()=>{}) anonim işlevlere ( function(){}) derlenecektir . Burada es6 destekli tarayıcıların bir listesini bulabilirsiniz .

notlar

• Yorumlarda @jackOfAll, kullanıcı ihtiyaç duymayan her zaman yeşil bir tarayıcıda olsa bile IE11 polyfill'lerin yüklenip yüklenmediği soruldu. Cevap, evet onlar! IE11 polyfill'lerin dahil edilmesi, polyfill dosyanızı 8 Ağustos 2017 tarihinden itibaren ~162KBteslim alacaktır ~258KB. Bunu çözmeye çalışmak için yatırım yaptım ancak şu anda bu mümkün görünmüyor.

Eğer IE10 ve aşağıda hataları alıyorsanız • Size gitmek package.jsonve downgrade webpack-dev-serveriçin 2.7.1özel olarak. Bundan daha yüksek sürümler artık "eski" IE sürümlerini desteklememektedir.

— Zze
kaynak
3
Açısal 5 projem de IE için polyfill'i yorumlamamama rağmen aynı hatayı veriyor, hala IE tarayıcısında çalışamıyor. Çok garip ....
— Abby
Belirtilen tüm ithalatı kaldırın ve bunun altındaki NgClass'ı içe aktarın. Son olarak "npm install --save classlist.js" yükleyin. Bu benim durumumda çalıştı.
— Vaibhav
2
@dudewad Biri açık bir şekilde IE11 için olmak üzere 2 ayrı paket oluşturmayı deniyordum ve ardından bu paketi bir IE koşullu yorumuyla sarmalıyordum, bu da onun kromda gelmesini engelliyordu.
— Zze
1
@Zze iyi, bu kesinlikle çok iyi. Güzel bunu sevdim.
— dudewad
1
@Zze koşullu yorumları IE10'da kaldırıldı, yalnızca IE5-9'da destekleniyor. Bu nedenle, paketinizi çalışma zamanında sayfaya eklemek için özellikle bazı kullanıcı aracısı koklama yapmadıysanız, IE paketiniz IE10 + için yüklenmez.
— bmcminn
22

Aynı sorunu yaşadım ve çözümlerin hiçbiri benim için işe yaramadı. Bunun yerine aşağıdaki satırı (ana sayfa) .html altına eklemek <head>düzeltildi.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Alex W.
kaynak
Bu SO stackoverflow.com/questions/26346917/… 'deki bilgiler dikkate alındığında , X-UA-Compatible kullanma önerisi geçersiz görünüyor.
— Lubiluk
19

Bugün bu sorunla karşılaştım. GitHub'da betanın sonraki bir sürümüne gitmeyi gerektirmeyen bir çözüm buldum.

Aşağıdaki komut dosyasını html'nize ekleyin:

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

Bu benim için sorunu çözdü. Daha fazla ayrıntı için github sorununu buradan takip edebilirsiniz: https://github.com/angular/angular/issues/7144

— Ashley Grenon
kaynak
2
bu çözüm benim için işe yaramadı :( ... [IE'de çalışan VS2015 projesinde]
— Ceylan Mumun Kocabaş
12

Şubat 2017 itibarıyla

Bir Angular-Cli projesi kullanarak , polyfills.tsdosyadaki tüm satırlar zaten yorumlanmamıştı, bu nedenle tüm çoklu dolgular zaten kullanılıyordu.

Sorunumu çözmek için bu çözümü burada buldum .

Yukarıdaki bağlantıyı özetlemek gerekirse, IE, es6'nın bir özelliği olan lambda arrow / fat arrow işlevlerini desteklemez . ( Bu, polyfills.ts sizin için çalışmıyorsa gerçekleşir ).

Çözüm : Herhangi bir IE sürümünde çalışması için es5'i hedeflemeniz gerekir , bunun için destek yalnızca Microsoft tarafından yeni Edge Browser'da sunulmuştur.

Bu, altında bulunur src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— MikeDub
kaynak
Bu cevap çok yanlış. Çoklu dolgular, burada görüldüğü gibi IE 9 ve üstünü ES6 standartlarıyla uyumlu kılan betiklerdir: angular.io/docs/ts/latest/guide/browser-support.html Bu nedenle tarayıcının ok işlevlerini yerel olarak destekleyip desteklemediği önemli değildir. çoklu dolgular bu sorunu tamamen hafifletir.
— Zze
8
Benim durumumda yaşadıklarım nasıl ... yanıltıcı? Çoklu dolgular zaten yorumlanmamıştı ve IE11'de yaşadığım sorunu çözmediler. Bunun olumsuz oylamaya değeceğini düşünmek zor.
— MikeDub
Bunu tekrar okuduktan sonra, ne söylemeye çalıştığınızı anlıyorum, ancak şu anda ifade edildiği şekilde, tüm .tsdosyalarınızı şişman ok kullanmaktan anon işlevlerine kadar manuel olarak değiştirmeniz gerekiyor gibi görünüyor. Bence ecma komut dosyası hedefini değiştirirseniz, derleyici çıktısının nasıl farklı olduğuna dair bu bağlantıdan bir alıntı yapmalısınız, bu da bundan sonra sorunu hafifletir.
— Zze
5
Ayrıca, tsconfig'imde zaten es5'i hedefliyorum ve hala sorunlarım var.
— gh0st
1
@MikeDub Sizin çözümünüzü kullanmayı denedim ama IE11 için çalışmıyor. Bana daha iyi bir yaklaşım sağlayabilir misin?
— Prasanna Sasne
11

Uygun bölümlerin açıklamalarını kaldırarak polyfills.ts dosyasını hedef tarayıcılarınız için ayarlamanız gerekir.

/** 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
kaynak
1
Bu harika. Teşekkür ederim.
— AtLeastTheresToast
10

İexplorer 11 ve Angular 2 ile benim için yukarıdaki tüm sorunları 2 şey yaparak düzelttim:

index.html'de şunu ekleyin:

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

src \ polyfills.ts içinde 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';
— Belen Martin
kaynak
1
Evet, bu IE11 için çalışıyor ancak IE10 için geçerli değil: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 dosyasındaki bazı içe aktarmaların açıklamasını kaldırın.

/** 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';
Snippet'i genişlet

Npm Paketlerini Kurun Notlarda bazı npm yükleme komutları olduğuna dikkat edin. Angular CLI'nin eski bir sürümünü kullanıyorsanız, üçüncü bir sürüm de olabilir. Angular CLI 7, 6 ve 1.7 sürümleri için şunları çalıştırmanız gerekir:

npm install --save classlist.js

npm install - web-animations-js'yi kaydedin

şimdi IE'yi açın ve uygulamanızı işleyin ve kontrol edin :)

— Ali
kaynak
8

Eylül 2017 itibarıyla (düğüm sürümü = v6.11.3, npm sürümü = 3.10.10), benim için işe yarayan şey buydu (teşekkürler @Zze):

Düzenle polyfills.ts ve yorumsuz IE11 için gerekli olan ithalat.

Daha kesin bir şekilde, düzenleyin polyfills.ts( srcvarsayılan olarak klasörde bulunur ) ve IE11 için gereken tüm satırların açıklamasını kaldırın (dosyanın içindeki yorumlar, IE11'de çalıştırmak için hangi içe aktarmaların gerekli olduğunu tam olarak açıklar).

Küçük bir uyarı: classlist.jsve için satırları açıklarken dikkatli olun web-animations-js. Yorumlu bu satırların her birinin belirli bir yorumu vardır: yorumlamadan önce ilişkili npm komutlarını çalıştırmanız gerekir, aksi takdirde polyfills.ts işlenemez.

Bir açıklama olarak, çoklu dolgular, bir web tarayıcısında onu desteklemeyen bir özelliği uygulayan kod parçalarıdır. Bu nedenle, varsayılan polyfills.ts yapılandırmasında yalnızca minimum sayıda içe aktarım etkindir (çünkü "her zaman yeşil" tarayıcıları hedeflemektedir ; tarayıcıların kendilerini otomatik olarak güncelleyen son sürümleri ).

— Ekeko
kaynak
8

DÜZENLEME 2018/05/15 : Bu, bir meta etiketle elde edilebilir ; lütfen bu etiketi index.html dosyanıza ekleyin ve bu gönderiyi dikkate almayın.

Bu, sorunun tam bir cevabı değildir (teknik cevap için lütfen yukarıdaki @ Zze'nin cevabına bakınız ), ancak eklenmesi gereken önemli bir adım var :

UYUMLULUK MODU

Uygun polyfiller yerinde olsa bile, IE11'de polyfill'leri kullanarak Angular 2+ uygulamalarını çalıştırmada hala sorunlar var. Siteyi bir intranet ana bilgisayarının dışında çalıştırıyorsanız (yani, siteyi http: // localhost veya başka bir eşlenmiş yerel etki alanı adında test ediyorsanız ), Uyumluluk Görünümü ayarlarına gitmeli ve "Intranet sitelerini Uyumluluk Görünümünde göster" seçeneğinin işaretini kaldırmalısınız, IE11'in Uyumluluk Görünümü, Angular için ES5 çoklu dolgusunda bulunan birkaç kuralı ihlal ettiğinden.

görüntü açıklamasını buraya girin

— Av Tüfeği Ninja
kaynak
1
Bu çözümü izlerseniz, uygulamanızı çalıştıran tüm istemcide bunu yapmanız gerekir. Html dosyanıza özel bir etiket eklemek, tarayıcıyı uyumluluk modu yerine mevcut en son sürümde çalışmaya zorlar. Etiketi bulmak için aşağıdaki yanıta bakın: stackoverflow.com/a/47777695/4628364
— Poly
2
Tecrübelerime göre, uygulamanız bir intranet ana bilgisayarında sunuluyorsa, bu meta etiketin kullanımı IE 11'in 'Uyumluluk Görünümünde İntranet sitelerini görüntüle' varsayılan ayarını geçersiz kılmaz. İntranet uygulamasının kullanıcılarının yine de içeri girmesi ve idealden daha az olan bu seçeneğin işaretini manuel olarak kaldırması gerekecektir. Şu anda bir geçici çözüm arıyorum - belki ES6 yerine ES5'e derleniyor.
— Kyle Vassella
6

Bir Angular4 uygulamam var, benim için bile IE11 tarayıcısında çalışmıyordu, aşağıdaki değişiklikleri yaptım, şimdi düzgün çalışıyor. Sadece index.html dosyasına aşağıdaki kodu ekleyin

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

Aşağıdaki satırları polyfills.ts dosyasından kaldırmanız yeterlidir.

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

Yukarıdaki 2 adım sorununuzu çözecektir, orada bir şey olacaksa lütfen bize bildirin. Teşekkürler!!!

— Sanjay Tiwari
kaynak
Zaten bu 2 parçayı yorumlamadım ama hala çalışmıyor, başka bir çözümünüz var mı
— Menna Ramazan
5

Hala tüm JavaScript işlevlerinin çalışmadığına dair sorunlar yaşıyorsanız, bu satırı çoklu dolgulara ekleyin. Eksik 'değerler' yöntemini düzeltir:

import 'core-js/es7/object';

Ve bu satır, eksik 'içerir' yöntemini düzeltir:

import 'core-js/es7/array'
— Hristiyan
kaynak
4

Aynı sorunu yaşıyordum, Uyumlulukta intranet sitelerini göster'i etkinleştirdiyseniz polyfills.ts işlevini görmüyorsanız, yine de söylendiği gibi aşağıdaki satırı eklemeniz gerekir.

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

Benim için işe yarayan şey, IE 11'deki uygulama performansımı iyileştirmek için aşağıdaki adımları izlemem oldu 1.) Index.html dosyasına aşağıdaki CDN'leri ekleyin

<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 dosyasına aşağıdaki içe aktarmayı ekleyin:

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

Polyfills.ts içinde

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
kaynak
2

Diğer çözümlerden hiçbiri sizin için işe yaramazsa, sorunun kaynağını araştırmaya değer. Bir npm modülünün doğrudan aktarılamayan ES6 kodunu eklemesi olabilir.

Benim durumumda

SCRIPT1002: Aşağıdaki satırda vendor.js (114536,27) sözdizimi hatası :

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

Node_modules klasörünü aradım ve satırın hangi dosyadan geldiğini buldum. Suçlunun punycode.js olduğu ortaya çıktı 's 2.1.0 sürümünde doğrudan ES6 kullanır.

ES5 kullanan 1.4.1'e düşürdükten sonra sorun çözüldü.

— typhon04
kaynak
1
Cevabınız için çok teşekkürler. Sorunu çözmese de sorun çıkaran modülü bulmama ve yazarı sorun hakkında bilgilendirmeme yardımcı oldu.
— lucifer63
2

Angular8'de bu problem nasıl çözülür?

polyfills.ts uncomment import 'classlist.js'; ve import 'web-animations-js';ardından npm install --save classlist.jsve kullanarak iki bağımlılık yükleyinnpm install --save web-animations-js .

güncelleme tsconfig.jsonile"target":"es5",

sonra ng serveuygulamayı çalıştırın ve IE'de açın, çalışacaktır

— Rijo
kaynak
1

  1. Src / polyfill.js içindeki IE bölümünün açıklamasını kaldırın,

    / ** IE10 ve IE11, SVG öğelerinde NgClass desteği için aşağıdakileri gerektirir * /

    'classlist.js'yi içe aktarın;

  2. Eksik paket için herhangi bir yapı hatası varsa,

    npm install classlist.js --save-exact

  3. Varsayılan IE belge modunu ayarlamak için aşağıdaki satırı eklediğinizden emin olun. Aksi takdirde, sürüm 7'de açılacak

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

Bu konudaki her çözümü ve diğerlerinden gruplarını başarılı bir şekilde denedim. Bunu benim için düzelten şey, MAJOR sürüm değişiklikleri de dahil olmak üzere projemdeki her paketi güncellemekti. Yani:

  1. Güncel olmayan npm çalıştır
  2. Package.json dosyasını sonuçlardan geçerli sütunda gösterilen numara ile güncelleyin (bu, projenizi bozabilir, dikkatli olun)
  3. Npm yüklemesini çalıştır
  4. Diğer cevaplarda belirtildiği gibi çoklu dolgulara da yorum yapılmamasını sağladım.

Bu kadar. Keşke hangi kütüphanenin suçlu olduğunu saptayabilseydim. Aldığım asıl hata, Angular 6'daki vendor.js'de "Sözdizimi Hatası" idi.

— Ürdün
kaynak
0

Kutudan çıkan Angular 9 artık IE11'de kesinlikle iyi çalışmalıdır.

Burada listelenen tüm önerileri denedim ve hiçbiri işe yaramadı. Ancak, içeri aktardığım belirli bir kitaplığa kadar izini sürmeyi başardım app.module( ZXingScannerModulekesin olmak gerekirse). Uygulamanız ilk sayfada IE11'de başarısız oluyorsa, kitaplıkları teker teker kaldırmayı deneyin ve IE11'i kontrol edin - tüm yapı uyarı hatalarımda tamamen gözden kaçmıştı. Durumun böyle olduğunu fark ederseniz, sitenizin bu kitaplığı tembel yüklü bir modül olarak kullanan alanını bölümlere ayırmayı düşünün.

— Andrew Junior Howard
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.