Chrome extension hint.js & ngHintModules - angularjs

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.

Related

After Installing the module H5P I got the message and white screen - The website encountered an error, please try again later

After installing the module H5P, my site wouldn't load and only displayed "Error" The website encountered an error, please try again later
I had to manually disable the H5P modules in the database then clear the cache and a few minutes later the website started loading again. It also seems as if sub-domains couldn't load during this time.
Has anyone else experienced this?
After uninstalling and deleting the H5P module, it still shows on the page: admin/config/system/h5p but when the H5P link is clicked I get a Website encountered an error, please try again later error.
I can't seem to clear the cache via the site admin and I can't save panel pages. It says saved but when i try to access the page url, it says page not found.
Someone else said "I've had the same or similar issue. When I install, I just get a WSOD. I ended up using the missing module cleaner to get my site back to working normal after manually uninstalling it."
I've installed the module missing fixer module and when I enabled the module I got a "Website encountered an error, please try again later error." message but when I refresh the page, it shows the module is enabled.
However, when I click on "configure" from the module list page, it takes me to /admin/config/system with no option to configure the settings or actually use the module.
Should I be looking in the database for something that could fix this issue?
This issue was fixed by truncating every cache_ table in the database.

Templates are not loading in IE11

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

A Batarang issue when build MEANJS demo (Uncaught TypeError: Cannot read property 'getToggleElement' of null)

I'm trying to use AngularJS Batarang when lean to build a MEANJS App.
Here is the tutorial URL: http://www.bossable.com/656/mean-stack-mongodb-angular-scope/
What I find is my "Scopes" tab's presentation is different from the tutorial video and has an error printed.
My result of Batarang Plugin.
A result from the tutorial.
I don't know if it's because the different version of Batarang, or the error printed.
Your error "Uncaught TypeError: Cannot read property 'getToggleElement' of null)" is not related to Batarang, it's actually from angular-ui. It appears when you select an option from a picklist. I believe it has been fixed in the most recent version.
Here are some quick steps to show you how to remove your existing version of AngularJS Batarang, and how to install a ‘working’ version.
Download Batarang from the releases page on GitHub (https://github.com/angular/angularjs-batarang/releases)
Extract the downloaded file
Open a Chrome tab and navigate to to chrome://extensions/
Find, disable or remove any existing versions of the extension that are currently installed
On the top right, the checkbox for “Developer mode” should be checked
Click “Load unpacked extension…”
Select the directory where you extracted the extension
Checkout the video here: http://www.bossable.com/1157/angularjs-batarang-in-chrome/

Angular - blank page, how to diagnose bootstrapping issues?

I have a working (in development) Angular app and I've just got my Grunt distribution script working how I want it to, however when run my app through Grunt and then run it from the distribution folder I just get a blank page, no errors, no logging in console, no missing files in the network tab in Chrome etc, it appears everything loads but nothing happens.
I've run into this issue before during development and thrashed around until it worked, however this is now much more complex due to the minified files in distribution etc.
I'd like to properly diagnose this blank page issue but I'm not sure where to start, it appears that Angular is simply not bootstrapping at all after processing to dist mode.
It appears there is no such thing as a very verbose diagnostic mode for Angular, I've switched to the uniminified and there is nothing reported at all.
I checked the minified html file and my ng-app tag is still there on the html element as it should be so that's not the issue.
Also if I drop to console I can type angular and get back the output for it, so it's there, just not doing anything.
Where to start?
Start with Chrome devtools open when you load the page.
Add $log.debug statements at the top of all your services and controllers.
app.js will not work without the
['paramname1', 'paramname2', function(paramname1, paramname2) {
version (all the other files minify fine with out it.)

ExtJS 4: "c is not a constructor"

I'm using chrome to develop an ExtJS application.
Today I tried to open my app in Firefox 10.0.2 and it doesn't even start up.
I keep getting this Error Message:
c is not a constructor | ext-debug.js (Line 6662)
I'm not sure where to start to get rid of this issue.
That happens when a file that it needs is missing. It's a very generic message, check you have all the files needed via .Requires in your code.
It's caught me out before where I had the right files, but they weren't loading in the order they were being called.

Resources