Angular Service throws exception when returning a promise

Question

In my app.js code I'm running some init code which pulls session vars from the server.

Good so far; however I'm now trying to add an additional call to pull data for a treeview widget. This new call is causing the JavaScript exception :

  "Cannot read property 'then' of undefined"

The startup code is:

1) app.run gets called first,

2) call into 'userService' to init various $rootScope vars

3) userService makes API calls to a server and returns data. $q.defer() and $http is used

** NEXT STEPS CAUSES AN EXCEPTION

4) call into userService.getUserReportsTreeFromDataContext() from app.run

5) userService.getUserReportsTreeFromDataContext then calls down into datacontext.js (THIS SOMEHOW CAUSES AN EXCEPTION).

Here is my app.run() code within app.so

app.run(['$route', '$rootScope', 'common', 'userService', function ($route, $rootScope, common, userService) {
 // initialize session vars     
   userService.openUserSession(razorEnvJson).then(function (data) {
            var sessionID = data.data[0];
            $rootScope.rageSessionVars.sessionID = sessionID;

            // **** THROWS EXCEPTION HERE ****                     
            userService.getUserReportsTreeFromDataContext().then(function (data){
                       // var myData = data;   
            });
    });
 }]);    

and a snippet from userContext.js service :

 this.openUserSession = function (razorEnvParams) {
        _razorEnvParams = razorEnvParams;

        _// some vars ommitted here for brevity
        var url = "http://" + _domain + ":" + _port + controllerpath + "?userid=" + user + "&pass=" + pass;
        var deferred = $q.defer();
        deferred.notify("Opening user session...");
        var retval = [];
        $http({
            method: 'GET',
            encoding: 'JSON',
            headers: {
                'Access-Control-Allow-Origin': 'true',
                'Content-Type': 'application/json'
            },
            withCredentials: true,
            url: url
        }).success(function (data, status, headers, config) {
            retval = data;
            deferred.resolve(retval);
        }).error(function (data, status, headers, config) {
            log("Cannot open a user session via api call. Errors details: " + data);
        });
        return deferred.promise;
    }

    this.getUserReportsTreeFromDataContext = function (userID) {         
        datacontext.getReportsTree().then(function (data) {
             return data;
        });            
    }

and my datacontext.js code to pull data from server, or to pull some test data :

   (function () {
'use strict';

var serviceId = 'datacontext';
angular.module('app').factory(serviceId, ['$http', '$rootScope', 'common', datacontext]);

function datacontext($http, $rootScope, common) {
    var $q = common.$q;

     var service = {
        getReportsTree: getReportsTree,
        sendAggrRequestToServer: sendAggrRequestToServer,            
    };

    return service;

    function getReportsTree() {
        var reportsJson = [
            {
              id: 1, text: "Standard", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [ 
            { id: 3, text: "MTM Aggr", reptName: "MTM Aggr" },
            { id: 4, text: "Member Aggr", reptName: "Member Aggr"                }                                
        ]
},
{
    id: 30, text: "Hierarchy", expanded: false, spriteCssClass: "rootfolder", checkChildren: true, items: [
        { id: 31, text: "Ctpy Hrchy", reptName: "CTPYHIER", withHierarchy: 'true' },
        { id: 32, text: "Ctpy/BkgLocation Hrchy", reptName: "CTPYHIER_BKG_LOC", withHierarchy: 'true' }
    ]
}                          
];
        return $q.when(reportsJson);
    }
  })();  // end datacontext.js

FYI - I make many other successful calls from my dashboard.js controller into datacontext.js with no problems.

Here's a good example, where some test data is pulled from datacontext :

dashboard.js -

    function getPositionsData() {
        datacontext.getPositions().then(function (data) {
            vm.positionsData = data;
            populateGridDataSource(vm.positionsData);
        });
    }

datacontext.js -

   function getPositions() {
        var positionsJson = [
            { id: 1, product: "BAX", instrument: "BOND-0003", position: 11, delta: 0.02, gamma: 0.79, initMarin: 600, initMarginPctChange: 250, varMargin: 75 },
            { id: 2, product: "BAX", instrument: "BOND-0004", position: -4, delta: 0.12, gamma: 0.46, initMarin: 400, initMarginPctChange: 300, varMargin: 65 },
            { id: 3, product: "BAX", instrument: "BOND-0004", position: 9, delta: 0.09, gamma: 0.55, initMarin: 700, initMarginPctChange: 200, varMargin: 40 }
        ];
        return $q.when(positionsJson);
    }

Answer 1

you forgot to return your initial promise in the getUserReportsTreeFromDataContext function: should be like this:

this.getUserReportsTreeFromDataContext = function (userID) 
{ return datacontext.getReportsTree()
         .then(function (data) { return data; }); 
}