Angular 4 app broken in IE 11 and Edge

[anilchinnu21]

I'm submitting a ...

[ ] Regression (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

Angular 4 application broken on IE 11 and Edge. app-root is not getting replaced and I get the below error in console.
"Uncaught (in promise): Error: Invalid pointer

Error: Invalid pointer

at nrWrapper (http://localhost:4200/authcallback:19:17804)
at BrowserPlatformLocation.prototype.replaceState (http://localhost:4200/vendor.bundle.js:143464:13)
at PathLocationStrategy.prototype.replaceState (http://localhost:4200/vendor.bundle.js:89385:9)
at Location.prototype.replaceState (http://localhost:4200/vendor.bundle.js:89071:9)
at Anonymous function (http://localhost:4200/vendor.bundle.js:150607:25)
at Anonymous function (http://localhost:4200/vendor.bundle.js:58271:25)
at SafeSubscriber.prototype.__tryOrUnsub (http://localhost:4200/vendor.bundle.js:59237:13)
at SafeSubscriber.prototype.next (http://localhost:4200/vendor.bundle.js:59184:17)
at Subscriber.prototype._next (http://localhost:4200/vendor.bundle.js:59124:9)
at Subscriber.prototype.next (http://localhost:4200/vendor.bundle.js:59088:13)"

Expected behavior

Application should run fine on IE11/Edge as it works perfectly fine in Chrome and Firefox.

Minimal reproduction of the problem with instructions

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

Please tell us about your environment

Angular version: 4.0.0


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 11
- [X ] Edge version 38.14393.1066.0
 
For Tooling issues:
- Node version: XX 
- Platform: 

Others:

[veke]

Do you have polyfills in place? See polyfills.ts file in src folder

[anilchinnu21]

@veke

This is what I have in polyfills.ts file
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/es6/reflect';

import 'core-js/es7/reflect';
import 'zone.js/dist/zone';

[ghost]

Got the same problem, but not in normal IE11, but in an embedded version of IE11.
I got all the polyfills activated, and every npm is up to date.

Since fighting it for days I tried different solutions and one guides me to the suggestion that it's a timing problem of loading the polyfills.

Error reproduction -> Tour of Heroes
I used the tour of hereos app for testing and debugging because routing seems to be the problem.
There is no problem with a blank new "ng new app".
Because my app runs in an embedded version of ie11 i can't use any console.

So I implemented an error handler:

When I just do the alert, the error pops up twice every time i load the script.
When I do the document.write, the page just shows the error and on next load the error is gone and everything works just fine. After resetting the cache, the problem is there again so it's reproducable.

Hope that helps in any way.

[bastienlemaitre]

Same problem but after IdentityServer authentication with this package : angular-oauth2-oidc

Any idea to solve this issue ?

[ghost]

After long hours of searching I found a workaround for the problem at our specific environment (embedded IE).
The problem was a registry key in this folder:

HKLM\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION

There is a key for every application which uses the embedded browser - for example:

Here I found some information about the specific values:
web-browser-control-specifying-the-ie-version

The setting to 11001 means:

11001 (0x2AF9)
Internet Explorer 11.
Webpages are displayed in IE11 Standards mode, regardless of the !DOCTYPE directive.

In our case I had to lower the value to 10000 => IE - Version 10 and use the meta-tag to activate the edge mode and everything works fine.

Registry-Command:
[HKLM\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\MAIN\FeatureControl\FEATURE_BROWSER_EMULATION] XYAPPLICATION.EXE=int:10000

My suggestion:
The IE has a problem with any doctype / meta-tag / polyfill or whatever and jumps into "quirks mode".
As I pointed out before - if you block the page with document.write after the error, reload, everything works fine with the exact same settings (11001).

Hope that helps anyone or gets the team closer to a solution.

[augustbend]

Having the same problem here. We had to reduce the number properties in the object that is passed to the router and it seems to do the trick just fine.

[kchiragowni]

@augustbend can you elaborate what is the number property to reduce?
Thanks

[jonnyaeast]

Same problem but after IdentityServer authentication with this package : angular-oauth2-oidc

Any idea to solve this issue ?

We had this exact problem, as someone said it is caused by the URL being too long because of the JWT token, which breaks in IE when the router attempts to handle it.

As a workaround we created an auth guard and handled all of the auth callback inside of it. This way it occurs before the router attempts to redirect and therefore IE has no awareness of the long URL, assuming your post-auth redirect is to a shorter URL.

[deding]

@jonnyaeast I’ve run into the same problem. Can you share the details of your auth guard workaround?

[jonnyaeast]

@jonnyaeast I’ve run into the same problem. Can you share the details of your auth guard workaround?

So assuming you have a route "/authCallback?token=somereallylongjwtstringofhundrededsofcharacters"

Router:

{ path: 'authCallback', canActivate:[AuthCallbackGuard], component: HomePage }

Guard:

export class AuthCallbackGuard implements CanActivate {
canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        this.handleLogin();     
        return false;
  }

  handleLogin(): void {
  //Parse out the token, do something with it and redirect to the logged in page
}}

[joel-kr]

Same problem but after IdentityServer authentication with this package : angular-oauth2-oidc

Any idea to solve this issue ?

I ran into the same Issue. But after a lot of researches i found this Issue with another Workaround: #22709 (comment)

Workaround
Adding the following line in the index.html of the Angular app helps to avoid throwing the exception.
window.history.replaceState = function (){ console.log('Empty stub for history.replaceState()') };

As @AKlaus described i just edited my index.html File like this and this solved my Issue.

<meta http-equiv="x-ua-compatible" content="ie=edge">
  <script>
    window.history.replaceState = function (){ console.log('Empty stub for history.replaceState()') };
  </script>

[pkozlowski-opensource]

Sounds like cases reported were related to angular-oauth2-oidc so closing it here.

[angular-automatic-lock-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.}