Fixing AngularJS problems in IE8
Question
I've developed an app with AngularJS 1.2.13 (and JQuery 1.11.0) on Firefox. It also works fine on Chrome. Now for the hard part. I've followed several advices for getting this to work on IE8.
When I load the page, I currently get the very useful "[object Error]" (and nothing else) in the JS console in the dev tools window. The page shows the raw html as downloaded, so Angular basically was able to do nothing.
Here's the top of my index.html:
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app="DiagApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--[if IE 8]><!--> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <!--<![endif]-->
Even though I am NOT in quirks mode (in the dev tools window, the "Document mode" says "IE7 standards", not "Quirks Mode"), I still get the following:
[$sce:iequirks] Strict Contextual Escaping does not support Internet Explorer version < 9 in quirks mode. You can fix this by adding the text <!doctype html> to the top of your HTML document. See http://docs.angularjs.org/api/ng.$sce for more information.
http://errors.angularjs.org/1.2.13/ $sce/iequirks angular.js, line 3689 character 19
So, I added the following to my config function in the module, which fixes this:
$sceProvider.enabled(false);
When I view the HTML in the "scripts" tab, it all appears to be colorized properly, which indicates to me it validated correctly (I had earlier discovered one typo in my HTML that caused this to not colorize correctly (a typo which Firefox and Chrome ignored)).
I set breakpoints to show that it's loading my modules, and also in the main controller. That shows me it's loading the modules, but it never hits my main controller. I tried setting some breakpoints in the angularjs code, but that led to all sorts of twisty passages with no obvious value.
I heard mention of some polyfills I should use for <=IE8, but I've only noticed mentions of polyfills for <=IE7.
Anything else I can try?
2 answers
solution1
2 2014-07-14 11:02:29
There are a few factors to consider if you want support for your Angular app in IE8, namely:
- You'll need to polyfil your JSON to take care of stringify and parse functions not supported natively by the older IE versions
- You'll need to explicitly create any custom HTML element tags (custom HTML tags are not supported in IE8 or below)
- You'll need to get rid of any miscelanious 'doctype' nonsense You'll need to use the "ng-app" attribute (I note you've already taken care of this one)
- You'll need to create polyfills for some JS functions that IE 8 doesn't support natively, for example 'forEach'
From the HTML I've seen (above), it looks like you need to modify your HTML header further for a start. In my case I have a shared '_Layout.cshtml' page where I do the following changes once and once only:
<!--[if lte IE 8]>
@Styles.Render("~/Content/iecss")
<script src="~/Scripts/Libs/respond.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-pluralize');
document.createElement('ng-view');
document.createElement('ng:include');
document.createElement('ng:pluralize');
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="~/Scripts/Libs/json2.js"></script>
<![endif]-->
<!--[if lte IE 8]>
<script>
document.createElement('my-editor');
</script>
<![endif]-->
solution2
0 2014-07-14 15:27:06
When i have to support quirks mode i've found that once you've set $sceProvider.enabled(false); and added all the shims, you'll also need to polyfill indexOf and filter . Recently i've been using https://github.com/es-shims/es5-shim which does the trick.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.