JavaScript
Angular4

Angular4プロジェクトがIE11でエラーになる

Angular CLI(1.2.1) を使って、Angular4 のアプリケーションを作っていたときに、IE11 でエラーが出て動かなかった。

SCRIPT5: Access is denied.
File: rcj-99d43ead6bdf30da8ed5ffcb4f17100c.html, Line: 1, Column: 1
SCRIPT5022: Exception thrown and not caught
File: app.js, Line: 1012, Column: 36

error-on-ie11-2.png

ES6 周り?の polyfill が必要だったようで、 src/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';

main.ts の中で import './polyfill.ts' をしたら無事に動作しました。SVG で ngClass を使うときや Web Animations API を使うときなどは、src/polyfill.ts 内の該当箇所をコメントアウトすればIEでも動くみたいですね。

また、CLI ユーザーでない場合は、 polyfill スクリプトをホストWebページ(index.html)に直接追加する必要があるとのことです。

<!-- pre-zone polyfills -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/web-animations-js/web-animations.min.js"></script>

<!-- zone.js required by Angular -->
<script src="node_modules/zone.js/dist/zone.js"></script>

<!-- application polyfills -->