Templates are not loading in IE11 - angularjs

My ui-router and custom directive templates are not loading in Internet Explorer 11. This is the error for each one:
[$compile:tpload] Failed to load template: blah/blah.html (HTTP status: undefined undefined)
Everything is working fine in Chrome, Firefox and Edge.
Any pointers or guesses of why this maybe happening would be greatly appreciated.

For JavaScript, In Internet Explorer, there is normally an issue because of 'use-strict' mode. If your application appears to somewhere have an object with two properties of the same name, 'use-strict' will cause it to crash.
For HTML, there must be a missing closing or an opening tag which is not rendering the pages

OK, this is fixed. There was an ES6 endsWith() method being used which is unsupported in IE11. There was no error regarding this in the console - I found the issue by ensuring "Break on all exceptions" was select in the IE dev tools debugger. The fix was to simply add a polyfill https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/endsWith

Related

'Uncaught TypeError: angular.module(...).run(...) is not a function' in Grunt minified js-file

My code works on development mode, uncompressed. But when I use grunt's minify functionality and run the app in production mode, I get that error: Uncaught TypeError: angular.module(...).run(...) is not a function.
When I look into the error in Google Chrome Developer Tools, I get what you see in the screenshot. Does anybody understand where the problem is?
I am using Angular 1.4+ in Angular-Fullstack. The error occurs in vendor.{{randomstring}}.js.
Thanks for any support!
You have 2 issues here.
Dependency injection. You can edit manually the archives or use https://github.com/mgol/grunt-ng-annotate this will do this automagically for you.
Concatenation. Check this grunt plugin https://github.com/gruntjs/grunt-contrib-concat the issue here is javascript dont understand when a function end/start because dont have a separation mark, check where the error is.
})(function(a,b) {
It should be:
});(function(a,b) {
Check the "Concatenating with a custom separator" example of grunt-contrib-concat

Network Error 0x2ee4 in IE10 for angular directives

Directive html files do not load in IE 10 and prompt with network error 0x2ee4. Issue occurs on VMs only.
Behavior is random. Few files load sometimes.
Error is somewhat similar to
https://connect.microsoft.com/IE/feedback/details/852785/ie10-network-error-0x2ee4-https-proxy-ajax
I need a fix in IE10. Any help.
Screenshot of root

AngularJS not working on some browsers/devices

I'm using Angular on my site, but I've been having reports on it often not working. Often users have to try different browsers/devices to get it to work. On my computer it works fine on Chrome, Opera and Firefox, latest versions. I've had reports of the page not working for visitors when using Firefox (version 31.6.0) and Safari though.
I have a smartphone of brand Öwn (Chilean or Peruvian I think), and the angular code does not work on this phone. I've tried using Chrome and the Öwn browser (some browser of their own). I have expandable content powered by jQuery, and that works fine, so it's definitely only Angular the page has problems with.
I tried removing all dependencies (using ngAnimate and ui.bootstrap for datepicker, and ngDialog), but still doesn't work on my phone.
I'm sorry I don't have more details. This is the page where the problems happen:
https://www.easterisland.travel/tours/
Does anyone have a clue? Thank you!
The problem in the end was in the code of an Angular function. When declaring a new object, I hadn't applied a value to one of the variables. This:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP};
should have been this:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP: savingsPP};
It was tricky since some browsers accepted it (Chrome and later Firefox) but many didn't. To locate the problem I checked error console of Safari Mac, and all it said was that angular.min.js.map and angular-animate.min.js.map were missing. .map files are for showing debug messages with minified code. Once the .map files had been added (find .map files for angular here, clicking folder for your angular version), the error console showed me exact location of the error.

Chrome extension hint.js & ngHintModules

Our angular app sometime does not load on chrome canary (Version 41.0.2237.0 canary (64-bit)) saying
Failed to instantiate module ngHintModules due to: RangeError: Maximum
call stack size exceeded
But it loads fine in firefox, chrome (Version 39.0.2171.71 (64-bit)), safari.
Probably not sure whether there is something to do with angular or not.
Full error
Uncaught Error: [$injector:modulerr] Failed to instantiate module ngHintModules due to:
RangeError: Maximum call stack size exceeded
at Array.forEach (native)
at module.exports (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2333:21)
at module.exports (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2384:5)
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2387:7
at Array.forEach (native)
at module.exports (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2385:21)
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2387:7
at Array.forEach (native)
at module.exports (chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2385:21)
at chrome-extension://ighdmehidhipcmcojjgiloacoafjmpfk/dist/hint.js:2387:7
NB: The Error I am showing here is from
Version 41.0.2237.0 canary (64-bit)
I also had this problem which was resolved by disabling Batarang.
This issue is opened on the Batarang Github here: https://github.com/angular/angularjs-batarang/issues/156
You can load the prior version of Batarang from this zip file: https://github.com/angular/angularjs-batarang/archive/v0.4.3.zip
Open More Tools->Extensions in Chrome
Locate AngularJS Batarang and click on the trash can to remove the extension
Download the .zip
Extract the file
Open More Tools->Extensions in Chrome
Check Developer Mode at the top
Click 'Load unpacked extension'
Select the directory where you extracted the zip
If you get an error about the manifest file, then you probably selected one directory level too high. Make sure that you select the bottom level angularjs-batarang-0.4.3 directory
Load up an AngularJS page and use Batarang again with Inspector just like before
This will restore the previous version which while having issues does have some mostly working features like Performance profiling, scope inspector, options, and a help tab which are gone from the latest version. The 0.7.1 version fixes the major breakage of apps, but it only provides the scope tree (no inspector) and the new angular-hint functionality.
You don't need to disable Angular batarang; just do the following:
Open the developer tools and navigate to the hint.js file (the one that is triggering the stack overflow)
Go to line 453 add add a breakpoint
reload the app, and when it hits the breakpoint just comment it out (setupModuleLoader(window)) and click continue
It will still throw an exception, (Uncaught ReferenceError: angular is not defined) but you will be able to run batarang
I know it's not the best solution, but that's the quickest thing I could find without going too deep into the problem
Update:
Checking more to what is happening I noticed that the problem happens when we have define multiple modules and we are adding the same dependencies for all of them.
for example:
angular.module("app", ["moduleB", "moduleC"]);
angular.module("moduleB", ["moduleC"]);
When I define the moduleB without passing the same deps with it's parent module, then there is no stack overflow.
angular.module("moduleB", []);
Our team just experienced this error and it was fixed by updating the Batarang Extension in Chrome to the latest.
Update...
With the new update of Chrome, the problem is back, so if anyone experienced this error, revert back to previous build of Chrome.
All builds available here, don't pick the first one.
http://www.slimjet.com/chrome/google-chrome-old-version.php
Then it should work fine!
I had the same problem with GitHub pages site (with Jekyll).
Searched for hours why does AngularJS app didn't show up (ng-cloak was never resolved).
Figured out that was Batarang which causing the issue.
Great thanks for #kpg's answer.

DotNetNuke Error: Document.load() is deprecated

I am receiving an error:
Use of Document.load() is deprecated. To upgrade your code, use the DOM XMLHttpRequest object. For more help https://developer.mozilla.org/en/XMLHttpRequest
https://www.boldgroup.com/
Line 83
When attempting to load my website in Chrome, I also get this error in Firefox. This is causing the website background to not display and the menu's to not display correctly. How can fix this?
It looks like that script is coming from your skin (minimalist-gray-glass). Try using a different skin, or checking with the skin developer to see if there is an update.

Resources