Angular on IE 11 intranet - programmatically disable Compatibility View
I'm running an Angular 6 app on company intranet via IE11. My app compiles to ES5 according to tscnfig.json. I've uncommented and installed all of the IE compatibility lines in polyfills.js. I've also added the suggested meta tag <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> just below my <head> tag.
None of this had had the intended behavior of programmatically disabling IE's default Compatibility View settings. By default, IE11 displays intranet sites in Compatibility View, which breaks Angular. The only solution I've been able to find is having every one of our users go into their IE's Compatibility View Settings and uncheck this box:
This is less than desirable. Is there something else I can try? In some places I've read that there's no workaround for this - and in others, I've read the IE=Edge meta tag is the solution - but I've found the meta tag fix to be fake news...that I can tell you.
I went back and looked closer at my index.html file. The only changes I made was that we had a duplicate meta tag that was commented out, and some extra spacing between our Edge meta tag's attributes and the /> at the end.
I erased all of these and now the app works regardless of the settings. I tried to play around with deleting some spaces but not others, or not deleting the commented code vs deleting it - the change from the app working to not working at that point seemed random and didn't really add up (server lag?) - so I couldn't pinpoint the cause. But I do know that once I removed all of the excess spacing and the commented out meta, it works - despite me thinking this wouldn't matter.
Made sure I cleared cache, etc before testing each time, and had my team mates try on their machine. I hope this solved the issue and it's not more random than that. If it breaks again, I'll update this thread, but for now its working. Thanks to all who commented.