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

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 앱을 실행하지 못하는 이유에 대해 아는 사람이 있습니까?

감사합니다!

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

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

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

이를 위해로 이동 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';

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

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

노트

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

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

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

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

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

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

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

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

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

적절한 섹션의 주석 처리를 제거하여 대상 브라우저에 맞게 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';

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. 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를 열고 응용 프로그램을 렌더링하고 확인하십시오. :)

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 구성에서 최소한의 가져 오기 세트 만 활성화 된 이유입니다 ( 소위 "에버그린"브라우저, 자동으로 업데이트되는 브라우저의 마지막 버전을 목표로하기 때문입니다 ).

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

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

호환 모드

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

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

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

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

import 'core-js/es7/object';

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

import 'core-js/es7/array'

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

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

바꾸다 tsconfig.json

"target":"es5",

내 문제를 해결했다

나를 위해 일한 것은 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';

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

다른 솔루션 중 어느 것도 효과가 없다면 문제의 원인을 조사하는 것이 좋습니다. 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로 다운 그레이드 한 후 문제가 해결되었습니다.

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

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

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

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

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

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