Angular-cli: polyfills.ts not working for IE9

Created on 1 Sep 2017 · 8Comments · Source: angular/angular-cli

Versions.

Output from: ng --version.
@angular/cli: 1.1.3
node: 6.9.1
os: win32 x64
@angular/animations: 4.3.6
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/material: 2.0.0-beta
@angular/platform-browser: 4.
@angular/platform-browser-dyn
@angular/router: 4.3.6
@angular/cli: 1.1.3
@angular/compiler-cli: 4.3.6

Windows 7 64bit

Repro steps.

i create a new project using ng new my-app, and i modify the polyfills.ts to support IE9 as the annotation suggests and ng serve successfully. But it not work in IE9.

The log given by the failure.

SCRIPT5007: Object expected
File: polyfills.bundle.js, Line: 10516, Column: 23868
[HMR] Waiting for update signal from WDS...
SCRIPT5022: reflect-metadata shim is required when using class decorators
File: vendor.bundle.js, Line: 53400, Column: 13

Desired functionality.

hope angular app can run nicely in IE9

Mention any other details that might be useful.

I test the IE9 compatibility in IE11 console which has a select on the top right corner allowing us to switch the IE version.

Source

yangyuhe

Most helpful comment

OK, so if your site needs to run in IE 9, the web-animations import needs to be commented out in polyfills.ts. But if I comment it out, then animations won't work in browsers other than "Chrome, Firefox and Opera" (per the comment in polyfills.ts).
Is there a way to import web-animations where it's needed and will work, but exclude it from IE 9?

pevans360 on 21 Nov 2017

👍16

All 8 comments

this is the polyfills.ts i modify.
/**

This file includes polyfills needed by Angular and is loaded before the app.
You can add your own extra polyfills to this file.
*
This file is divided into 2 sections:
1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
1. Application imports. Files imported after ZoneJS that should be loaded before your main
file.
*
The current setup is for so-called "evergreen" browsers; the last versions of browsers that
automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/

/*********************************

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/weak-map';
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.

/** IE10 and IE11 requires the following to support @angular/animation. */
import 'web-animations-js'; // Run npm install --save web-animations-js.

/* Evergreen browsers require these. */
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

/* ALL Firefox browsers require the following to support @angular/animation. */
import 'web-animations-js'; // Run npm install --save web-animations-js.

/*********************************

Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.

/*********************************

APPLICATION IMPORTS
*/

/**

Date, currency, decimal and percent pipes.
Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
/
import 'intl'; // Run npm install --save intl.
/*
Need to import at least one locale-data with intl.
*/
import 'intl/locale-data/jsonp/en';