Cannot read property '$$state' of undefined error after AngularJS version upgrade

Question

I've been working with AngularJS to upgrade our project's version from 1.2.16 to 1.6.4. Since we are using bower as package manager, I've updated the necessary parts of bower.json as below:

{
"name": "takademi",
"version": "0.0.0",
"dependencies": {
  "angular": "1.6.4",
  "json3": "~3.3.1",
  "es5-shim": "~3.1.0",
  "angular-cookies": "1.6.4",
  "angular-sanitize": "1.6.4",
  "angular-animate": "1.6.4",
  "angular-route": "1.6.4",
  "angular-bindonce": "~0.3.1",
  "restangular": "~1.4.0",
  "angular-base64": "~2.0.2",
  "lodash": "~2.4.1"
},
"devDependencies": {
"angular-mocks": "1.2.16",
"angular-scenario": "1.2.16"
},
"appPath": "app"
}

After this update, I ran the project. Now I am able to see angular's version as 1.6.4 but I got below error:

*** process.env.ENV is not defined, assuming 'prod' env
t @ bundle.js:4776
angular.js:14525 TypeError: Cannot read property '$$state' of undefined
    at then (angular.js:16799)
    at addPromiseLikeThing (angular-busy.js:67)
    at angular-busy.js:22
    at Object.forEach (angular.js:403)
    at Object.tracker.reset (angular-busy.js:18)
    at angular-busy.js:175
    at $watchCollectionAction (angular.js:17859)
    at Scope.$digest (angular.js:17999)
    at Scope.$apply (angular.js:18269)
    at done (angular.js:12387)
(anonymous) @ angular.js:14525
getMarketPlace Failed to load resource: the server responded with a status of 401 (Unauthorized)
angular.js:14525 Possibly unhandled rejection: {"data":{"status":401,"module":0,"code":1000,"message":"AUTHENTICATION_REQUIRED","develo    perMessage":null,"moreInfo":null},"status":401,"config": {"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","params":{"v":967},"headers":{"Accept":"application/json, text/plain, */*"},"url":"/portal/rest/market-place/getMarketPlace"},"statusText":"Unauthorized"}
(anonymous) @ angular.js:14525
(anonymous) @ angular.js:11008
processChecks @ angular.js:16860
$digest @ angular.js:17971
$apply @ angular.js:18269
done @ angular.js:12387
completeRequest @ angular.js:12613
requestLoaded @ angular.js:12541

As far as I understood, it simply states that my newly upgraded AngularJS 1.6.4 file doesn't support $$state keyword usage in it. Instead of showing files that we've developed, the error comes from Angular's own file.

Here is the function that chrome browser navigates me to show the error - 16799th line of angular.js:

  function Promise() {
this.$$state = { status: 0 };
  }

  extend(Promise.prototype, {
    then: function(onFulfilled, onRejected, progressBack) {
      if (isUndefined(onFulfilled) && isUndefined(onRejected) && isUndefined(progressBack)) {
        return this;
      }
      var result = new Promise();

      this.$$state.pending = this.$$state.pending || [];
      this.$$state.pending.push([result, onFulfilled, onRejected, progressBack]);
      if (this.$$state.status > 0) scheduleProcessQueue(this.$$state);

      return result;
    },

    'catch': function(callback) {
      return this.then(null, callback);
    },

    'finally': function(callback, progressBack) {
      return this.then(function(value) {
        return handleCallback(value, resolve, callback);
      }, function(error) {
        return handleCallback(error, reject, callback);
      }, progressBack);
    }
  });

I've made a search in SO and Google it a little bit, but I couldn't find any related posts or explanations to my problem. Most of the answers are related to Ruby, or react:

angular showing TypeError: Cannot read property 'state' of undefined

Uncaught TypeError: Cannot read property 'state' of undefined

react: uncaught TypeError: Cannot read property 'state' of undefined

Since I am not aware of the whole features of AngularJS and bower, those answers aren't clear for me.

Can you guys give me a hand on this?

Thanks in advance!

What about status 401 can't load resource "url":"/portal/rest/market-place/getMarketPlace" "statusText":"Unauthorized" ? — georgeawg, Jul 06 '17 at 13:48
Also what is `angular-busy.js`? Which version are you using? There was an upgrade for AngularJS 1.6 promise methods 6 months ago. — georgeawg, Jul 06 '17 at 13:50
@georgeawg I couldn't dive into angular-busy to see what it is doing exactly, but as far as I know, it is related with angular's own library(https://github.com/cgross/angular-busy). On the other hand, for your first comment, I think I should solve $$state problem firstly to handle that one. Because it seems it is related with angular's own library again. — Prometheus, Jul 07 '17 at 05:26
`angular-busy` is not created by the AngularJS team. The function `addPromiseLikeThing` looks suspicious and is the last thing executed before entering the $q library where it blows up. Faking the $q library with an 'promiseLike' object is likely the cause of the error. — georgeawg, Jul 07 '17 at 05:46
Hey @georgeawg, I've looked into angular-busy, and as you stated that `addPromiseLikeThing` function was causing the problem. When I updated my angular-busy, problem fixed. Please, feel free adding this comment as an answer, so that I can accept it. — Prometheus, Jul 10 '17 at 07:57

georgeawg · Accepted Answer · 2017-07-10T08:22:21.583

The angular-busy module is not created by the AngularJS team. The function addPromiseLikeThing looks suspicious and is the last thing executed before entering the $q library where it blows up. Faking the $q library with a 'promiseLike' object is likely the cause of the error.

In addition AngularJS V1.6 changes the way rejections are handled. The error message:

angular.js:14525 Possibly unhandled rejection: {"data":{"status":401,

is a result of those changes.

For more information, see AngularJS Developer Guide - Migrating to V1.6 ($q)

Cannot read property '$$state' of undefined error after AngularJS version upgrade

1 Answers1