Angolare 2/4/5 non funzionante in IE11

Sto cercando di capire perché la mia app angular 2 è bloccata nel mostrare Caricamento in corso in IE 11.

Seguendo il suggerimento di qualcuno, ho provato questo plunker, pubblicato da qualcuno nello stack overflow, sia su Chrome che su IE 11. Funziona bene su Chrome, ma fallisce su IE 11. Stesso errore, bloccato nel dire “Caricamento in corso …”

Il plunker è: https://plnkr.co/edit/6zVFbrH5yohwc714gBbk?p=preview

   document.write(''); Router Sample          System.config({ transpiler: 'typescript', typescriptOptions: { emitDecoratorMetadata: true }, packages: {'src': {defaultExtension: 'ts'}} }); System.import('src/boot') .then(null, console.error.bind(console));    loading...   

Qualcuno ha qualche idea sul motivo per cui IE 11 non riesce a eseguire l’app angular 2?

Grazie!

L’ultima versione di angular è impostata solo per i browser evergreen per impostazione predefinita …

L’attuale configurazione è per i cosiddetti browser “sempreverdi”; le ultime versioni di browser che si aggiornano automaticamente. Ciò include Safari> = 10, Chrome> = 55 (incluso Opera), Edge> = 13 sul desktop e iOS 10 e Chrome su dispositivo mobile.
Questo include anche Firefox, anche se non menzionato.

Vedi qui per maggiori 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 cartella src per impostazione predefinita) e annulla semplicemente le 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 si es5 ancora problemi, è ansible effettuare il downgrade della proprietà target su es5 in tsconfig.json come suggerito da @MikeDub . Ciò che fa è cambiare l’output di compilazione di qualsiasi definizione es5 definizioni es5 . Ad esempio, fat arrow functions ( ()=>{} ) verrà compilato in funzioni anonime ( function(){} ). Qui puoi trovare un elenco di browser supportati da es6.


Gli appunti

• Mi è stato chiesto nei commenti da @jackOfAll se i polyfill di IE11 sono caricati anche se l’utente si trova in un browser sempreverde che non ne ha bisogno. La risposta è, sì, lo sono! L’inclusione dei polyfill IE11 porterà il file polyfill da ~162KB a ~258KB partire dall’8 agosto ’17. Ho investito nel tentativo di risolvere questo problema, ma non sembra ansible in questo momento.

• Se si riscontrano errori in IE10 e versioni successive, accedere in modo specifico a package.json e downgrade webpack-dev-server alla 2.7.1 . Versioni superiori a questo non supportano più versioni “più vecchie” di IE.

Mi sono imbattuto in questo problema oggi. Ho trovato una soluzione su GitHub che non richiede l’accesso a una versione successiva della versione beta.

Aggiungi il seguente script al tuo html:

  

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

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

  

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

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

Modifica polyfills.ts e decommenta le importazioni necessarie per IE11.

Più precisamente, modifica polyfills.ts (che si trova nella cartella src per impostazione predefinita) e annulla semplicemente tutte le righe richieste per IE11 (i commenti all’interno del file spiegano esattamente quali importazioni sono necessarie per l’esecuzione su IE11).

Un piccolo avvertimento: prestare attenzione quando si decommentano le righe per classlist.js e web-animations-js . Queste righe commentate hanno ciascuno un commento specifico: è necessario eseguire i comandi npm associati prima di decommentarli o l’elaborazione di polyfills.ts si interromperà.

Come spiegazione, i polyfill sono pezzi di codice che implementano una funzione su un browser web che non la supporta. Questo è il motivo per cui nella configurazione di default polyfills.ts è triggers solo una serie minima di importazioni (perché mira ai cosiddetti browser “sempreverdi”, le ultime versioni di browser che si aggiornano automaticamente ).

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 fai riferimento alla risposta di @ Zze sopra ), ma c’è un passaggio importante che deve essere aggiunto:

MODALITÀ DI COMPATIBILITÀ

Anche con gli appositi polyfill in atto, ci sono ancora problemi con l’esecuzione delle app Angular 2+ usando i polyfill su IE11. Se si sta eseguendo il sito da un host Intranet (ad esempio, se si esegue il test su http: // localhost o un altro nome di dominio locale mappato), è necessario accedere alle impostazioni di Visualizzazione Compatibilità e deselezionare “Visualizza siti Intranet in Visualizzazione Compatibilità”, dal momento che Compatibility View di IE11 rompe un paio delle convenzioni incluse nei polyfill ES5 per Angular.

inserisci la descrizione dell'immagine qui

Per me con iexplorer 11 e Angular 2 ho risolto tutti questi problemi facendo 2 cose:

in index.html aggiungi:

  

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

A partire da febbraio 2017

Usando un progetto Angular-Cli , tutte le linee nel file polyfills.ts erano già state decommentate in modo tale che tutti i polyfill fossero già stati utilizzati.

Ho trovato questa soluzione qui per risolvere il mio problema.

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

Soluzione : è necessario scegliere come target es5 per l’esecuzione in qualsiasi versione di IE, il supporto per questo è stato introdotto solo nel nuovo Edge Browser di Microsoft.

Questo si trova sotto src/tsconfig.json :

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

Stavo avendo lo stesso problema, se hai abilitato la visualizzazione dei siti della intranet in Visualizzazione Compatibilità polyfills.ts non funzionerà, devi comunque aggiungere la seguente riga come è stato detto.

  

Ciò che ha funzionato per me è che ho seguito i seguenti passaggi per migliorare la mia perfomance applicativa in IE 11 1.) Nel file Index.html, aggiungi i seguenti CDN

   

2.) Nel file polyfills.ts e aggiungi la seguente importazione:

 import 'core-js/client/shim'; 

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`. 

La risposta è usare 2.0.0-beta.0 per ora.