각도 2/4/5가 IE11에서 작동하지 않음

programing

각도 2/4/5가 IE11에서 작동하지 않음

easyjava 2023. 2. 23. 23:08

각도 2/4/5가 IE11에서 작동하지 않음

왜 내 angular 2 app이 Loading...이라고 표시되는지 알아내려고 합니다.IE 11에서 실행할 경우.

누군가의 제안에 따라 Chrome과 IE 11 모두에서 스택 오버플로에 게시된 이 플런커를 사용해 보았습니다.Chrome에서는 정상적으로 동작하지만 IE 11에서는 동작하지 않는다.같은 에러로, 「로드중...」이라고 계속 말하고 있습니다.."

plunker는 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 앱을 실행하지 못하는지 아는 사람?

감사해요!

의 최신 버전은 기본적으로 상록 브라우저에만 설정되어 있습니다.

현재 설정은 자동으로 자동 업데이트되는 브라우저의 마지막 버전인 이른바 "ervergreen" 브라우저용입니다.사파리 > = 10, 크롬 > = 55 (오페라), 엣지 > = 13, iOS 10 크롬 > 크롬 >
파이어폭스

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

This means that you 수동으로 have to enable the correct polyfills to get Angular working in IE11 and below.

위해서는, 「」에 해 주세요.polyfills.ts (the (the)에서)src기본적으로 폴더) 및 다음 Import의 코멘트를 해제합니다.

/***************************************************************************************************
 * 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을 property property로 설정합니다.es5tsconfig.json제안하신 대로입니다.이것이 하는 일은 컴파일 출력을 변경하는 것입니다.es6의 es5 뚱뚱한 의 기능(예: 뚱뚱한 화살의 기능)입니다.()=>{} 함수 「」「」「」 )로.function(){}es6에서 지원되는 브라우저 목록은 여기에서 확인할 수 있습니다.

메모들

• 코멘트에서 다음과 같은 질문을 받았습니다.@jackOfAll사용자가 필요하지 않은 상록수 브라우저에 있더라도 IE11 폴리필이 로드되는지 여부.'먹다'다!하면 IE11 이 됩니다.~162KB로로 합니다.~258KB8일 .나는 이 문제를 해결하기 위해 투자했지만, 현재로서는 가능하지 않은 것 같다.

는, 「」의 「IE10」의 「IE10」의 「IE10」의 「IE10」의 「IE10」의 「IE10」의 「IE10」아래」의 「IE10」의 「IE10」에 액세스 합니다.package.jsonwebpack-dev-server로로 합니다.2.7.1체적적구이보다 높은 버전은 더 오래된 IE 버전을 지원하지 않게 되었습니다. IE 버 ie ie ie ie ie ie ie ie ie 。

저도 똑같은 문제가 있었는데 어떤 해결책도 제게는 효과가 없었습니다.html 아래에 있는 신홈홈홈홈 홈홈홈홈홈 홈음음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>

이것으로 나는 그 문제를 해결했다.상세한 것에 대하여는, 다음의 URL 를 참조해 주세요.https://github.com/angular/angular/issues/7144

2017년 2월 현재

Angular-Cli 프로젝트를 사용하여 의 모든 라인polyfills.ts파일이 이미 컴파일 되어 있지 않기 때문에 모든 폴리필이 이미 사용되고 있었습니다.

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

위의 링크를 요약하면 IE는 es6의 특징인 람다 애로우/팻 애로우 기능을 지원하지 않습니다(이는 polyfules.ts가 적합하지 않은 경우입니다).

해결 방법: IE 버전에서 실행하려면 es5를 대상으로 해야 합니다. 이 지원은 Microsoft가 새로운 Edge Browser에서만 도입했습니다.

이것은 아래에 있습니다.src/tsconfig.json:

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

대상 브라우저의 polyfules.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';

iexplor 11과 Angular 2를 사용하는 경우 위의 모든 문제를 다음 두 가지 방법으로 해결했습니다.

in index.displays add:

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

src\polyfiles.ts uncommentment:

/** 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 파일에서 Import의 코멘트를 해제합니다.

/** 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 install 명령어가 포함되어 있습니다.Angular CLI의 초기 버전을 사용하는 경우 세 번째 버전이 있을 수 있습니다.Angular CLI 버전7, 6, 및 1.7의 경우 다음을 실행해야 합니다.

npm install --save classlist.displays

npm install --save web-animations-displays

이제 IE를 열고 응용 프로그램을 렌더링하고 체크합니다.

2018/05/15 편집:이것은 메타 태그로 할 수 있습니다.이 태그를 index.html에 추가하고, 이 투고는 무시해 주세요.

이 질문에 대한 완전한 답변은 아닙니다(기술적인 답변은 위의 @Zze의 답변을 참조해 주세요).다만, 중요한 순서를 추가할 필요가 있습니다.

호환성 모드

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

2017년 9월 현재(node version=v6.11.3, npm version=3.10.10)에는 다음과 같은 이점이 있습니다(@Zze 감사).

★★polyfills.tsIE11의 Import.

더 는 편집해 .polyfills.ts (에)src기본적으로 폴더) 및 IE11에 필요한 모든 행의 코멘트를 해제합니다(파일 내의 코멘트는 IE11에서 실행하는 데 필요한 Import를 정확하게 설명합니다).

작은 경고: 다음 행의 코멘트를 해제할 때는 주의해 주십시오.classlist.js ★★★★★★★★★★★★★★★★★」web-animations-js하기 전에 않으면 됩니다. 이들 코멘트된 행에는 각각 특정 코멘트가 있습니다.코멘트를 해제하기 전에 관련된npm 명령어를 실행해야 합니다.polyfules.ts 다리다

설명하자면 폴리필은 이를 지원하지 않는 웹 브라우저에 기능을 구현하는 코드 조각입니다.이것이 디폴트 polyfiles.ts 설정에서는 최소한의 Import 세트만 활성화 되는 이유입니다(이거는 이른바 "Evergreen" 브라우저, 즉 자동으로 업데이트되는 브라우저의 마지막 버전을 대상으로 하기 때문입니다).

저는 Angular4 어플리케이션을 가지고 있는데 IE11 브라우저에서도 동작하지 않습니다.아래에서 변경을 가하여 정상적으로 동작하고 있습니다.index.html 파일에 다음 코드를 추가합니다.

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

폴리 매립 파일에서 아래 줄의 코멘트를 해제하기만 하면 됩니다.

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

위의 2단계로 문제가 해결됩니다.무슨 일이 있으면 알려주세요.감사합니다!!!

일부 JavaScript 기능이 작동하지 않는 문제가 해결되지 않으면 폴리필에 이 행을 추가합니다.누락된 '값' 방법을 수정합니다.

import 'core-js/es7/object';

이 행은 누락된 '포함' 방법을 수정합니다.

import 'core-js/es7/array'

같은 문제가 있었습니다만, Compatibility View(호환성 보기)에서 Display intranet sites(인트라넷 사이트 표시)를 유효하게 하고 있는 경우, polyfiles.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) polyfules.ts 파일에 다음 Import를 추가합니다.

import 'core-js/client/shim';

폴리필리먼트 내.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 폴더를 검색하여 행이 어느 파일에서 왔는지 확인했습니다.범인은 2.1.0 버전에서는 ES6를 직접 사용하는 punycode.js로 판명되었습니다.

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

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

polypules.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합니다.

src/polyfill.js의 IE 섹션 주석 해제,

/** IE10 및 IE11에서는 SVG 요소에서의 NgClass 지원을 위해 다음이 필요합니다*/

'classlist.disc' Import;
누락된 패키지에 대한 빌드 오류가 있을 경우,

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

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

1단계: 폴리 매립지에 코멘트 없이 충전한다.또한 polyfules.ts 파일에 기재되어 있는npm install 명령어를 모두 실행하여 패키지를 설치합니다.

순서 2: 브라우저 목록에서 IE 9-11 지원이 언급된 행 앞에 파일을 삭제합니다.

스텝 3: tsconfig.json 파일에서 "target"과 같이 변경합니다: "es2015"에서 "target"으로: "es5"

이러한 절차로 문제가 해결되었습니다.

나는 이 스레드의 모든 솔루션과 다른 솔루션들을 시도해 보았지만 성공하지 못했다.결국 이 문제를 해결하게 된 것은 메이저버전 변경을 포함한 프로젝트의 모든 패키지를 갱신하는 것이었습니다.그래서:

오래된 npm 실행
패키지를 갱신합니다.결과에서 현재 열에 표시된 숫자의 json(프로젝트가 중단될 수 있으므로 주의)
npm 설치 실행
다른 답변에 기재된 폴리필름도 비컴팩트하게 처리했습니다.

바로 그겁니다.어느 도서관이 범인인지 정확히 알아낼 수 있으면 좋겠다.실제로 발생한 에러는 Angular 6의 vendor.js의 "Syntax Error"입니다.

IE11에서는 개봉 후 각도 9가 완벽하게 작동합니다.

여기에 나와 있는 모든 제안을 시도해 봤지만 효과가 없었습니다., 「Import」에서 하고 했습니다.app.module )ZXingScannerModule() 할 경우 오류에서 되었습니다.첫 페이지의 IE11에서 앱이 실패할 경우 라이브러리를 하나씩 제거하고 IE11에 체크인을 해보십시오. 빌드 경고 오류에서 완전히 누락되었습니다.이 경우 이 라이브러리를 느린 부하 모듈로 사용하는 사이트의 영역을 구분하는 것을 고려해 주십시오.

polyfiles.core-js lib에서 을 사용합니다 이 .target을 매기다es5 tsconfig.base.json

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es/symbol';
import 'core-js/es/object';
import 'core-js/es/function';
import 'core-js/es/parse-int';
import 'core-js/es/parse-float';
import 'core-js/es/number';
import 'core-js/es/math';
import 'core-js/es/string';
import 'core-js/es/date';
import 'core-js/es/array';
import 'core-js/es/regexp';
import 'core-js/es/map';

언급URL : https://stackoverflow.com/questions/35140718/angular-2-4-5-not-working-in-ie11

'programing' 카테고리의 다른 글

스프링: 정적 필드에 값을 주입하려면 어떻게 해야 합니까? (0)	2023.02.23
Junit-vintage-engine과 Junit-jupiter-engine의 차이점은 무엇입니까? (0)	2023.02.23
유형 [단순 유형, 클래스...]에 대한 (Map) 키 역직렬라이저를 찾을 수 없습니다. (0)	2023.02.23
리액션 js의 텍스트 필드에 길이 제약 조건을 넣습니다. (0)	2023.02.23
div 또는 다른 방법을 사용하여 단락 텍스트와 함께 헤더를 인라인으로 표시하는 방법 (0)	2023.02.23

현재글각도 2/4/5가 IE11에서 작동하지 않음

각종 프로그래밍 정보를 다루는 블로그입니다.

TypeScript, reactjs, Ajax, WPF, Excel, bash, MongoDB, jQuery, oracle, angular, AngularJS, sql-server, GIT, spring-boot, mariaDB, WordPress, JSON, C, MySQL, Python,

Today :
Yesterday :

easyjava

각도 2/4/5가 IE11에서 작동하지 않음

각도 2/4/5가 IE11에서 작동하지 않음

메모들

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

« 2026/04 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

각도 2/4/5가 IE11에서 작동하지 않음

각도 2/4/5가 IE11에서 작동하지 않음

메모들

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바