angular: Angular produces Error in IE9 that blocks page load

I’m submitting a…


[X] Regression (a behavior that used to work and stopped working in a new release)
[ ] 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

Angular app is not viewable in IE9. Issue prevents Routes from resolving correctly.

Expected behavior

Angular app can route in IE9.

Minimal reproduction of the problem with instructions

Scaffold a simple app with two routes and observe the route cannot load in Windows 7 IE 9.

TypeError: Object doesn't support property or method 'apply' displays in Developer Tools Console.

When {useHash: true} is omitted from RouteConfig, same issue but the address bar in IE9 is now flickering between /#/ and /#/#/.

If I remove the RouteConfig from the app, IE will load the AppComponent fine.

Follow instructions in this repo with steps to reproduce: https://github.com/steveblue/angular5-ie9-issue

This issue is not only reproducible in app scaffolded with angular-rollup, but also @angular/cli according to the following issue.

https://github.com/angular/angular-cli/issues/6110

What is the motivation / use case for changing the behavior?

Angular should work in IE9 as advertised. Enterprise users depend on IE9 compatibility.

Environment


Angular version: 5.1.1


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
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 6.9.0  
- Platform:  Built on Mac, viewing in Windows

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (2 by maintainers)

Most upvoted comments

@steveblue the polyfills that fixed my initial errors which i have not documented above were:

'angular-polyfills/dist/classlist'; which fixed issues i was having with class binding in templates i.e [class.test-class].
import 'ie9-oninput-polyfill' fixed issues I was having with reactive forms on IE9. specifically deleting a text input was not correctly being reflected in the form value.
import 'console-polyfill'; fixed an issue i was having with the app not loading if the console was not open within IE9.

I added the other polyfills just to be safe

jamiemac87 on Mar 2, 2018

Ok we have traced the issue in Angular 5.2.5 so far to BrowserAnimationsModule and FormsModule. If either of these are injected into our app it results in TypeError: Object doesn't support property or method 'apply' blocking features in apps from loading in IE9. When this issue effected the Router, it prevented routes from resolving. @alxhub @jasonaden IE9 has been broken throughout 5.x can we please get a fix before 6.0.0 is released? Im sure all your Enterprise users will be thankful.

steveblue on Feb 22, 2018

Adding a polyfill for Object.setPrototypeOf will make the Angular 6.0.0 Router work in IE9 (with HashLocationStrategy). https://gist.github.com/edoardocavazza/47246856759f2273e48b

steveblue on May 4, 2018

https://github.com/steveblue/angular5-ie9-animations-issue

^ @matsko github repo with reproduction of the issue with NoopAnimationsModule in IE9

steveblue on Mar 2, 2018

OK, I can verify with the above polyfills that most of Angular will load, but BrowserAnimationsModule is still failing in IE9. IMHO BrowserAnimationsModule should fail silently in IE9 and animations should degrade to just setting CSS properties without a tween @matsko.

Here’s what worked for me (for all the non Webpack folks)

  <!--[if gt IE 9 ]>
  <script src="/lib/web-animations-js/web-animations.min.js"></script>
  <![endif]-->
  <script src="/lib/core-js/client/shim.min.js"></script>
  <script src="/lib/zone.js/dist/zone.js"></script>
  <script src="/lib/ie9-oninput-polyfill/ie9-oninput-polyfill.js"></script>
  <script src="/lib/angular-polyfills/dist/blob.js"></script>
  <script src="/lib/angular-polyfills/dist/classList.js"></script>
  <script src="/lib/angular-polyfills/dist/formdata.js"></script>
  <script src="/lib/angular-polyfills/dist/intl.js"></script>
  <script src="/lib/angular-polyfills/dist/typedarray.js"></script>
  <script src="/lib/console-polyfill/index.js"></script>

When I inject BrowserAnimationsModule or NoopAnimationsModule and use animations in the @Component decorator in IE9. TypeError: Object doesn't support property or method 'apply'

steveblue on Mar 2, 2018