Angular-cli: New angular 5 app does not work in Internet Explorer 9 and 10

[Rajnii]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

New angular 5 app generated using angular cli does not work in IE 9 and 10. We get the following error:
DOM7011: The code on this page disabled back and forward caching. For more information, see: http://go.microsoft.com/fwlink/?LinkID=291337 File: localhost:4200 HTML1300: Navigation occurred. File: localhost:4200 SCRIPT1002: Syntax error File: vendor.bundle.js, Line: 446, Column: 1 SCRIPT5011: Can't execute code from a freed script File: zone.js, Line: 2783, Column: 17

Expected behavior

New app should work fine on IE 9 and 10, as given in documentation

Minimal reproduction of the problem with instructions

Create a new app using ng new newapp. cd into the directory. Runnpm install and ng serve.

Environment

Angular version:  5.1.3


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [x] IE version 9 and 10
- [ ] Edge version XX

For Tooling issues:
- Node version:  6.10.0  
- Platform:  Windows 8.1 

[tonny008]

did you import the polyfills, you need to enable the 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/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`.

[snow-snow]

I did enable the polyfills like what you show, but it still not work. I get the err 'script1002' in Ie9.
This is my 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.

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

/**

• Required to support Web Animations @angular/animation.
• Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-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';
  ```

[Rajnii]

Yes I did enable the polyfills. I have discovered that the build is rendered properly in IE 9 on enabling the polyfills, and disabling web-animations-js. I am worried that after disabling web-animations-js, things may break in other browsers. Is there any way to implement web-animations-js in supporting browsers, while allowing graceful fallback in IE 9 and unsupported browsers?

[clydin]

Runtime support for polyfills is not currently a capability of the CLI but it is something that we are looking at for a future version.

[akuji1993]

@clydin Does that mean, polyfills won't work while testing the app locally? And will then work if you build and export it?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}