IE11에서는 Angular 2/4/5가 작동하지 않습니다.
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이 왜 angular 2 앱을 실행하지 못하는지에 대해 아무도 아는 사람이 있습니까?
감사합니다!
최신 버전은 angular기본적으로 상록 브라우저에만 설정됩니다 ...
현재 설정은 소위 "에버그린"브라우저 용입니다. 자동으로 업데이트되는 최신 버전의 브라우저 여기에는 Safari> = 10, Chrome> = 55 (오페라 포함), Edge> = 13, 데스크탑의 iOS 10 및 Chrome이 포함됩니다.
언급되지는 않았지만 여기에는 파이어 폭스도 포함됩니다.
특정 브라우저에 권장되는 폴리 필 목록과 함께 브라우저 지원에 대한 자세한 내용은 여기를 참조하십시오. https://angular.io/guide/browser-support#polyfill-libs
즉 , IE11 이하에서 Angular가 작동하도록하려면 올바른 폴리 필을 수동으로 활성화해야합니다.
이를 위해 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제안 에 따라 속성을 로 다운 그레이드 할 수 있습니다 . 이것이하는 일은 es6정의 의 컴파일 출력을 정의로 변경하는 것 es5입니다. 예를 들어, 팻 화살표 함수 ( ()=>{})는 익명 함수 ( function(){}) 로 컴파일됩니다 . es6 지원 브라우저 목록은 여기에서 찾을 수 있습니다 .
노트
• @jackOfAllIE11 폴리 필이 사용자에게 필요없는 상록 브라우저에 있더라도 IE11 폴리 필이로드되는지 여부 에 대한 의견을 물었 습니다. 대답은 그렇습니다! IE11 폴리 필을 포함하면 폴리 필 파일을 17 년 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 문제를 따를 수 있습니다.
적절한 섹션의 주석 처리를 제거하여 대상 브라우저에 대한 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';
2017 년 2 월 기준
Angular-Cli 프로젝트를 사용하면 polyfills.ts파일의 모든 행 이 이미 주석 처리 해제되어 모든 폴리 필이 이미 사용되었습니다.
나는이 솔루션을 찾을 여기 내 문제를 해결하기 위해.
위의 링크를 요약하기 위해 IE는 es6 의 기능인 람다 화살표 / 지방 화살표 기능 을 지원하지 않습니다 . ( polyfills.ts가 작동하지 않는 경우입니다 ).
해결책 : 모든 IE 버전에서 실행하려면 es5 를 대상으로해야합니다. 이 기능은 Microsoft의 새로운 Edge Browser에서만 도입되었습니다.
이것은 아래에 있습니다 src/tsconfig.json:
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
iexplorer 11과 Angular 2의 경우 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';
2018/05/15 편집 : 이것은 메타 태그 로 달성 할 수 있습니다 . 해당 태그를 index.html에 추가하고이 게시물을 무시하십시오.
이 질문에 대한 완전한 답변은 아니지만 (기술 답변은 위의 @Zze 답변 참조 ) 추가 해야 할 중요한 단계가 있습니다.
호환 모드
적절한 폴리 필을 사용하더라도 IE11에서 폴리 필을 사용하여 Angular 2+ 앱을 실행하는 데 여전히 문제가 있습니다. 인트라넷 호스트에서 사이트를 실행중인 경우 (예 : http : // localhost 또는 다른 매핑 된 로컬 도메인 이름 에서 테스트하는 경우 ) 호환성보기 설정으로 이동하여 "호환성보기에 인트라넷 사이트 표시"를 선택 해제해야합니다. IE11의 호환성보기는 Angular에 대한 ES5 polyfill에 포함 된 몇 가지 규칙을 위반하기 때문입니다.
As of September 2017 (node version=v6.11.3, npm version=3.10.10), this is what worked for me (thanks @Zze):
Edit polyfills.ts and uncomment the imports that are necessary for IE11.
More preciselly, edit polyfills.ts (located in the src folder by default) and just uncomment all lines required for IE11 (the comments inside the file explain exactly what imports are necessary to run on IE11).
A small warning: pay attention when uncommenting the lines for classlist.js and web-animations-js. These commented lines have a specific comment each: you must run the associated npm commands before uncommenting them or processing of polyfills.ts will break.
As a word of explanation, the polyfills are pieces of code that implement a feature on a web browser that do not support it. This is why in the default polyfills.ts configuration only a minimal set of imports is active (because it's aiming the so-called "evergreen" browsers; the last versions of browsers that automatically update themselves).
- Un-comment some imports in the polyfill.ts file.
/** 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';Install npm Pacakages Notice there are some npm install commands in the comments. If you are using an early version of Angular CLI, there may also be a third one. For Angular CLI versions 7, 6, and 1.7 you need to run:
npm install --save classlist.js
npm install --save web-animations-js
now open IE and render your application and check :)
I have an Angular4 application, even for me also it was not working in IE11 browser, i have done below changes, now its working correctly. Just add below code in the index.html file
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Just you need to uncomment these below lines from polyfills.ts file
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';
These above 2 steps will solve your problem, please let me know if anything will be there. Thanks!!!
I was having the same issue, if you have enabled Display intranet sites in Compatibility View the polyfills.ts won't work, you still need to add the following line as has been told.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
What worked for me is I followed the following steps to improve my application perfomance in IE 11 1.) In Index.html file, add the following CDN's
<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.) In polyfills.ts file and add the following import:
import 'core-js/client/shim';
In 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`.
changing tsconfig.json
"target":"es5",
solved my problem
If you have still problems that not all JavaScript functions are working add this line in your polyfills. It fixes the missing ‘values’ method:
import 'core-js/es7/object';
And this line fixes the missing ‘includes’ method:
import 'core-js/es7/array'
If none of the other solutions work for you, it's worth investigating the source of the problem. It may be than an npm module directly inserts ES6 code, which cannot be transpiled.
In my case I had the
SCRIPT1002: Syntax error vendor.js (114536,27) at the following line:
const ucs2encode = array => String.fromCodePoint(...array);
I searched the node_modules folder and found from which file the line came. It turned out that the culprit was punycode.js which in it's 2.1.0 version uses ES6 directly.
After I downgraded it to 1.4.1, which uses ES5, the problem was solved.
이 스레드의 모든 솔루션과 다른 솔루션을 모두 시도했지만 성공하지 못했습니다. 나를 위해이 문제를 해결 한 것은 MAJOR 버전 변경을 포함하여 프로젝트의 모든 패키지를 업데이트하는 것이 었습니다. 그래서:
- 오래된 npm 실행
- 결과에서 현재 열에 표시된 숫자로 package.json을 업데이트하십시오 (이는 프로젝트를 중단시킬 수 있으므로주의하십시오)
- npm install을 실행하십시오.
- 다른 답변에서 언급 한대로 폴리 필을 주석 처리하지 않았는지 확인하십시오.
그게 다야. 어느 도서관이 범인인지 정확하게 지적 할 수 있기를 바랍니다. 실제 오류는 Angular 6의 vendor.js에서 "구문 오류"였습니다.
참고 URL : https://stackoverflow.com/questions/35140718/angular-2-4-5-not-working-in-ie11
'Programming' 카테고리의 다른 글
| 파이썬에서 객체의 속성을 열거하는 방법은 무엇입니까? (0) | 2020.07.26 |
|---|---|
| 정규식, 공백이나 콜론을 제외한 모든 영숫자가 아닌 문자 (0) | 2020.07.26 |
| 웹팩으로 전역 변수 정의 (0) | 2020.07.26 |
| EditText와 함께 AlertDialog.Builder를 사용할 때 소프트 키보드가 나타나지 않습니다. (0) | 2020.07.26 |
| assert에 맞춤 메시지를 추가 하시겠습니까? (0) | 2020.07.26 |