I'm trying to make my web application based on Angularjs work in IE8 and IE11.
After a lot of search, i am asking my question here: is it possible to make an Angularjs application work in IE11? and into IE11 ?
Thanks for advice
I had a problem while loading a angularjs file on IE. It worked perfeclty as expected on Chrome and Firefox but was giving error as angular not defined and what not. After searching on Internet I applied following fix to my code
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
and now it displays the page.
It should work and how you achieve that will depend on the application you are writing. Basically, you have to add extra codes to handle IE8. The AngularJS guide on IE should be a good place to start.
However, there could be situations where you run into problems. For example, when you want to use the "X-UA-Compatible" meta tag. An option could be to use the Google Frame plugin but Google has stopped updates on it from January 2014.
I think your question needs to be more precise about What is wrong with IE11?
I have personally created angularjs applications that works from IE8+ and on all other browsers like chrome, safari, firefox, opera. With all these browsers angular worked just fine.
It is important to mentioned that Microsoft broke the "Internet Explorer" inheritance meaning that internally IE11 is completely different from all other previous versions of IE but being the most advance version of Internet Explorer Angular does not need any particular "adaptation" to work with this browser.
If there is anything you should be worry it is IE8 :) and I am not saying this because of angular but because of IE8 itself.
Related
I have written a frontend for Elasticsearch in AngularJS and it is working fine on Chrome and Firefox, but on some IE11 it is not working at all (some IE11 are working and some are not!)
Not working does mean:
Angular variables are not not interpreted at all and I get it as {{variable}}.
In gerneral my search engine does nothing (no controller call). It seems, that there is no AngularJS code executed at all and the site is a complete mess.
Any ideas?
update
I know, I had too less information but probably I am as confused with this issue as you.
Now I know, that IE11 always sets itself to "Document mode - 7" as shown in this question
How to set IE11 Document mode to edge as default?
There are probably two ways to solve this issue..
My html page can force IE11 to use lates "Document Mode", or
every single user hast to set "Document Mode" to the latest version (don't like that)
Solution
I added this
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
to my index.html to force IE11 to use its latest version, in this case edge
Using straight-out-of-the-box lightbox2 (no edits, no mods). It has worked faithfully for the past couple of years since it's been in use. Suddenly noticed the other day that the image no longer fades in/out using Chrome. Image just displays on a new browser page. Works okay on Edge, but not sure about Safari as I've not yet checked that. Is this a Chrome issue? Any fixes?
I had the same problem. Tried many things.
Then I used "lightbox with jquery" javascript that's on their website: http://lokeshdhakar.com/projects/lightbox2
Update: It is not necessary to combine lightbox with jquery. The issue in my case was that I was using jquery older than version 2. If you user 2.0 or above version of Jquery, lightbox will start working again.
I have an angular application that run ok on chrome and firefox.
But on IE the application does not work.
My Big problem is that I can't find the error reason. and got some generic error.
How can I debug the application on IE or how can I find the reason for the Error
This means that ng module is failing to load. :)
Please look at your browser's console to find if any files are missing or not being downloaded correctly. Also it helps if you click on the link to http://errors.angularjs.org in your console, it will give details about which particular module is failing to load.
Check below link for complete details for resolution:
http://blog.technovert.com/2014/10/dependency-injection-fails-angularjs/
IE Debugging : First of all you need to ensure your Angular application works on IE please consider the use ng-style tags instead of style="{{ someCss }}". The latter works in Chrome and Firefox but does not work in Internet Explorer <= 11. Arguably, this is the biggest annoyance of IE—the page just doesn’t load and doesn’t give any errors. Sometimes you need to view the page again in Firefox. If it’s not an IE specific error, Firebug will pick it up. If Firebug loads normally, the chances are it’s one of two IE specific errors: a trailing comma, or unsupported XML syntax.
For minimize the application files I use
bundles.Add(new ScriptBundle("~/app").IncludeDirectory("~/Assets/app", "*.js", true)
);
(Part of asp.net mvc)
And from the layout page I take all the application files
#Scripts.Render("~/app")
Like I said this part of code worked for me in some browsers, But on IE It fail.
By Changing the script src to all specific files, I resolve this problem. and now on IE it work like the other browsers.
Maybe I miss a comma or ";" (end row) or something like that.
Thanks
need to check this page or api
http://henriquat.re/appendix/angularjs-and-ie8/necessary-changes-for-ie8-compatibility.html
https://docs.angularjs.org/guide/ie
I need to identify if a browser supports the AngularJS.
Based on the result, I need to execute logic to call web pages. Old browsers like IE6 and IE7 do not support AngularJS. So one way to identify if a browser supports it, is by detecting the browser version/type, but I am looking for a more generic way to check support.
From angular's FAQ page
What browsers does Angular work with? We run our extensive test suite
against the following browsers: Safari, Chrome, Firefox, Opera, IE8,
IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari). See
Internet Explorer Compatibility for more details in supporting legacy
IE browsers.
And the IE specifics cab be found here
If you'r looking for a angular.is_this_browser_supported() function, i doubt you'll find any.
UPDATE: There is a workaround to the problem. It is to force IE10 into compatibility mode by including one of the following meta tags:
<meta http-equiv="x-ua-compatible" content="IE=7" />
<meta http-equiv="x-ua-compatible" content="IE=8" />
This is not really a perfect solution for various reasons, but it eliminates the problem at least.
ORIGINAL QUESTION:
I realised a couple of months ago that there is a problem with our Silverlight application in IE10 on Windows 8 (I have not tried the IE10 preview for Windows 7). When the asp.net page hosting our SL app first loads everything works fine and the application loads as expected. If I refresh the page immediately, it also reloads as expected. But: If I focus the Silverlight application by clicking in it and THEN hit F5, it just goes blank. It is like the plugin disappears completely. If I trace the requests using Fiddler I can see that no request is issued for the xap file. I have been hoping that this would be fixed in a patch release for IE10, but so far nothing has changed. I cannot find any information about this when I try googling it. It seems highly unlikely that I should be the first person to discovered it and I am quite surprised that I am not finding more information. To reproduce the issue:
Create a new Silverlight application
Add some sort of content to MainPage.xaml, like a Button or whatever
Run the app in IE10 (on Win8)
Click anywhere within the Silverlight application. This is just to focus the plugin.
Refresh the page (F5)
Result: The Silverlight application does not load and the page is blank.
A few observations:
After the steps above, no amount of refreshing will bring the application back.
After the steps above, if I re-enter the url into the address bar and hit Enter, the application loads as expected.
If I enable Compatibility View in IE, the app also loads as expected. Nothing I do will reproduce the bug when compatibility view is enabled.
Now to my questions:
Has anyone else observed this behaviour?
If so, have you found a workaround?
I'm seeing the same issue with my Silverlight application in IE 10.
I've tried adding the IE 8 compatibility meta tag suggested above, but this does not resolve the problem consistently. It seems to work only intermittently, after say every 5th refresh attempt?!
The only way I can see to work around this consistently is to force the Browser Mode into "IE 10 Compatibility View", and I don't think this can be done via page content (meta tag, etc.)? I've had to remove the IE 8 compatibility meta tag so that the "Compatibility View" button is available in the address bar, and then ask users to click the compatibility button, which is then remembered for the site. This results in the browser entering Browser Mode: "IE 10 Compat View" and Document Mode: "IE7 Standards". The refresh behaviour then works consistently as expected and as it used to.
This is a big problem for us. We've built our Silverlight app such that the browser refresh button is used to refresh pages/content within the app (the users stays logged in, etc.). It's really bad that we have to ask users to set our site to run in compatibility mode for the refresh functionality to work as expected.
Note that this still works as expected in Chrome. It seems silly that we might need to recommend that our users use Chrome because of this issue!
UPDATE:
A workaround for this seems to be to always load the Silverlight object into its hosting page dynamically using JavaScript.
E.g.
function onLoad() {
var silverlightControlHost = document.getElementById("silverlightControlHost");
silverlightControlHost.innerHTML = "<object ...
UPDATE 2:
Here is the latest code I use to work around this issue:
...
function unloadSilverlight() {
document.getElementById("silverlightControlHost").innerHTML = "";
}
function focusOnSilverlight() {
document.getElementById("silverlightObject").focus();
}
function onLoad() {
window.onbeforeunload = unloadSilverlight;
setTimeout(focusOnSilverlight);
}
</script>
</head>
<body onload=" onLoad() ">
...
I still had issues with the solution presented by Chris.
This works perfectly for me though:
window.onbeforeunload = function () {
var silverlightControlHost = document.getElementById("silverlightControlHost");
silverlightControlHost.innerHTML = "";
}
I solved the problem in a very easy way. I Wrote a javascript code at the end of the page (or after the object tag in where is your silverlight app) and set the focus to another element, for example, a link. Example:
<object id="silverlightHostControl">...bla bla bla</object>
<script type="text/javascript" language="javascript">
var shc = document.getElementById("silverlightHostControl");
document.getElementById("myLink").focus();
</script>
The shc var is useless, I put just for clarify. Remember: your javascript code must set the focus to another (but focusable) object AFTER the silverlight app object tag was parsed, which means your js code is writen after silverlight app object.
In answer to your question #1, this is happening with our Silverlight apps as well. The only workarounds are 1) restart the browser or 2) switch to compatibiity mode.
It apparently is a bug in ie10.
Thanks for all workarounds solution but this is obviously a bug with Silverlight plugin.
We have raised few tickets directly with Internet explorer development team and they said the issue is from an external problem. It is not a good answer from Microsoft.
Anyway, this time our developers raised ticket through Silverlight development team which still waiting for their response. To get a good response from them, we need to get more people who are facing this issue.
You can vote this issue from Connect website which is Microsoft's official bug reporting platform.
The link to our ticket is: http://connect.microsoft.com/VisualStudio/feedback/details/789004/ie10-shows-blank-page-upon-refreshing-silverlight-app
Cheers
Moh
Yeah i am also facing same issue with one my application. If i opens help of my application in IE 10 then i have to refresh the page each time to view the contents.
I have two workaround for this issue:
1. Press ALT key once
2. Open IE in compatible mode