Angular 8 응용 프로그램에서 Internet Explorer를 지원하려면 어떻게 해야 합니까?
Angular CLI(8.0.0)로 프로젝트를 생성할 때 실행합니다.ng serveInternet Explorer에서 응용 프로그램을 열면 빈 화면이 나타납니다.
저는 그것을 보았습니다.polyfills.ts파일과 저는 다음 행에 대해 언급했습니다.
import 'classlist.js';
import 'web-animations-js';
Angular 8이 core.js 3.0을 직접 지원하기 때문에 core.js 가져오기도 모두 제거했습니다.
저도 달렸습니다.npm i.
꾸러미json:
"dependencies": {
"@angular/animations": "~8.0.0",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"classlist.js": "^1.1.20150312",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.1",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.0",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
편집:
브라우저 목록:
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
IE 9-11 # For IE 9-11 support, remove 'not'.
편집 2:
Internet Explorer(11)의 콘솔에 다음 오류가 표시됩니다.
폴리필즈.js:Syntax error (3168, 5)(3168행 시작) ->class Zone {
vendor.js:Syntax error (156, 1)(156행 시작) ->class PlatformLocation {
maint.ts:Syntax error (95, 20)(App 구성 요소를 가리킴)
제가 또 무엇을 해야 합니까?
이 문제에 따라 회신합니다.
다음 단계를 따라야 합니다.
- 새 tsconfig 생성
tsconfig.es5.jsontsconfig.json 옆에 아래 내용이 있습니다.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"target": "es5"
}
}
- 인
angular.json아래projects:yourAppName:architect:build:configurations,더하다
"es5": {
"tsConfig": "./tsconfig.es5.json"
}
그리고.projects:yourAppName:architect:serve:configurations더하다
"es5": {
"browserTarget": "yourAppName:build:es5"
}
앱:build:es5의 앱 이름을 앱 이름으로 변경하는 것을 기억하세요!
아래에 표시된 전체 경로
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
...
},
"configurations": {
"production": {
...
},
"es5": {
"tsConfig": "./tsconfig.es5.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
...
},
"configurations": {
"production": {
...
},
"es5": {
"browserTarget": "yourAppName:build:es5"
}
}
},
- 아래 명령을 사용하여 이 구성으로 서버를 실행합니다.
ng serve --configuration es5
"tsconfig.json"으로 이동하여 "target" 대신 "es5"라는 target을 사용합니다: "es2015",
compileOnSave\compilerOptions 내부에 있는 대상
----간단하고 쉬운 방법
2개의 파일을 변경해야 합니다.polyfills.ts그리고.tsconfig.json각각 다음과 같다.
브라우저 폴리필을 추가하기만 하면 됩니다.polyfills.ts
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/promise';
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';
그리고.tsconfig.json 이렇게 "target"을 es5로 변경합니다.
"target": "es5",
대신에
"target": "es2015",
참고: 저의 원래 답변은 Reddit(https://www.reddit.com/r/Angular2/comments/buup6a/) 에서 왔습니다.
당신의 tsconfig.json을 확인하세요 Angular 8로 업그레이드하는 동안, 저는 목표가 es2015로 바뀌었고, 그래서 ngserver로 인해 많은 문제에 직면했습니다.컴파일하는 동안 dist 폴더에는 es5 및 es2015 버전이 모두 있습니다.
기본적으로 프로덕션을 위한 컴파일은 IE11과 같은 새로운 브라우저와 오래된 브라우저용 버전을 모두 생성합니다.
개발 환경에서 IE11을 테스트하기 위해 angular.json에서 tsconfig.dev.json이라고 하는 tsconfig의 복사본을 지정한 개발 환경을 만들었습니다. 여기서 tsconfig.dev.json은 대상이 es5로 설정되어 있습니다.실행 s -c=dev 및 voila!
IE를 완전히 지원하려면 mdn-polyfills 라이브러리에서 특별한 polyfills 세트를 가져와야 했습니다.
설치하려면 다음을 사용합니다.
npm i -s mdn-polyfills
다음으로 다음과 같이 polyfiles.ts 파일에 추가합니다.
import 'mdn-polyfills/Object.assign';
import 'mdn-polyfills/Object.create';
import 'mdn-polyfills/Object.entries';
import 'mdn-polyfills/Array.from';
import 'mdn-polyfills/Array.of';
import 'mdn-polyfills/Array.prototype.find';
import 'mdn-polyfills/Array.prototype.forEach';
import 'mdn-polyfills/Array.prototype.filter';
import 'mdn-polyfills/Array.prototype.findIndex';
import 'mdn-polyfills/Array.prototype.includes';
import 'mdn-polyfills/String.prototype.includes';
import 'mdn-polyfills/String.prototype.repeat';
import 'mdn-polyfills/String.prototype.startsWith';
import 'mdn-polyfills/String.prototype.endsWith';
import 'mdn-polyfills/String.prototype.padStart';
import 'mdn-polyfills/String.prototype.padEnd';
import 'mdn-polyfills/Function.prototype.bind';
import 'mdn-polyfills/NodeList.prototype.forEach';
import 'mdn-polyfills/Element.prototype.closest';
import 'mdn-polyfills/Element.prototype.matches';
import 'mdn-polyfills/MouseEvent';
import 'mdn-polyfills/CustomEvent';
이 후에는 IE에서 많은 문제를 경험하는 것을 중단해야 합니다.
저는 단지 저에게 유용한 것을 추가하고 싶습니다.
- 공식 각도 설명서의 이 기사를 읽어 보십시오. https://angular.io/guide/browser-support
- 프로세스에 도움이 되는 또 다른 기사: https://dev.to/paulinhapenedo/angular-8-and-ie-11-1ed2
- 제가 모든 것을 이해하는 데 도움이 된 최고의 기사는 이전 두 기사인 https://medium.com/angular-in-depth/angular-and-internet-explorer-a6e4b5a5dae1 입니다.
간단히 말해서, 당신이 더 이상 읽고 싶지 않다면, 나는 다음 단계를 밟았습니다.
polyfill.ts 파일의 일부 가져오기에 대한 주석을 취소합니다.
'classlist.js' 가져오기;
'web-animations-js' 가져오기;
몇 개의 npm 패키지를 설치합니다.
npm install --save classlist.js npm install --save web-animations-js
브라우저 목록 파일을 수정합니다.파일 끝에서 다음 행을 찾습니다.
not IE 9-11 # IE 9-11 지원의 경우 'not'를 제거합니다.
'not' 단어를 제거하십시오.
또한 polyfills.ts에 Browser Polyfills를 추가하기만 하면 됩니다.
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es/symbol';
// import 'core-js/es/promise';
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';
import 'core-js/es/weak-map';
import 'core-js/es/set';
그고리로.tsconfig.json이렇게 "target"을 es5로 변경합니다.
"target": "es5",
대신에
"target": "es2015",
실행:
ng serve --open
도움이 되길 바랍니다 :)
트target" "es5"로 합니다. »browserslist으로 충분할 그만하면 충분할 거야. .
여기에서 주제에 대해 자세히 알아보십시오. https://blog.ninja-squad.com/2019/05/29/angular-cli-8.0/
저는 비슷한 문제가 있었고 아래 두 가지 수정 사항으로 해결했습니다.당신은 폴리필에 대해 언급하는 많은 게시물을 접했을 수 있지만 IE가 예상대로 작동하지 않는 유일한 이유는 아닙니다.
해결책
angular.json 파일에서 true인 "es5BrowserSupport" 속성을 추가합니다.경로가 이미지에 표시됩니다.
이제 tsconfig.json 파일에서 대상 속성을 "es5"로 변경합니다.
자세한 설명은 여기에서 확인할 수 있습니다.
이 두 가지 수정 사항을 적용함으로써 IE는 로컬(디버깅) 및 프로덕션에서 작업을 시작할 것입니다.
이것은 정말 저를 괴롭혔기 때문에 저는 여기에 정의된 "해결 방법"을 활성화할 nodeJs 스크립트를 작성했습니다: nggithub.
수많은 각진 앱을 만들어내는 엔터프라이즈 개발자가 되는 것은 크롬과 파이어폭스에 대해서만 로컬로 개발하는 것은 좋지 않습니다.웹 개발을 1분 이상 해본 사람이라면 크롬이 멋있어 보인다고 해서 IE가 행복할 것이라는 것을 알 것입니다.스크립트를 설치하고 IE에서 가끔 서비스하고 개발로 푸시하기 전에 IE에서 앱을 로컬로 확인하는 것이 좋습니다.
이것은 차동 로딩이라고 불리는 매우 멋진 각도의 새로운 기능입니다.
<script src=“runtime-es2015.858f8dd898b75fe86926.js” type=“module”></script>
<script src=“polyfills-es2015.e954256595c973372414.js” type=“module”></script>
<script src=“runtime-es5.741402d1d47331ce975c.js” nomodule></script>
<script src=“polyfills-es5.405730e5ac8f727bd7d7.js” nomodule></script>
<script src=“main-es2015.63808232910db02f6170.js” type=“module”></script>
<script src=“main-es5.2cc74ace5dd8b3ac2622.js” nomodule></script>
빌드 폴더에서 위의 index.html이 표시되면 각 js에는 두 가지 버전이 있습니다.
- 와 es2015입니다.
type="module"은 다음과 같습니다. - 의 es5입니다.
nomodule지연 브라우저의 특성입니다.
따라서 Angular cli는 prod에서 정상적으로 생성됩니다.하지만 당신이 도망치고 싶다면,ng serve으로 확인해야 합니다.ng servetsconfig 파일이 "tsconfig"인 .target: es5
각도 8에서 세 가지만 변경하면 됩니다. polyfills.ts와 tsconfig.json을 변경하십시오. 아래 내용의 tsconfig-es5.json이라는 새 파일을 추가하십시오.
{
"extends": "./tsconfig.json",
"compilerOptions": {
"target": "es5"
}
}
tsconfig.json에서 대상을 "target": "es5"로 변경합니다.
다음 명령 "ng serve"를 실행합니다.
1단계: 댓글을 달지 않은 채로 폴리필을 채웁니다.또한 polyfiles.ts 파일에 나와 있는 모든 npm install 명령을 실행하여 해당 패키지를 설치합니다.
2단계: 브라우저에서 IE 9-11 지원이 언급된 위치가 아닌 목록 파일 제거
3단계: intsconfig.json 파일이 "target": "es2015"에서 "target": "es5"로 변경됩니다.
이 단계를 통해 문제가 해결되었습니다.
포함된 항목을 업데이트하는 것은 어떻습니까?browserslist그리고 그것을 제거합니다.not'IE 9-11 이전에... 렇게요?
이 파일은 빌드 시스템에서 아래 지정된 브라우저를 지원하도록 CSS 및 JS 출력을 조정하는 데 사용됩니다.형식 및 규칙 옵션에 대한 자세한 내용은 https://github.com/browserslist/browserslist#queries 을 참조하십시오.
다음을 실행하여 쿼리에 의해 선택된 브라우저를 확인할 수 있습니다.
npx browserslist
0.5% 마지막 2가지 버전 Firefox ESR not dead IE 9-11 # IE 9-11 지원의 경우 'not'를 제거합니다.
언급URL : https://stackoverflow.com/questions/56379067/how-do-i-support-internet-explorer-in-an-angular-8-application
'programing' 카테고리의 다른 글
| MariaDB 완전 텍스트 색인을 사용하지 않는 매우 간단한 MATCH-AGHINE 쿼리? (0) | 2023.07.28 |
|---|---|
| mysql에서 100억 행의 키/값 테이블을 어떻게 정의합니까? (0) | 2023.07.28 |
| 오름차순 및 내림차순 정렬에 의한 MYSQL 순서 (0) | 2023.07.28 |
| PHP에서 2일보다 오래된 모든 파일을 삭제하는 올바른 방법 (0) | 2023.07.28 |
| 전체 텍스트 파일을 C의 문자 배열로 읽는 중 (0) | 2023.07.28 |