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

124

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!

angular typescript internet-explorer Pat Bone Crusher Laplante
źródło

Odpowiedź brzmi: na razie użyj wersji 2.0.0-beta.0.

Pat Bone Crusher Laplante

187

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

Oznacza to, że musisz ręcznie włączyć prawidłowe wypełnienia, aby Angular działał w IE11 i poniżej.

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.

Zze
źródło

3

Mój projekt Angular 5 również ma ten sam błąd, nawet jeśli odkomentowałem polyfill dla IE, nadal nie mogę działać w przeglądarce IE. Zbyt dziwne ...

Abby

Odkomentuj wszystkie wspomniane importy, a także importuj NgClass poniżej. Na koniec zainstaluj "npm install --save classlist.js". To zadziałało w moim przypadku.

Vaibhav

2

@dudewad Eksperymentowałem z utworzeniem 2 oddzielnych pakietów, jednego wyraźnie dla IE11, a następnie opakowaniem tego pakietu w komentarz warunkowy IE, który powstrzymałby go przed przejściem w Chrome.

Zze,

1

@Zze cóż, to z pewnością o tobie dokładny. Fajnie, podoba mi się to.

dudewad

1

Komentarze warunkowe @Zze zostały usunięte w IE10, są obsługiwane tylko w IE5-9. Więc twój pakiet IE nie zostanie załadowany dla IE10 +, chyba że specjalnie podsłuchujesz klienta użytkownika, aby dodać swój pakiet do strony w czasie wykonywania.

bmcminn

22

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" />

Alex W.
źródło

Biorąc pod uwagę informacje z tego SO stackoverflow.com/questions/26346917/… , zalecenie użycia kompatybilnego z X-UA wydaje się być nieprawidłowe.

Lubiluk

19

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

Ashley Grenon
źródło

2

to rozwiązanie nie zadziałało dla mnie :( ... [w projekcie VS2015 działającym w IE]

Ceylan Mumun Kocabaş

12

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",

MikeDub
źródło

Ta odpowiedź jest bardzo myląca. Wypełnienia to skrypty, które sprawiają, że IE 9 i nowsze są zgodne ze standardami ES6, jak widać tutaj: angular.io/docs/ts/latest/guide/browser-support.html Nie ma więc znaczenia, czy przeglądarka natywnie obsługuje funkcje strzałek, wypełniacze całkowicie łagodzą ten problem.

Zze

8

W jaki sposób to, czego doświadczyłem w moim przypadku ... wprowadza w błąd? Wypełnienia były już odkomentowane i nie rozwiązały problemu, który występował w IE11. Nie sądzę, żeby to zasługiwało na głosy przeciw.

MikeDub

Po ponownym przeczytaniu tego, rozumiem, co próbujesz powiedzieć, ale sposób, w jaki jest to obecnie sformułowane, wygląda na to, że musisz ręcznie zmienić wszystkie swoje .tspliki z używania grubej strzałki na anon funcs. Myślę, że powinieneś wyciąć cytat z tego linku na temat tego, jak różnią się dane wyjściowe kompilatora, jeśli zmienisz cel skryptu ecma, który odtąd łagodzi problem.

Zze

5

Co więcej, już celuję w es5 w moim tsconfig i nadal mam problemy.

gh0st

1

@MikeDub Próbowałem użyć twojego rozwiązania, ale nie działa dla IE11. Czy możesz zapewnić mi lepsze podejście.

Prasanna Sasne

11

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

Jigar Bhatt
źródło

1

To jest świetne. Dziękuję Ci.

AtLeastTheresToast

10

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

Belen Martin
źródło

1

Tak, to działa dla IE11, ale nie dla 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

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

Rozwiń fragment

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ź :)

Ali
źródło

8

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

Ekeko
źródło

8

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.

Shotgun Ninja
źródło

1

Jeśli zastosujesz się do tego rozwiązania, musisz to zrobić na wszystkich klientach, na których działa Twoja aplikacja. Dodanie specjalnego tagu do pliku html wymusza działanie przeglądarki w najnowszej dostępnej wersji zamiast w trybie zgodności. Zapoznaj się z następującą odpowiedzią, aby znaleźć tag: stackoverflow.com/a/47777695/4628364

Poly,

2

Z mojego doświadczenia wynika, że jeśli Twoja aplikacja jest udostępniana na hoście intranetowym, użycie tego metatagu nie zastępuje domyślnego ustawienia przeglądarki IE 11 na „Wyświetlaj witryny intranetowe w widoku zgodności”. Użytkownicy aplikacji intranetowej nadal będą musieli wejść i ręcznie odznaczyć tę opcję, która nie jest idealna. Obecnie szukam obejścia - być może kompiluję do ES5 zamiast ES6.

Kyle Vassella

6

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

Sanjay Tiwari
źródło

Mam już te 2 części odkomentowane, ale nadal nie działa, czy masz inne rozwiązanie

Menna Ramadan

5

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'

chrześcijanin
źródło

4

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" />

Ivan Lopez
źródło

3

wymiana pieniędzy tsconfig.json

"target":"es5",

rozwiązał mój problem

user3050538
źródło

2

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/[email protected] 
 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';

gaurav gupta
źródło

2

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

Kuldip D. Gandhi
źródło

2

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.

typhon04
źródło

1

Wielkie dzięki za odpowiedź. Chociaż nie rozwiązało to problemu, pomogło mi jednak znaleźć moduł troublemaker i poinformować jego autora o problemie.

lucifer63

2

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ć

Rijo
źródło

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';
Jeśli jakikolwiek błąd kompilacji dla brakującego pakietu,

npm install classlist.js --save-exact
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" />

Sudheer Muhammed
źródło

0

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:

Uruchom npm nieaktualny
Zaktualizuj plik package.json z liczbą wyświetlaną w bieżącej kolumnie z wyników (może to zepsuć projekt, bądź ostrożny)
Uruchom instalację npm
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.

Jordania
źródło

0

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.

Andrew Junior Howard
źródło

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

Odpowiedzi:

Uwagi