I am aware of siiar questions, such as Angularjs 1.7.9 - Possibly unhandled rejection and those mentioned in it as duplicates.
However, my code does not use promises (that I am aware of; certainly no $promise or $http).
I am just knocking up a simple ui-router demo for a friend. It is just two views, each with a button that toggles to the other view. It works just fine with AngulrJs 1.5, and breaks with the above error in 1.7.
A simple as it is, it's a bit too much code to post. In case, rather than finding the error in my code, I woudl like a canonical answer to help others who read this question in future : how to go about denugging this error message?
Error: transition failed (caused by "Possibly unhandled rejection: {}")
at r [as $get] (http://localhost/common/js/third_party/ui-router_zero_pint_2_point_11/angular-ui-router.min.js:7:11365)
at Object.invoke (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:45:62)
at http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:46:365
at d (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:43:495)
at e (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:44:235)
at Object.invoke (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:44:320)
at http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:47:18
at r (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:8:76)
at fb (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:46:499)
at c (http://localhost/common/js/third_party/angular-1_point_7_point_9/angular.min.js:22:57)
The latest version of UI-router (1.0.25) solved the problem. Feel free to post an answer.
You will get a more informative stack trace if you use angular.js instead of angular.min.js and angular-ui-router.js instead of angular-ui-router.min.js. Angular-UI-Router uses promises in its transition module. It looks like you upgraded your version of AngularJS without upgrading the version of Angular-UI-Router. Upgrade your router from V0.2.11 to V0.4.3. It looks like your problem is caused by sloppy Angular-UI-Router code. If they didn't fix the issue by V0.4.3, you can either patch the library or live with the messages.
Debugging "possibly unhandled rejection"
The stack trace will show the file and the line number from which the error originates. Examine the code and fix the problem. If the error orginates in a third- party library, try upgrading to the latest version or contacting the third-party library vendor.
As a last resort, disable the "possibly unhandled rejection" messages:
app.config(functon ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
});
This is not recommended as it allows other problems to silently fail.
If one doesn't care about a specific promise failing, add a .catch handler:
$http(config).then(function(response) {
//...
}).catch(function(response) {
//I don't care about errors
if (debug) console.log(response);
//Re-throw error response
throw response;
})
Upgrading AngularJS
When upgrading AngularJS, it is best to upgrade all of the AngularJS modules at the same time. That is when migrating from angular.js#1.4 to angular.js#1.5, at the same time upgrade to angular-animate#1.5, angular-resource#1.5, angular-route.js#1.5, etc. I have seen unpleasant problems when trying to mix and match versions of AngularJS modules.
When migrating, I recommend upgrading one minor version at a time. For example, upgrade from V1.4 to V1.5 first, fix what breaks, then upgrade to V1.6.
The current version is 1.7.9 pollution-eradication (2019-11-19). I recommend using the latest version as the AngularJS team has committed to fixing security bugs only in both V1.2.x and the latest version.
For more information, see
AngularJS Developer Guide - Migrating from Previous Versions
AngularJS Version Support Status - Long Term Support
Upgrading Angular-UI-Router
UI-Router for AngularJS has two major versions
Version 0.4.3 UI-Router-Legacy
Version 1.0.25 UI-Router for AngularJS
I recommend upgrading to the latest version of UI-Router-Legacy before migrating to the latest version of UI-Router for AngularJS. There have been major breaking changes between the two and it is best to deal with it incrementally.
For more informaton, see
Angular-UI Guide: UI-Router 1.0 Migration
One way to debug ui-router is the following:
From the console inject the $state service typing the following:
var test = angular.element(document.body).injector().get('$state');
Then simulate and perform the transition that causes the problem:
test.go('root.details') // use the state url here
After that, details of the transition will be printed in console. Into $$state object, you may find more details about the failed transition and reasons of failure:
Related
I'm getting the following error message when attempting to do a gulp serve on my AngularJS (ver 1.6.10) app:
Error: [$injector:modulerr] Failed to instantiate module myAppName due to:
$compileProvider.preAssignBindingsEnabled is not a function
#http://localhost:9805/app/scripts/app.js:43:9
invoke#http://localhost:9805/lib/angular/angular.js:5108:16
runInvokeQueue#http://localhost:9805/lib/angular/angular.js:4997:11
loadModules/<#http://localhost:9805/lib/angular/angular.js:5007:11
forEach#http://localhost:9805/lib/angular/angular.js:387:11
loadModules#http://localhost:9805/lib/angular/angular.js:4987:5
createInjector#http://localhost:9805/lib/angular/angular.js:4904:19
doBootstrap#http://localhost:9805/lib/angular/angular.js:1936:20
bootstrap#http://localhost:9805/lib/angular/angular.js:1957:12
angularInit#http://localhost:9805/lib/angular/angular.js:1842:5
#http://localhost:9805/lib/angular/angular.js:35431:5
mightThrow#http://localhost:9805/lib/jquery/dist/jquery.js:3534:21
The calling code looks like this:
/*
* Main module of the application.
*/
angular
.module('dataPipelineApp', [
//various parameters
])
.config(['$compileProvider', '$httpProvider', '$breadcrumbProvider', function ($compileProvider, $httpProvider, $breadcrumbProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
$compileProvider.preAssignBindingsEnabled(true); //err here
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
$compileProvider.debugInfoEnabled(false); // speed up angular performance to not print debug info;
$breadcrumbProvider.setOptions({
templateUrl: 'app/views/headerBar.html'
});
//$httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
$httpProvider.interceptors.push("AddToken");
$httpProvider.interceptors.push("UnauthorizeInterceptor");
}])
Similar searches seem to insist that this is a versioning discrepancy. Similar searches for this issue also seem to say there is an issue with the versioning of angular-mocks, however we are not using angular mocks at all. I have tried downgrading my Angular to 1.5.5, which other searches suggest you cannot exceed - despite all my colleagues running this on Angular 1.6.10 or higher. I have also tried using npm to install angular-mocks, despite being unused, and syncing the version to match that of our Angular, but to no avail. I'm really not sure what to do, nor am I sure what's actually happening, why can't it find that function?
EDIT: I also checked in the browser, searching using the console by running a angular.version search - and it turns up 1.7.2 as my Angular version, despite me redoing gulp build and gulp inject serve after npm installing the older versions. It seems it isn't properly choosing the right version - is there something I'm missing to enforce the downgraded installations?
The $compileProvider.preAssignBindingsEnabled flag is deprecated in AngularJS V1.6 and has been removed from AngularJS V1.7.
The AngularJS team strongly recommends migrating your applications to not rely on it as soon as possible. AngularJS V1.6 went end-of-life on 1July2018.
From the Docs:
Due to 38f8c9, directive bindings are no longer available in the constructor.
Previously, the $compileProvider.preAssignBindingsEnabled flag was supported. The flag controlled whether bindings were available inside the controller constructor or only in the $onInit hook. The bindings are now no longer available in the constructor.
To migrate your code:
If you specified $compileProvider.preAssignBindingsEnabled(true) you need to first migrate your code so that the flag can be flipped to false. The instructions on how to do that are available in the "Migrating from 1.5 to 1.6" guide. Afterwards, remove the $compileProvider.preAssignBindingsEnabled(true) statement.
— AngularJS Developer Guide - Migrating to V1.7 - Compile
From the Docs:
Due to bcd0d4, pre-assigning bindings on component/directive controller instances is disabled by default, which means that they will no longer be available inside the constructors. It is still possible to turn it back on, which should help during the migration. Pre-assigning bindings has been deprecated and will be removed in a future version, so we strongly recommend migrating your applications to not rely on it as soon as possible.
Initialization logic that relies on bindings being present should be put in the controller's $onInit() method, which is guaranteed to always be called after the bindings have been assigned.
— AngularJS Developer Guide - Migrating to 1.6 - Compile
Note:
On 1July2018, support for AngularJS 1.6 ended. For more information, see AngularJS MISC - Version Support Status.
It is not supported anymore since AngularJS 1.6. For people who are still migrating their application to a more recent version of AngularJs, If you specified $compileProvider.preAssignBindingsEnabled(true) you need
to first migrate your code so that the flag can be flipped to false. and take a look to this guide https://docs.angularjs.org/guide/migration#migrating-from-1-5-to-1-6
AngularJs commit reference: https://github.com/angular/angular.js/commit/38f8c97af74649ce224b6dd45f433cc665acfbfb
I've got pretty much this error:
AngularJS ngSanitize Error
short version: "lowercase is not a function".
While my application has AngularJS enforced to 1.4.9, we didn't enforce angular-sanitize, so it resolves to 1.7.0 and on that version of AngularJS lowercase function doesn't exist anymore, producing an error.
Probably by forcing angular-sanitize to a fixed version would fix that, but I want to go beyond fixing it and understand what is causing the problem and why, because I find a few inconsistencies.
AngularJS is forced to 1.4.9. bower-components folder holds this version, build folder after compiling also holds this version, developer panel on Chrome show only this version is fetched. This version does have lowercase method.
Angular-sanitize has angular 1.7.0 as a dependency, but it's never downloaded, never. Not in any single folder or subfolder on the entire project, not at compiling, not from Chrome either. So I guess the only angular.js he's got access to is 1.4.9, which does have lowercase method.
I don't quite understand why then "lowercase is not a function" error appears if the only available angular.js still has that method. Also I don't understand why angular-sanitize 1.7.0 demanding angular 1.7.0 uses non-existing methods on AngularJS 1.7.0 (Angular developers mistake? but I find hard to believe it.)
Probably sanitize is downloading and accessing angular 1.7.0 somehow, but I would like to know how. Just out of curiosity. And also to confirm if this is an angular developers mistake or if there's something I've missed.
It is explained in the official Angular 1.6 to 1.7 Migration Guide:
Due to 1daa4f, the helper functions angular.lowercase and angular.uppercase have been removed.
These functions have been deprecated since 1.5.0. They are internally used, but should not be exposed as they contain special locale handling (for Turkish) to maintain internal consistency regardless of user-set locale.
Developers should generally use the built-ins toLowerCase and toUpperCase or toLocaleLowerCase and toLocaleUpperCase for special cases.
Further, we generally discourage using the angular.x helpers in application code.
Whenever a controller renders json I get,
uninitialized constant Mime::JSON
I have not modified any code related to this.
Ex, the code for this controller method that throws the error:
def names
#families = Family.pluck(:name)
render json: #families
end
This was working fine before the rails 5 upgrade.
In my case, it was jbuilder causing this error.
Upgrading jbuilder to latest (2.7.0 at time of writing) solved this. The old jbuilder references JSON wrong and causes responder to fail.
I was obtaining the error after upgrade from rails 5.0.1 to 5.1.0 and in my case the gem 'web-console','~> 2.0' was causing the error, I solved it updating it to gem 'web-console','>= 3.3.0'.
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.
I'm working on an AngularJS web app using the ngbp framework (formerly ng-boilerplate) which by default uses AngularJS 1.2. The project is in early stages so we're experimenting with using AngularJS 1.3 instead of 1.2, as it has some nice features we'd like to make use of. We're also working under the assumption that AngularJS 1.3 will likely be the release version by the time we go live.
So I simply switched the AngularJS version number in the bower.json file and everything seems to work fine in Chrome, Safari, and Firefox except for when I enable strict dependency injection (ng-strict-di). When strict DI mode is on I get the error below (more detail here), but it only occurs in Chrome (FF & Safari both still work as expected).
Failed to instantiate module ng due to:
Error: [$injector:strictdi] function($provide) is not using explicit annotation and cannot be invoked in strict mode
http://errors.angularjs.org/1.3.0-build.3121+sha.a4520a7/...)
at http://localhost:8080/assets/ngbp-0.3.2.js:87:12
at annotate (http://localhost:8080/assets/ngbp-0.3.2.js:3352:17)
at Object.invoke (http://localhost:8080/assets/ngbp-0.3.2.js:4036:21)
at runInvokeQueue (http://localhost:8080/assets/ngbp-0.3.2.js:3964:35)
at http://localhost:8080/assets/ngbp-0.3.2.js:3973:11
at forEach (http://localhost:8080/assets/ngbp-0.3.2.js:338:20)
at loadModules (http://localhost:8080/assets/ngbp-0.3.2.js:3954:5)
at createInjector (http://localhost:8080/assets/ngbp-0.3.2.js:3894:11)
at doBootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1494:20)
at bootstrap (http://localhost:8080/assets/ngbp-0.3.2.js:1509:12
It seems that for some reason the angular source code itself is failing the strict DI test and thus won't load in the Chrome browser from within the ngbp framework. The above error comes from a fresh clone of ngbp with the only change being the version of AngularJS (1.3), not from our actual project (though the error is the same in both cases). I know that this version of ngbp doesn't officially support Angular 1.3 but as I said the app seems to work just fine with this change, even though it fails this test. I'm wondering if anyone might have some insight into what is causing this error and whether or not it would be ill-advised to proceed with this combination of AngularJS 1.3 and ngbp (version: 0.3.2)? Is there something else within ngbp that needs to be changed along with the version of AngularJS?
If it helps I'm serving up the files locally via cd ../bin; http-server -p 8080. If any other information would help just let me know and I'd be happy to provide it if possible.
Thanks for your time.
EDIT: If it helps I tested on OS X 10.9.4 with the following browser versions:
Chrome (Version 36.0.1985.143)
64-bit Chrome (Version 37.0.2062.94)
Firefox (31.0)
Safari (Version 7.0.5 (9537.77.4))
Looks like you might be using batarang, it does not work well with ng-strict-di. Try disabling batarang from google chrome developer tools and the app should start normally again.
[edit] AngularJS batarang now support ng-strict-di since v0.5.0. This error should no longer happen.