Angular For IE(with CLI)

angular로 프로젝트를 개발하던 중 큰 난관에 봉착했습니다. 그것은 프론트개발자라면 누구나 사라졌으면 하는 그것… 크로스 브라우징 이슈입니다. 분명 크롬에서는 잘 돌아가던 것들이 ie에만 가면 깨지고 에러나고…

angular공식 홈페이지에서는 크로스브라우징 이슈를 해결하기 위한 내용을 포함하고 있습니다. 공식 홈페이지에서는 아래와 같은 방법으로 polyfill할 것을 권장하고 있습니다.

<script src="node_modules/core-js/client/shim.min.js"></script>

angular CLI 에서는 크로스 브라우징 이슈를 해결하기 위해 polyfill 을 직접 구성할 수 있습니다. angular CLI를 살펴보면 /src/polyfills.ts이라는 파일이 있으며, 여기에 import되어있는 모듈이 webpack을 통해 번들링 되어 어플리케이션에 포함되도록 되어있습니다.
한국 웹시장의 특성상 아직 IE를 포기할 수 없기때문에.. IE호환을 위한 polyfill들을 추가해 봅시다.

/** 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';
import 'core-js/es7/object';

es6 polyfill들이 포함되어 있네요. map, set 등도 사용 할 수 있고, date, object, string등의 자료형에도 추가된 메소드나 프로퍼티를 사용할 수 있도록 지원해주는 모양입니다. 여기서.. core-js라는 npm패키지가 눈에 띕니다. 이건 뭘까요? JavaScript를 pollyfill을 모듈별로 분리해서 제공하는 라이브러리라고 보시면 될 것 같습니다. 관련 github은 여기를 참고해주세요.

헌데 pollyfill을 위해서 저렇게 모듈을 하나하나 import 해줘야 하다니… 불편하지 않나요? core-js에서는 기본적으로 모듈을 한번에 포함시킬 수 있는 방법이 있습니다.

import 'core-js'; 표준 및 비표준의 모든 기능을 포함합니다.
import 'core-js/library'; 위와 비슷하지만 전역 네임 스페이스를 오염시키지 않습니다.
import 'core-js/shim'; 표준 기능만 포함합니다.

위 파일중에 shim을 열어보면..

require('./modules/es6.symbol');
require('./modules/es6.object.create');
require('./modules/es6.object.define-property');
require('./modules/es6.object.define-properties');
require('./modules/es6.object.get-own-property-descriptor');
require('./modules/es6.object.get-prototype-of');
require('./modules/es6.object.keys');
...
...

이렇게 각 모듈들이 import되어 있습니다.

또한 es버젼별로도 polyfill할 수 있습니다.
import 'core-js/es5';, import 'core-js/es6';, import 'core-js/es7';

물론 이렇게 한번에 import하는게 개발할때는 편하겠지만, 쓰지않는 메소드 들도 포함될 수 있으니, 개인적으로는 그때그때 필요한걸 찾아서 추가하는것을 좋아합니다.

Angular에서 권장하는 polyfill은 몇가지가 더 있습니다.

classlist

import 'classlist.js';

IE10과 11에서 SVG요소에 대한 NgClass지원을 위해 필요한 pollyfill입니다. 이는 core-js에 포함 되어 있지 않기 때문에 npm install --save classlist.js 명령을 통해 설치해야 합니다. 당연히 SVG를 사용하지 않거나 SVG에 NgClass 디렉티브를 사용하지 않는다면 포함시킬 필요 없습니다.

animations

import 'web-animations-js';

Angular에서 제공하는 Animation을 사용하기 위해 필요한 pollyfill입니다. 마찬가지로 npm install --save web-animations-js를 통해 설치해야 합니다. ie10, 11, 파이어 폭스에서 필요합니다.

intl

import 'intl';  // Run `npm install --save intl`.

Angular의 pipes 기능에서 날짜, 통화, 정수, 퍼센트 등을 사용하기 위해 필요한 패키지입니다. Chrome, Firefox, Edge, IE11, Safari 10을 제외하고 모두 필요합니다.