IE9 PathLocationStrategy Angular 4

Question

I'm using IE9 and PathLocationStrategy with Angular4 but it doesn't seem to be working. It just appends "#" infinite time. I tried adding history.js polyfill but nothing seems to be working.

Can anyone help how do I use PathLocationStrategy with Angular 4 and IE9?

Update: I finally figured concluded, we cannot use PathLocationStrategy on IE9. Now I'm trying to figure out how to use PathLocationStrategy on rest of the browser and only if IE9 is present, switch to HashLocationStrategy. I tried to include following line of code inside my module:

RouterModule.forRoot(COMMON_ROUTES, { useHash: !Boolean(history.pushState) }),

I verified that, !Boolean(history.pushState) returns true in IE9 and false in rest of the browsers. But it is not working. Angular defaults to PathLocationStrategy even in IE9. Can someone help?

Answer 1

The Cause

Older browsers [non-evergreen] send page requests to the server when the location URL changes unless the change occurs after a "#" (called the "hash"). Routers can take advantage of this exception by composing in-application route URLs with hashes.

---

The Solution

There is no solution unfortunately...

As stated in the documentation, the HashLocationStrategy is initiated during the bootstrapping process.

... You can switch to the HashLocationStrategy with an override during the bootstrapping process if you prefer it.

This is further reinforced...

You must choose a strategy and you need to make the right call early in the project. It won't be easy to change later once the application is in production and there are lots of application URL references in the wild.

i.e. you need to develop the content to use a specific location strategy and changing strategies will mean you will have to update significant logic and other routing functionality during development, not as an after-thought / at runtime like you desire.