Kątowa 2/4/5 nie działa w IE11

Próbuję dowiedzieć się, dlaczego moja aplikacja kątowa 2 utknęła na wyświetlaniu Ładowanie ... podczas pracy w przeglądarce IE 11.

Idąc za czyjąś sugestią, wypróbowałem ten plunker, opublikowany przez kogoś w przypadku przepełnienia stosu, zarówno na Chrome, jak i IE 11. Działa dobrze na Chrome, ale nie działa na IE 11. Ten sam błąd, utknąłem na komunikacie „Ładowanie ...”

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

Czy ktoś ma pomysł, dlaczego IE 11 nie uruchamia aplikacji angular 2?

Dziękuję Ci!

Najnowsza wersja angular jest domyślnie skonfigurowana tylko dla wiecznie zielonych przeglądarek ...

Obecna konfiguracja dotyczy tak zwanych „wiecznie zielonych” przeglądarek; ostatnie wersje przeglądarek, które aktualizują się automatycznie. Obejmuje to Safari> = 10, Chrome> = 55 (w tym Opera), Edge> = 13 na komputerze oraz iOS 10 i Chrome na urządzeniach mobilnych.
Obejmuje to również firefox, chociaż nie wspomniano.

Więcej informacji na temat obsługi przeglądarek wraz z listą sugerowanych wypełnień dla określonych przeglądarek można znaleźć tutaj. https://angular.io/guide/browser-support#polyfill-libs

Aby to osiągnąć, przejdź do polyfills.ts( srcdomyślnie w folderze) i po prostu odkomentuj następujące 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';

Zwróć uwagę, że komentarz znajduje się dosłownie w pliku, więc łatwo go znaleźć.

Jeśli nadal masz problemy, możesz obniżyć wersję usługi targetdo es5in tsconfig.jsonzgodnie z @MikeDubsugestią. To powoduje zmianę danych wyjściowych kompilacji wszelkich es6definicji na es5definicje. Na przykład grube funkcje strzałkowe ( ()=>{}) zostaną skompilowane do anonimowych funkcji ( function(){}). Listę przeglądarek obsługiwanych przez es6 można znaleźć tutaj .

Uwagi

• W komentarzach @jackOfAllzapytano mnie, czy polifill IE11 są ładowane, nawet jeśli użytkownik jest w wiecznie zielonej przeglądarce, która ich nie potrzebuje. Odpowiedź brzmi: tak! Włączenie IE11 polyfills odbędzie plik PolyFill od ~162KBdo ~258KBdniem 8 sierpnia '17. Zainwestowałem w próbę rozwiązania tego problemu, jednak w tej chwili nie wydaje się to możliwe.

• Jeśli otrzymujesz błędy w IE10 i poniżej, przejdź do ciebie package.jsoni downgrade webpack-dev-serverdo 2.7.1specjalnie. Wyższe wersje nie obsługują już „starszych” wersji IE.

Miałem dokładnie ten sam problem i żadne z rozwiązań nie zadziałało. Zamiast tego dodano następującą linię w (stronie głównej) .html pod <head>poprawioną.

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

Dziś napotkałem ten problem. Znalazłem rozwiązanie na GitHubie, które nie wymaga przechodzenia do późniejszej wersji beta.

Dodaj następujący skrypt do swojego HTML:

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

To rozwiązało problem. Aby uzyskać więcej informacji, możesz śledzić problem z github tutaj: https://github.com/angular/angular/issues/7144

Stan na luty 2017 r

Korzystając z projektu Angular-Cli , wszystkie linie w polyfills.tspliku były już odkomentowane, więc wszystkie wypełnienia były już używane.

Znalazłem to rozwiązanie tutaj, aby naprawić mój problem.

Podsumowując powyższy link, IE nie obsługuje funkcji strzałek lambda / grubych strzałek, które są cechą es6 . ( To jest, jeśli polyfills.ts nie działa dla Ciebie ).

Rozwiązanie : musisz wybrać es5 , aby działał w dowolnej wersji IE, wsparcie dla tego zostało wprowadzone tylko w nowej przeglądarce Edge przez Microsoft.

Znajduje się w src/tsconfig.json:

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

Będziesz musiał dostosować plik polyfills.ts do swoich przeglądarek docelowych, odkomentowując odpowiednie sekcje.

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

Dla mnie z iexplorer 11 i Angular 2 naprawiłem wszystkie powyższe problemy, wykonując 2 rzeczy:

w index.html dodaj:

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

w odkomentowaniu src \ polyfills.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';

1. Usuń komentarz z niektórych importów w pliku 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';

Zainstaluj pakiety npm Zauważ, że w komentarzach znajduje się kilka poleceń instalacji npm. Jeśli używasz wczesnej wersji Angular CLI, może istnieć również trzecia. W przypadku wersji Angular CLI 7, 6 i 1.7 należy uruchomić:

npm install --save classlist.js

npm install --save web-animations-js

teraz otwórz IE, wyrenderuj aplikację i sprawdź :)

Od września 2017 r. (Wersja węzła = v6.11.3, npm wersja = 3.10.10), tak mi się udało (dzięki @Zze):

Edytować polyfills.ts i usuń komentarz z importu, który jest niezbędny dla IE11.

Dokładniej, edytuj polyfills.ts( srcdomyślnie znajduje się w folderze) i po prostu odkomentuj wszystkie wiersze wymagane dla IE11 (komentarze w pliku wyjaśniają dokładnie, jakie importy są niezbędne do uruchomienia w IE11).

Małe ostrzeżenie: zwróć uwagę podczas usuwania komentarzy w wierszach classlist.jsi web-animations-js. Każda z tych skomentowanych linii ma określony komentarz: musisz uruchomić skojarzone z nimi polecenia npm przed ich odkomentowaniem, w przeciwnym razie przetwarzanie polyfills.ts zepsuje się.

Krótko mówiąc, polyfills to fragmenty kodu, które implementują funkcję przeglądarki internetowej, która jej nie obsługuje. Dlatego w domyślnej konfiguracji polyfills.ts aktywny jest tylko minimalny zestaw importów (ponieważ jest przeznaczony dla tak zwanych „wiecznie zielonych” przeglądarek; ostatnie wersje przeglądarek, które aktualizują się automatycznie ).

EDYCJA 2018/05/15 : Można to osiągnąć za pomocą metatagu ; dodaj ten tag do swojego index.html i zignoruj ​​ten post.

To nie jest pełna odpowiedź na pytanie (na odpowiedź technicznego należy zapoznać się @ odpowiedź ZZE za wyżej ), ale jest ważnym krokiem, który potrzebuje do dodania:

TRYB ZGODNOŚCI

Nawet po zastosowaniu odpowiednich wypełniaczy nadal występują problemy z uruchamianiem aplikacji Angular 2+ przy użyciu wypełniaczy w IE11. Jeśli uruchamiasz witrynę poza hostem intranetowym (tj. Jeśli testujesz ją pod adresem http: // localhost lub inna zmapowana nazwa domeny lokalnej), musisz przejść do ustawień widoku zgodności i odznaczyć opcję „Wyświetlaj witryny intranetowe w widoku zgodności”, ponieważ widok zgodności IE11 łamie kilka konwencji zawartych w wypełniaczach ES5 dla Angular.

Mam aplikację Angular4, nawet jak dla mnie też nie działała w przeglądarce IE11, zrobiłem poniższe zmiany, teraz działa poprawnie. Po prostu dodaj poniższy kod w pliku index.html

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

Wystarczy odkomentować poniższe wiersze z pliku 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';

Te 2 powyższe kroki rozwiążą Twój problem, daj mi znać, jeśli coś tam będzie. Dzięki!!!

Jeśli nadal masz problemy, że nie wszystkie funkcje JavaScript działają, dodaj tę linię do swoich polyfillów. Naprawia brakującą metodę „wartości”:

import 'core-js/es7/object';

Ta linia naprawia brakującą metodę „zawiera”:

import 'core-js/es7/array'

Miałem ten sam problem, jeśli włączyłeś Wyświetlanie witryn intranetowych w widoku zgodności, polyfills.ts nie będzie działać, nadal musisz dodać następujący wiersz, jak powiedziano.

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

wymiana pieniędzy tsconfig.json

"target":"es5",

rozwiązał mój problem

Udało mi się wykonać następujące kroki, aby poprawić wydajność mojej aplikacji w IE 11 1.) W pliku Index.html dodaj następujące 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.) W pliku polyfills.ts i dodaj następujący import:

import 'core-js/client/shim';

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

Jeśli żadne inne rozwiązanie nie zadziała, warto zbadać źródło problemu. Może być tak, że moduł npm bezpośrednio wstawia kod ES6, którego nie można przetransponować.

W moim przypadku miałem

SCRIPT1002: błąd składni vendor.js (114536,27) w następującym wierszu:

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

Przeszukałem folder node_modules i znalazłem, z którego pliku pochodzi linia. Okazało się, że winowajcą był punycode.js który w swojej wersji 2.1.0 korzysta bezpośrednio z ES6.

Po zdegradowaniu do wersji 1.4.1, która używa ES5, problem został rozwiązany.

Jak rozwiązać ten problem w Angular8

polyfills.ts odkomentuj, import 'classlist.js'; a import 'web-animations-js';następnie zainstaluj dwie zależności, używając npm install --save classlist.jsi npm install --save web-animations-js.

zaktualizuj za tsconfig.jsonpomocą"target":"es5",

następnie ng serveuruchom aplikację i otwórz w IE, będzie działać

1. Odkomentuj sekcję IE w src / polyfill.js,

   / ** IE10 i IE11 wymagają następujących elementów obsługi NgClass na elementach SVG * /

   import 'classlist.js';

2. Jeśli jakikolwiek błąd kompilacji dla brakującego pakietu,

   npm install classlist.js --save-exact

3. Pamiętaj, aby dołączyć poniższą linię, aby ustawić domyślny tryb dokumentu IE. W przeciwnym razie otworzy się w wersji 7

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

Wypróbowałem każde rozwiązanie w tym wątku, a także kilka innych, bez powodzenia. Ostatecznie naprawiłem to dla mnie, aby zaktualizować każdy pakiet w moim projekcie, w tym DUŻE zmiany wersji. Więc:

1. Uruchom npm nieaktualny
2. Zaktualizuj plik package.json z liczbą wyświetlaną w bieżącej kolumnie z wyników (może to zepsuć projekt, bądź ostrożny)
3. Uruchom instalację npm
4. Upewniłem się, że mam również odkomentowane wypełnienia, jak zauważono w innych odpowiedziach.

Otóż ​​to. Chciałbym móc wskazać, która biblioteka jest winowajcą. Rzeczywisty błąd, który otrzymywałem, to „Błąd składni” w vendor.js w Angular 6.

Angular 9 po wyjęciu z pudełka powinien teraz działać absolutnie dobrze w IE11.

Wypróbowałem wszystkie wymienione tutaj sugestie i żadna z nich nie zadziałała. Jednak udało mi się wyśledzić to do konkretnej biblioteki, w której importowałem app.module( ZXingScannerModulea dokładnie). Jeśli Twoja aplikacja nie działa w IE11 na pierwszej stronie, spróbuj usunąć biblioteki pojedynczo i sprawdź w IE11 - został całkowicie pominięty we wszystkich moich błędach ostrzegawczych kompilacji. Jeśli okaże się, że tak jest, rozważ podzielenie obszaru witryny, który używa tej biblioteki jako leniwego ładowania modułu.