It’s an unfortunate fact that some users out there are still on old versions of Internet Explorer. Despite Microsoft’s recent efforts to finally put them down and sweep any memory of their existence away, developers still have to ask that hard question:
“Do I really need to support IE7/8/9?”
I really want to say ‘no’. If we all just say no, everyone will have to upgrade and we can drop all the ugly hacks, workarounds, and so on from our code.
But that perfect world isn’t quite here yet. So I got to spend some time making our Angular/Django app work on IE7/8 (Angular is pretty good with 9- though there is one cool/crazy bug below). My answer? Set up a conditional comment to check for IE < 9. If true, a Django route takes over, redirecting the user of an antiquated browser to our back up page- just a basic notice of what we do, with a simple contact form.
Modern browser users will never see this ugly piece of crap. Is it the best answer? I don’t know- but it does work. And it was kind of fun re-living some of the old hacks (I started developing more into the IE9 phase, but legacy support, blah blah blah). Our lead didn’t want to use Jquery (I really like jQuery, so I resisted, but there are good reasons to leave it out of an Angular project- coming in a future blog!), so I had to go look up the old syntax for getting elements from the DOM. I remember that getElementById works even that far back, but always forget that the entire back half of innerHTML is capitalized. And actually- knowing I only needed to support IE meant that it wasn’t that hard not using jQuery. You don’t get all the cool animation type stuff that’s built in, but from a functional standpoint, it worked pretty well.
Except one little thing. Back to the IE9 bug.
Because we decided to let IE9 users access the full app (Angular officially supports 9), I didn’t set up a redirect- IE9 users go to the homepage and can access the whole shebang. However, some of our Angular routes just weren’t working. The view section was blank. Checked the devtools and saw I was getting a 404 not found from Django on my partials that should have returned the proper template. Worked fine in FF/Chrome/new IE, so I couldn’t for the life of me figure out what was going on.
Turns out, IE9 ignores the html <base> tag. It seems to have no effect if you just drop it in your code as normal, so the links within the app weren’t using the proper relative path- they were trying to look in the same ‘folder’ (which didn’t exist).
After some Googling (thanks Stack Overflow), I found that answer above. And a cool trick- just set the base tag, then directly below, add a simple JS function to add the base tag again. Started working perfectly after that.
fix is easy js iife- but how long would it have taken me to figure out if not for the internet!