Angular 2/4/5가 IE11에서 작동하지 않습니다.


124

IE 11에서 실행할 때 Angular 2 앱이 Loading ...을 표시하는 데 왜 멈춰 있는지 알아 내려고합니다.

누군가의 제안에 따라 크롬과 IE 11 모두에서 스택 오버플로에 게시 된이 플 런커를 시도했습니다. Chrome에서는 잘 작동하지만 IE 11에서는 실패합니다. 동일한 오류, "로드 중 ..."

플 런커는 : 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>

IE 11이 앵귤러 2 앱을 실행하지 못하는 이유에 대해 아는 사람이 있습니까?

감사합니다!


대답은 현재 2.0.0-beta.0을 사용하는 것입니다.
Pat Bone Crusher Laplante

답변:


187

의 최신 버전은 angular 기본적으로 상록 브라우저 용으로 만 설정됩니다.

현재 설정은 소위 "에버그린"브라우저를위한 것입니다. 자동으로 업데이트되는 브라우저의 마지막 버전. 여기에는 Safari> = 10, Chrome> = 55 (Opera 포함), 데스크톱의 Edge> = 13, 모바일의 iOS 10 및 Chrome이 포함됩니다.
여기에는 언급되지 않았지만 firefox도 포함됩니다.

특정 브라우저에 대해 제안 된 폴리 필 목록과 함께 브라우저 지원에 대한 자세한 정보는 여기를 참조하십시오. https://angular.io/guide/browser-support#polyfill-libs


즉, Angular가 IE11 이하에서 작동하도록하려면 올바른 폴리 필을 수동으로 활성화해야합니다.


이를 위해로 이동 polyfills.ts합니다 (에서 src기본적으로 폴더) 단지 의 주석 다음 수입 :

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

주석은 말 그대로 파일에 있으므로 쉽게 찾을 수 있습니다.

여전히 문제 targetes5있는 tsconfig.json경우 @MikeDub제안 된 대로 속성을 in 으로 다운 그레이드 할 수 있습니다 . 이것이하는 일은 모든 es6정의 의 컴파일 출력을 정의로 변경하는 것 es5입니다. 예를 들어 굵은 화살표 함수 ( ()=>{})는 익명 함수 ( function(){}) 로 컴파일됩니다 . 여기 에서 es6 지원 브라우저 목록을 찾을 수 있습니다 .


노트

@jackOfAll사용자가 필요하지 않은 상록 브라우저를 사용하는 경우에도 IE11 폴리 필이로드되는지 여부를 댓글에서 질문 했습니다. 대답은 그렇습니다. IE11 폴리 필을 포함하면 폴리 필 파일이 2017 년 8 월 8 일 부터 시작 ~162KB됩니다 ~258KB. 나는 이것을 해결하기 위해 투자했지만 현재로서는 불가능한 것 같습니다.

당신이 IE10에서 아래 오류를 얻는 경우 •, 당신에 가서 package.json다운 그레이드 webpack-dev-server2.7.1특히. 이보다 높은 버전은 더 이상 "이전"IE 버전을 지원하지 않습니다.


3
내 angular 5 프로젝트에도 IE 용 polyfill의 주석 처리를 제거했지만 여전히 IE 브라우저에서 작동하지 않는 동일한 오류가 있습니다. 너무 이상한 ...
애비

언급 된 모든 가져 오기의 주석 처리를 제거하고 그 아래에있는 NgClass를 가져옵니다. 마지막으로 "npm install --save classlist.js"를 설치합니다. 이것은 내 경우에 효과가 있습니다.
Vaibhav

2
@dudewad 저는 IE11을위한 2 개의 개별 번들을 만들고 그 번들을 IE 조건부 주석으로 래핑하여 크롬에서 전달되는 것을 막는 실험을했습니다.
Zze

1
@Zze 글쎄, 그것은 확실히 당신을 철저히합니다. 좋아, 좋아.
dudewad

1
@Zze 조건부 주석은 IE10에서 제거되었으며 IE5-9에서만 지원됩니다. 따라서 런타임에 번들을 페이지에 추가하기 위해 특정 사용자 에이전트 스니핑을 수행하지 않는 한 IE 번들은 IE10 + 용으로로드되지 않습니다.
bmcminn

22

나는 똑같은 문제가 있었고 해결책 중 어느 것도 나를 위해 일하지 않았습니다. 대신 (homepage) .html에 다음 줄을 추가하여 <head>수정했습니다.

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

이 SO stackoverflow.com/questions/26346917/…의 정보를 고려할 때 X-UA-Compatible 사용 권장 사항이 유효하지 않은 것 같습니다.
Lubiluk

19

오늘이 문제를 만났습니다. GitHub에서 이후 버전의 베타로 이동할 필요가없는 솔루션을 찾았습니다.

HTML에 다음 스크립트를 추가하십시오.

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

이것은 나를 위해 문제를 해결했습니다. 자세한 내용은 https://github.com/angular/angular/issues/7144 에서 github 문제를 확인할 수 있습니다.


2
이 솔루션은 :( 나를 위해 작동하지 않았다 ... [IE에서 실행중인 VS2015 프로젝트에]
세일란 Mumun Kocabaş

12

2017 년 2 월 기준

Angular-Cli 프로젝트를 사용하면 polyfills.ts파일의 모든 줄 이 이미 주석 처리되지 않았으므로 모든 폴리 필이 이미 사용되고 있습니다.

내 문제를 해결하기 위해 여기 에서이 솔루션을 찾았습니다 .

위의 링크를 요약하면 IE는 es6 의 기능인 람다 화살표 / 뚱뚱한 화살표 기능지원하지 않습니다 . ( 이것은 polyfills.ts가 당신을 위해 작동하지 않는 경우입니다 ).

솔루션 : 모든 IE 버전에서 실행하려면 es5 를 대상으로해야합니다. 이에 대한 지원은 Microsoft의 새로운 Edge 브라우저에서만 도입되었습니다.

이것은 아래에서 찾을 수 있습니다 src/tsconfig.json.

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

이 대답은 매우 잘못된 것입니다. polyfill은 IE 9 이상이 ES6 표준과 호환되도록하는 스크립트입니다. angular.io/docs/ts/latest/guide/browser-support.html 브라우저가 기본적으로 화살표 기능을 지원하는지 여부는 중요하지 않습니다. 폴리 필은이 문제를 완전히 완화합니다.
Zze

8
제 사건에서 제가 경험 한 것은 ... 오해의 소지가 있습니까? polyfill은 이미 주석 처리되지 않았으며 IE11에서 발생한 문제를 해결하지 못했습니다. 이것이 반대표의 가치가 있다고 생각하지 않습니다.
MikeDub

이것을 다시 읽은 후, 당신이 말하려는 것을 이해하지만 현재 단어가 표현 된 방식으로 모든 .ts파일을 뚱뚱한 화살표 사용에서 anon funcs 로 수동으로 변경 해야하는 것처럼 들립니다 . 앞으로 문제를 완화하는 ecma 스크립트 대상을 변경하면 컴파일러 출력이 어떻게 다른지에 대한 링크에서 인용문을 잘라 내야한다고 생각합니다.
Zze

5
또한 이미 tsconfig에서 es5를 대상으로하고 있는데 여전히 문제가 있습니다.
gh0st

1
@MikeDub 솔루션을 사용해 보았지만 IE11에서는 작동하지 않습니다. 더 나은 접근 방식을 제공 할 수 있습니까?
Prasanna Sasne

11

적절한 섹션의 주석 처리를 제거하여 대상 브라우저에 맞게 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
이것은 훌륭합니다. 감사합니다.
AtLeastTheresToast

10

iexplorer 11 및 Angular 2를 사용하는 경우 두 가지 작업을 수행하여 위의 모든 문제를 해결했습니다.

index.html에서 다음을 추가하십시오.

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

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
예, IE11에서는 작동하지만 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. 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';

npm Pacakages 설치 주석에 몇 가지 npm 설치 명령이 있습니다. Angular CLI의 초기 버전을 사용하는 경우 세 번째 버전이있을 수도 있습니다. Angular CLI 버전 7, 6 및 1.7의 경우 다음을 실행해야합니다.

npm install --save classlist.js

npm install --save web-animations-js

이제 IE를 열고 응용 프로그램을 렌더링하고 확인하십시오. :)


8

2017 년 9 월 (노드 버전 = v6.11.3, npm 버전 = 3.10.10) 현재 저에게 효과적이었습니다 (@Zze에게 감사드립니다).

편집하다 polyfills.tsIE11에 필요한 가져 오기를 하고 주석 처리를 제거하십시오.

보다 정확하게는 편집 polyfills.ts( src기본적으로 폴더에 있음)하고 IE11에 필요한 모든 행의 주석을 해제합니다 (파일 내의 주석은 IE11에서 실행하는 데 필요한 가져 오기를 정확히 설명합니다).

작은 경고 : classlist.js및에 대한 줄의 주석 처리를 제거 할 때주의하십시오 web-animations-js. 주석 처리 된 줄에는 각각 특정 주석이 있습니다. 주석 처리를 해제하기 전에 연관된 npm 명령을 실행해야합니다. 그렇지 않으면 polyfills.ts 처리가 중단됩니다.

설명의 한마디로, 폴리 필은이를 지원하지 않는 웹 브라우저에서 기능을 구현하는 코드 조각입니다. 이것이 기본 polyfills.ts 구성에서 최소한의 가져 오기 세트 만 활성화 된 이유입니다 ( 소위 "에버그린"브라우저, 자동으로 업데이트되는 브라우저의 마지막 버전을 목표로하기 때문입니다 ).


8

수정 2018/05/15 : 이것은 메타 태그 로 달성 할 수 있습니다 ; 해당 태그를 index.html에 추가하고이 게시물을 무시하십시오.

이것은 질문에 대한 완전한 대답은 아니지만 (기술적 인 대답은 위의 @Zze의 대답을 참조하십시오 ) 추가 해야 할 중요한 단계가 있습니다.

호환 모드

적절한 폴리 필이 배치되어 있어도 IE11에서 폴리 필을 사용하여 Angular 2+ 앱을 실행하는 데 여전히 문제가 있습니다. 인트라넷 호스트에서 사이트를 실행하는 경우 (예 : http : // localhost 또는 다른 매핑 된 로컬 도메인 이름 에서 테스트하는 경우 ) 호환성보기 설정으로 이동하여 "호환성보기에서 인트라넷 사이트 표시"를 선택 취소해야합니다. IE11의 호환성보기는 Angular 용 ES5 폴리 필에 포함 된 몇 가지 규칙을 위반하기 때문입니다.

여기에 이미지 설명 입력


1
이 솔루션을 따르는 경우 응용 프로그램을 실행하는 모든 클라이언트에서이 작업을 수행해야합니다. html 파일에 특수 태그를 추가하면 브라우저가 호환 모드 대신 사용 가능한 최신 버전에서 실행됩니다. 태그를 찾으려면 다음 답변을 참조하십시오. stackoverflow.com/a/47777695/4628364
Poly

2
내 경험상 앱이 인트라넷 호스트에서 제공되는 경우이 메타 태그를 사용해도 IE 11의 기본 설정 인 '호환성보기에서 인트라넷 사이트 표시'가 재정의되지 않습니다. 인트라넷 앱 사용자는 여전히 로그인하여 이상적이지 않은이 옵션을 수동으로 선택 취소해야합니다. 현재 해결 방법을 찾고 있습니다. 아마도 ES6가 아닌 ES5로 컴파일 할 수 있습니다.
Kyle Vassella

6

Angular4 응용 프로그램이 있는데도 IE11 브라우저에서 작동하지 않았으며 아래 변경 사항을 수행했으며 이제 올바르게 작동합니다. index.html 파일 에 아래 코드를 추가 하십시오.

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

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

위의 두 단계를 통해 문제를 해결할 수 있습니다. 문제가 있으면 알려주세요. 감사!!!


난 당신이 다른 해결책이 있습니까, 이미이 개 부분 주석 thses하지만 여전히 작동하지 않습니다이
메나 라마단

5

모든 JavaScript 함수가 작동하지 않는 문제가 여전히 발생하면 polyfill에이 줄을 추가하십시오. 누락 된 '값'방법을 수정합니다.

import 'core-js/es7/object';

그리고이 줄은 누락 된 'includes'메소드를 수정합니다.

import 'core-js/es7/array'

4

동일한 문제가 발생했습니다. 호환성보기에서 인트라넷 사이트 표시를 사용하도록 설정 한 경우 polyfills.ts가 작동하지 않는 경우 다음 줄을 추가해야합니다.

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


2

나를 위해 일한 것은 IE 11에서 응용 프로그램 성능을 향상시키기 위해 다음 단계를 따랐다는 것입니다. 1.) Index.html 파일에 다음 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.) polyfills.ts 파일에서 다음 가져 오기를 추가하십시오.

import 'core-js/client/shim';

2

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

2

다른 솔루션 중 어느 것도 효과가 없다면 문제의 원인을 조사하는 것이 좋습니다. npm 모듈이 트랜스 파일 할 수없는 ES6 코드를 직접 삽입 할 수 있습니다.

제 경우에는

SCRIPT1002 : 다음 줄에 구문 오류 vendor.js (114536,27) 가 있습니다.

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

node_modules 폴더를 검색 한 결과 어떤 파일에서 해당 줄이 있는지 찾았습니다. 범인은 punycode.js 라는 것이 밝혀졌습니다. 2.1.0 버전에서 ES6를 직접 사용하는 라는 .

ES5를 사용하는 1.4.1로 다운 그레이드 한 후 문제가 해결되었습니다.


1
귀하의 답변에 감사드립니다. 문제가 해결되지는 않았지만 문제 해결 모듈을 찾아서 작성자에게 문제에 대해 알리는 데 도움이되었습니다.
lucifer63 dec. 05 '182018-12-05

2

Angular8에서이 문제를 해결하는 방법

주석 polyfills.ts import 'classlist.js';import 'web-animations-js';다음 사용하여 두 개의 의존성을 설치 npm install --save classlist.js하고 npm install --save web-animations-js.

갱신 tsconfig.json"target":"es5",

그런 다음 ng serve응용 프로그램 을 실행하고 IE에서 열면 작동합니다.


1
  1. src / polyfill.js에서 IE 섹션의 주석 처리를 제거하십시오.

    / ** IE10 및 IE11은 SVG 요소에 대한 NgClass 지원을 위해 다음이 필요합니다 * /

    import 'classlist.js';

  2. 패키지 누락에 대한 빌드 오류가 발생하면

    npm install classlist.js --save-exact

  3. 기본 IE 문서 모드를 설정하려면 아래 줄을 포함해야합니다. 그렇지 않으면 버전 7에서 열립니다.

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

0

이 스레드의 모든 솔루션과 다른 솔루션의 모든 솔루션을 시도했지만 성공하지 못했습니다. 이 문제를 해결 한 것은 주요 버전 변경을 포함하여 내 프로젝트의 모든 패키지를 업데이트하는 것입니다. 그래서:

  1. 오래된 npm 실행
  2. 결과에서 현재 열에 표시된 번호로 package.json을 업데이트합니다 (프로젝트가 중단 될 수 있으므로주의하십시오).
  3. npm install 실행
  4. 다른 답변에 언급 된대로 주석 처리되지 않은 polyfill도 있는지 확인했습니다.

그게 다야. 어떤 도서관이 범인인지 정확히 지적 할 수 있으면 좋겠습니다. 내가받은 실제 오류는 Angular 6의 vendor.js에서 "Syntax Error"였습니다.


0

Angular 9는 IE11에서 완벽하게 작동합니다.

여기에 나열된 모든 제안을 시도했지만 모두 효과가 없었습니다. 그러나 나는 내가 가져온 특정 라이브러리로 추적 할 수있었습니다 app.module( ZXingScannerModule정확히). 앱이 첫 페이지의 IE11에서 실패하는 경우 한 번에 하나씩 라이브러리를 제거하고 IE11을 확인하십시오. 모든 빌드 경고 오류에서 완전히 누락되었습니다. 이 경우에 해당하는 경우이 라이브러리를 지연로드 된 모듈로 사용하는 사이트 영역을 구분하는 것을 고려하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.