[angular] 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

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

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

여전히 문제 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';

답변

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