Internet Explorer 11에서 Angular 10 실행

Are you worried that new angular 10 project is not running in "IE11" even
though you enable the given polyfills by angular team? Then please read
this article.

Angular 10 기본 tsconfig 대상은 es2015입니다.

Angular 10 앱에는 대상 컴파일 버전이 es2015로 제공되므로
tsconfig.json 파일.

IE 11 Polyfills.js 활성화

polyfills.js로 이동하여 IE11용 가져오기 아래의 주석을 제거하십시오.

import 'classlist.js'; // Run `npm install --save classlist.js`.

노드 패키지 설치:

npm install --save classlist.js

polyfills.js에서 core-js 가져오기

core-js를
폴리필. 따라서 polyfills에서 core-js를 가져오십시오.
import 'core-js'
그런 다음 core-js를 설치하십시오.

노드 패키지 설치

npm i core-js

옵션-1: tsconfig에서 컴파일러 옵션을 es5로 변환

기본 클라이언트가 IE11인 경우. 그런 다음 간단한 옵션은 다음으로 이동하는 것입니다.
프로젝트의 루트에서 tsconfig.json을 만들고 대상 값을 다음으로 변경합니다.
ES5



이 옵션은 항상 두 가지 모두에서 작동하는 IE 호환 형식의 번들을 생성합니다.

옵션-2: es5 별도의 tsconfig 유지

es2015 및 es5 버전을 모두 유지하려면 다음을 따르십시오.

새로 만들기tsconfig-es5.app.json

대상 es5 추가

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "target": "es5"
  }
}

아래의 angular.json로 이동projects:<YourAppName>:architect:build:configurations 추가

 "es5": {
            "tsConfig": "./tsconfig-es5.app.json"
        }

및 projects:<YourAppName>:architect:serve:configurations 추가 👉 변경
yourappname을 프로젝트 이름으로 바꿉니다.

package.json에 아래 스크립트를 추가합니다.

"build:ie":"ng build --configuration es5",
"build:ie:prod":"ng build --configuration es5 --prod",
"start:ie":"ng serve --configuration es5"

이제 IE 실행에서 프로젝트를 열려면npm run start:ie
이제 IE 호환 실행에서 프로젝트를 빌드하려면npm run build:ie
이제 IE 호환 Prod 모드 실행에서 프로젝트를 빌드하려면npm run build:ie:prod

참조

How to run Angular 10 in IE

풀 스택 개발자 되기 💻

풀스택 개발자가 되어 캐리어를 새로운 소프트웨어로 성장시키고 싶다면
개발자 또는 리드 개발자/아키텍트. 전체 스택 구독을 고려하십시오.
개발 교육 프로그램. All-Access Monthly 멤버십 플랜이 있으며
모든 비디오 코스, 슬라이드, 소스 코드 및
월간 화상 통화.

구독해주세요
All-Access Membership PRO plan에
현재 및 미래의 각도, node.js 및 관련 과정에 액세스합니다.

구독해주세요
All-Access Membership ELITE plan에
PRO 계획에서 모든 것을 얻으십시오. 또한 매월 액세스할 수 있습니다.
Rupesh와의 라이브 Q&A 화상 통화를 통해 의심/질문을 하고 더 많은 정보를 얻을 수 있습니다.
도움말, 팁 및 요령.

You bright future is waiting for you so visit today
FullstackMaster and allow me to help you to board
on your dream software company as a Developer,Architect or Lead Engineer role.

💖 나에게 👋라고 말해!
루페시 티와리
www.rupeshtiwari.com
✉️ Email Rupesh
Fullstack Master의 설립자