Angular 2/4/5 non funziona in IE11

124

Sto cercando di capire perché la mia app angular 2 è bloccata sulla visualizzazione del caricamento ... durante l'esecuzione in IE 11.

Seguendo il suggerimento di qualcuno, ho provato questo plunker, pubblicato da qualcuno su stack overflow, sia su Chrome che su IE 11. Funziona bene su Chrome, ma fallisce su IE 11. Stesso errore, bloccato a dire "Caricamento ..."

Il 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>

Qualcuno ha idea del motivo per cui IE 11 non riesce a eseguire l'app angular 2?

Grazie!

angular  typescript  internet-explorer 
— Pat Bone Crusher Laplante
fonte
La risposta è usare 2.0.0-beta.0 per ora.
— Pat Bone Crusher Laplante

Risposte:

187

L'ultima versione di angular è configurata solo per i browser evergreen per impostazione predefinita ...

La configurazione attuale è per i cosiddetti browser "evergreen"; le ultime versioni dei browser che si aggiornano automaticamente. Ciò include Safari> = 10, Chrome> = 55 (incluso Opera), Edge> = 13 sul desktop e iOS 10 e Chrome sui dispositivi mobili.
Questo include anche Firefox, sebbene non menzionato.

Vedere qui per ulteriori informazioni sul supporto del browser insieme a un elenco di polyfill suggeriti per browser specifici. https://angular.io/guide/browser-support#polyfill-libs

Ciò significa che devi abilitare manualmente i polyfill corretti per far funzionare Angular in IE11 e sotto.

Per ottenere ciò, vai in polyfills.ts(nella srccartella per impostazione predefinita) e rimuovi il commento dalle seguenti importazioni:

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

Nota che il commento è letteralmente nel file, quindi è facile da trovare.

Se i problemi persistono, puoi eseguire il downgrade della targetproprietà a es5in tsconfig.jsoncome @MikeDubsuggerito. Ciò che fa è cambiare l'output di compilazione di qualsiasi es6definizione in es5definizioni. Ad esempio, le funzioni freccia grassa ( ()=>{}) verranno compilate in funzioni anonime ( function(){}). Puoi trovare un elenco dei browser supportati da es6 qui .

Appunti

• Mi è stato chiesto nei commenti @jackOfAllse i polyfill di IE11 vengono caricati anche se l'utente si trova in un browser evergreen che non ne ha bisogno. La risposta è, sì, lo sono! L'inclusione dei IE11 polyfills prenderà il file polyfill da ~162KBa ~258KBpartire dal 8 agosto '17. Ho investito nel tentativo di risolvere questo problema, ma al momento non sembra possibile.

• Se ricevi errori in IE10 e versioni precedenti, accedi a te package.jsone esegui il downgrade webpack-dev-servera 2.7.1. Le versioni superiori a questa non supportano più le versioni "precedenti" di IE.

— zze
fonte
3
Anche il mio progetto angular 5 ha lo stesso errore anche se ho decommentato il polyfill per IE, ma non posso ancora funzionare nel browser IE. Troppo strano ...
— Abby
Rimuovi il commento da tutte le importazioni menzionate e importa NgClass sotto. Infine installa "npm install --save classlist.js". Questo ha funzionato nel mio caso.
— Vaibhav
2
@dudewad stavo sperimentando la creazione di 2 bundle separati, uno esplicitamente per IE11, e poi avvolgendo quel bundle in un commento condizionale di IE che avrebbe impedito che arrivasse in chrome.
— Zze
1
@Zze beh, questo è sicuramente completo da parte tua. Bello, mi piace.
— dudewad
1
I commenti condizionali @Zze sono stati rimossi in IE10, sono supportati solo in IE5-9. Quindi il tuo bundle IE non verrebbe caricato per IE10 +, a meno che tu non abbia fatto specificamente uno sniffing di un agente utente per aggiungere il tuo bundle alla pagina in fase di runtime.
— bmcminn
22

Ho avuto lo stesso identico problema e nessuna delle soluzioni ha funzionato per me. Aggiungendo invece la seguente riga in (homepage) .html sotto <head>risolto.

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
— Alex W.
fonte
Considerando le informazioni da questo SO stackoverflow.com/questions/26346917/… , la raccomandazione di utilizzare X-UA-Compatible sembra non essere valida.
— Lubiluk
19

Oggi mi sono imbattuto in questo problema. Ho trovato una soluzione su GitHub che non richiede di passare a una versione successiva della beta.

Aggiungi il seguente script al tuo html:

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

Questo ha risolto il problema per me. Per maggiori dettagli, puoi seguire il problema di github qui: https://github.com/angular/angular/issues/7144

— Ashley Grenon
fonte
2
questa soluzione non ha funzionato per me :( ... [sul progetto VS2015 in esecuzione su IE]
— Ceylan Mumun Kocabaş
12

A partire da febbraio 2017

Utilizzando un progetto Angular-Cli , tutte le righe nel polyfills.tsfile erano già decommentate, quindi tutti i polyfill erano già stati utilizzati.

Ho trovato questa soluzione qui per risolvere il mio problema.

Per riassumere il collegamento sopra, IE non supporta le funzioni lambda arrow / fat arrow che sono una caratteristica di es6 . ( Questo è se polyfills.ts non funziona per te ).

Soluzione : è necessario scegliere come target es5 affinché funzioni in qualsiasi versione di IE, il supporto per questo è stato introdotto solo nel nuovo Edge Browser da Microsoft.

Questo si trova sotto src/tsconfig.json:

"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
— MikeDub
fonte
Questa risposta è molto fuorviante. I polyfill sono gli script che rendono IE 9 e versioni successive compatibili con gli standard ES6 come si vede qui: angular.io/docs/ts/latest/guide/browser-support.html Quindi non importa se il browser supporta nativamente le funzioni freccia, i polyfill attenuano completamente questo problema.
— Zze
8
In che modo ciò che ho vissuto nel mio caso è ... fuorviante? I polyfill erano già decommentati e non hanno risolto il problema che stavo riscontrando in IE11. Difficilmente penso che questo sia degno di un voto negativo.
— MikeDub
Dopo aver riletto questo, capisco cosa stai cercando di dire, ma il modo in cui è attualmente formulato, sembra che tu debba cambiare manualmente tutti i tuoi .tsfile dall'uso della freccia grassa a anon funcs. Penso che dovresti ritagliare una citazione da quel link su come l'output del compilatore è diverso se cambi l'obiettivo dello script ecma che d'ora in poi mitiga il problema.
— Zze
5
Inoltre, sto già prendendo di mira es5 nel mio tsconfig e ho ancora problemi.
— mercoledì
1
@ MikeDub ho provato a utilizzare la tua soluzione ma non funziona per IE11. Puoi fornirmi un approccio migliore.
— Prasanna Sasne
11

Dovrai modificare il file polyfills.ts per i browser di destinazione rimuovendo il commento dalle sezioni appropriate.

/** 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
fonte
1
Questo è fantastico. Grazie.
— AtLeastTheresToast
10

Per me con iexplorer 11 e Angular 2 ho risolto tutti i problemi di cui sopra facendo 2 cose:

in index.html aggiungi:

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

in src \ polyfills.ts rimuovere il commento:

/** 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
fonte
1
Sì, funziona per IE11 ma non per 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. Annulla il commento di alcune importazioni nel 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';
Espandi lo snippet

Installa npm Pacakages Notare che ci sono alcuni comandi di installazione di npm nei commenti. Se stai utilizzando una prima versione di Angular CLI, potrebbe essercene anche una terza. Per le versioni 7, 6 e 1.7 della CLI di Angular è necessario eseguire:

npm install --save classlist.js

npm install --save web-animations-js

ora apri IE e visualizza la tua applicazione e controlla :)

— Ali
fonte
8

A partire da settembre 2017 (versione nodo = v6.11.3, versione npm = 3.10.10), questo è ciò che ha funzionato per me (grazie @Zze):

modificare polyfills.ts e rimuovere il commento dalle importazioni necessarie per IE11.

Più precisamente, modifica polyfills.ts(che si trova nella srccartella per impostazione predefinita) e decommenta tutte le righe richieste per IE11 (i commenti all'interno del file spiegano esattamente quali importazioni sono necessarie per eseguire su IE11).

Un piccolo avvertimento: prestare attenzione quando si rimuovono i commenti dalle righe per classlist.jse web-animations-js. Queste righe commentate hanno ciascuna un commento specifico: è necessario eseguire i comandi npm associati prima di rimuoverle o l'elaborazione di polyfills.ts si interromperà.

Come parola di spiegazione, i polyfill sono pezzi di codice che implementano una funzionalità su un browser web che non la supporta. Questo è il motivo per cui nella configurazione predefinita polyfills.ts è attivo solo un insieme minimo di importazioni (perché punta ai cosiddetti browser "evergreen"; le ultime versioni di browser che si aggiornano automaticamente ).

— Ekeko
fonte
8

EDIT 2018/05/15 : questo può essere ottenuto con un meta tag ; per favore aggiungi quel tag al tuo index.html e ignora questo post.

Questa non è una risposta completa alla domanda (per la risposta tecnica, fare riferimento alla risposta di @ Zze sopra ), ma c'è un passaggio importante che deve essere aggiunto:

MODALITÀ DI COMPATIBILITÀ

Anche con i polyfill appropriati in atto, ci sono ancora problemi con l'esecuzione di app Angular 2+ utilizzando i polyfill su IE11. Se stai eseguendo il sito da un host intranet (ad esempio se lo stai testando su http: // localhost o un altro nome di dominio locale mappato), devi accedere alle impostazioni di Visualizzazione Compatibilità e deselezionare "Visualizza siti intranet in Visualizzazione Compatibilità", poiché la Vista Compatibilità di IE11 infrange un paio delle convenzioni incluse nei polyfill ES5 per Angular.

inserisci qui la descrizione dell'immagine

— Fucile a pompa Ninja
fonte
1
Se segui questa soluzione devi farlo su tutti i client che eseguono la tua applicazione. L'aggiunta di un tag speciale al file html forza l'esecuzione del browser nell'ultima versione disponibile invece della modalità di compatibilità. Fare riferimento alla seguente risposta per trovare il tag: stackoverflow.com/a/47777695/4628364
— Poly
2
Nella mia esperienza, se la tua app viene pubblicata su un host Intranet, l'uso di questo meta tag non sovrascrive l'impostazione predefinita di IE 11 su "Visualizza siti Intranet in Visualizzazione Compatibilità". Gli utenti dell'app intranet dovranno comunque accedere e deselezionare manualmente questa opzione che è tutt'altro che ideale. Attualmente sto cercando una soluzione alternativa, forse compilando su ES5 anziché su ES6.
— Kyle Vassella
6

Ho un'applicazione Angular4, anche per me non funzionava nel browser IE11, ho fatto le modifiche di seguito, ora funziona correttamente. Basta aggiungere sotto il codice nel file file index.html

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

Devi solo rimuovere il commento da queste righe sottostanti 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';

Questi 2 passaggi sopra risolveranno il tuo problema, per favore fammi sapere se c'è qualcosa. Grazie!!!

— Sanjay Tiwari
fonte
Ho già queste 2 parti non commentate ma non funziona ancora, hai un'altra soluzione
— Menna Ramadan,
5

Se hai ancora problemi che non tutte le funzioni JavaScript stanno funzionando aggiungi questa riga nei tuoi polyfill. Corregge il metodo dei "valori" mancanti:

import 'core-js/es7/object';

E questa riga corregge il metodo "include" mancante:

import 'core-js/es7/array'
— cristiano
fonte
4

Ho riscontrato lo stesso problema, se hai abilitato Visualizza siti intranet in Visualizzazione compatibilità, polyfills.ts non funzionerà, devi comunque aggiungere la seguente riga come è stato detto.

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

mutevole tsconfig.json 

"target":"es5",

ha risolto il mio problema

— user3050538
fonte
2

Quello che ha funzionato per me è che ho seguito i seguenti passaggi per migliorare le prestazioni della mia applicazione in IE 11 1.) Nel file Index.html, aggiungi i seguenti 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.) Nel file polyfills.ts e aggiungi la seguente importazione:

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

In 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
fonte
2

Se nessuna delle altre soluzioni funziona per te, vale la pena indagare sull'origine del problema. Può essere che un modulo npm inserisca direttamente il codice ES6, che non può essere trasferito.

Nel mio caso ho avuto il file

SCRIPT1002: errore di sintassi vendor.js (114536,27) alla riga seguente:

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

Ho cercato nella cartella node_modules e ho trovato da quale file proveniva la riga. Si è scoperto che il colpevole era punycode.js che nella sua versione 2.1.0 utilizza direttamente ES6.

Dopo averlo declassato a 1.4.1, che utilizza ES5, il problema è stato risolto.

— typhon04
fonte
1
Molte grazie per la tua risposta. Sebbene non abbia risolto il problema, mi ha aiutato a trovare il modulo piantagrane e ad informare l'autore del problema.
— lucifer63
2

Come risolvere questo problema in Angular8

polyfills.ts rimuovere il commento import 'classlist.js'; e import 'web-animations-js';quindi installare due dipendenze utilizzando npm install --save classlist.jse npm install --save web-animations-js.

aggiornare tsconfig.jsoncon"target":"es5",

quindi ng serveesegui l'applicazione e aprila in IE, funzionerà

— Rijo
fonte
1

  1. Rimuovere il commento dalla sezione IE in src / polyfill.js,

    / ** IE10 e IE11 richiedono quanto segue per il supporto NgClass sugli elementi SVG * /

    import 'classlist.js';

  2. In caso di errore di compilazione per il pacchetto mancante,

    npm installa classlist.js --save-exact

  3. Assicurati di includere la riga sottostante per impostare la modalità documento IE predefinita. Altrimenti si aprirà nella versione 7

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

Ho provato ogni soluzione in questo thread così come un gruppo di altri, senza successo. Quello che ha finito per risolvere questo problema per me è stato aggiornare ogni pacchetto nel mio progetto, comprese le modifiche alla versione PRINCIPALI. Così:

  1. Esegui npm obsoleto
  2. Aggiorna package.json con il numero mostrato nella colonna corrente dai risultati (questo può interrompere il tuo progetto, fai attenzione)
  3. Esegui npm install
  4. Mi sono assicurato di avere anche i polyfill non commentati come indicato nelle altre risposte.

Questo è tutto. Vorrei poter individuare quale biblioteca è stata colpevole. L'errore effettivo che stavo ottenendo era "Errore di sintassi" in vendor.js in Angular 6.

— Giordania
fonte
0

Angular 9 out of the box dovrebbe funzionare perfettamente in IE11 ora.

Ho provato tutti i suggerimenti elencati qui e nessuno di loro ha funzionato. Tuttavia sono riuscito a rintracciarlo in una libreria specifica in cui stavo importando app.module( ZXingScannerModuleper essere precisi). Se la tua app non funziona in IE11 nella prima pagina, prova a rimuovere le librerie una alla volta e controlla in IE11: è stata completamente persa in tutti i miei errori di avviso di build. Se trovi che questo è il caso, allora considera la suddivisione in compartimenti dell'area del tuo sito che utilizza questa libreria come un modulo caricato pigro.

— Andrew Junior Howard
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.