Vyhledávání na webu

typescript - Angular 2/4/5 nefunguje v IE11

Snažím se přijít na to, proč moje aplikace v Angular 2 zůstává u zobrazení 'Načítání...' při spuštění v IE 11.

Podle něčího návrhu jsem vyzkoušel tento plunker, který někdo zveřejnil na Stack Overflow, jak v Chrome, tak v IE 11. V Chrome funguje bez problémů, ale v IE 11 selhává. Stejná chyba, zasekne se na hlášce „Načítání...“

Plunker je: 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>

Má někdo tušení, proč IE 11 nedokáže spustit aplikaci Angular 2?

Děkuji!

Odpověď č. 1

Nejnovější verze angular je ve výchozím nastavení nastavena pouze pro moderní prohlížeče...

Současné nastavení je určeno pro takzvané „evergreen“ prohlížeče; poslední verze prohlížečů, které se automaticky aktualizují. To zahrnuje Safari >= 10, Chrome >= 55 (včetně Opery), Edge >= 13 na desktopu a iOS 10 a Chrome na mobilu.
To také zahrnuje Firefox, i když není zmíněn.

Podívejte se sem pro více informací o podpoře prohlížečů spolu s seznamem doporučených polyfillů pro konkrétní prohlížeče. https://angular.io/guide/browser-support#polyfill-libs

To znamená, že musíte ručně povolit správné polyfily, abyste zajistili fungování Angularu v IE11 a starších verzích.

Chcete-li toho dosáhnout, přejděte do polyfills.ts (ve výchozím nastavení ve složce src) a jednoduše odemkněte následující importy:

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

Všimněte si, že komentář je doslova v souboru, takže je snadné ho najít.

Pokud stále máte problémy, můžete podle návrhu @MikeDub snížit hodnotu vlastnosti target na es5 v souboru tsconfig.json. Tento postup změní výstup kompilace všech definic es6 na definice es5. Například šipkové funkce (()=>{}) budou přeloženy na anonymní funkce (function(){}). Seznam prohlížečů podporujících es6 najdete zde.

Poznámky

• V komentářích se mě @jackOfAll zeptal, zda se polyfily pro IE11 načítají i tehdy, když uživatel používá moderní prohlížeč, který je nepotřebuje. Odpověď zní ano, načítají se! Zařazení polyfilů pro IE11 zvětší váš soubor s polyfily z ~162KB na ~258KB ke dni 8. srpna 2017. Snažil jsem se na tom pracovat, ale zatím se to nezdá být možné.

• Pokud se vám zobrazují chyby v IE10 a nižších verzích, otevřete svůj package.json a konkrétně snižte verzi webpack-dev-server na 2.7.1. Novější verze již nepodporují „starší“ verze IE.

Odpověď č. 2

Měl jsem přesně stejný problém a žádné z řešení pro mě nefungovalo. Místo toho opravu přineslo přidání následujícího řádku do (homepage).html pod <head>.

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

Odpověď č. 3

Dnes jsem narazil na tento problém. Našel jsem řešení na GitHubu, které nevyžaduje přechod na novější verzi beta.

Přidejte následující skript do svého HTML:

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

To mi problém vyřešilo. Pro více informací můžete sledovat problém na GitHubu zde: https://github.com/angular/angular/issues/7144

Odpověď č. 4

Od února 2017

Při používání projektu Angular-Cli byly všechny řádky v souboru polyfills.ts již odkomentovány, takže všechny polyfily byly již využívány.

Našel jsem toto řešení zde, abych vyřešil svůj problém.

Ve shrnutí výše uvedeného odkazu, IE nepodporuje lambda/fat arrow funkce, které jsou funkcí es6. (To platí, pokud pro vás polyfills.ts nefunguje).

Řešení: musíte cílit na es5, aby to fungovalo ve všech verzích IE, podporu pro to zavedl až nový prohlížeč Edge od Microsoftu.

To se nachází pod src/tsconfig.json:

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

Odpověď č. 5

Budete muset upravit soubor polyfills.ts pro vaše cílové prohlížeče tak, že odkomentujete příslušné části.

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

Odpověď č. 6

Pro mě s iexplorer 11 a Angular 2 jsem všechny výše uvedené problémy vyřešil dvěma věcmi:

v index.html přidejte:

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

v souboru src\polyfills.ts odkomentujte:

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

Odpověď č. 7

  1. Odkomentujte některé importy v souboru 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';

Instalace npm balíčků Všimněte si, že v komentářích jsou některé příkazy npm install. Pokud používáte starší verzi Angular CLI, může být také třetí. Pro verze Angular CLI 7, 6 a 1.7 je potřeba spustit:

npm install --save classlist.js

npm install --save web-animations-js

teď otevřete IE a zobrazte vaši aplikaci a zkontrolujte :)

Související články