angular modules not injecting

Question

my app runs fine in development or test mode, whatever rails s does, but does not work when i run in production mode i get the following errors in my browser

X GET http://localhost:4000/assets/application-bee14c2d11d9c46d50378b54dd87850181256a24c05d6ed2e72c0487fc775f86.js
X GET http://localhost:4000/assets/application-c7fa74d0d86da1dddcd65188a0ad91600d0d55a1be66ba476307822b2d36848b.css

(also can't run on port 3000 for some reason but lsof -i tcp:3000 yields nothing, maybe this is related? i get

Exiting
/Users/jrogers2/.rvm/gems/ruby-2.2.3/gems/puma-3.6.2/lib/puma/binder.rb:266:in 'initialize': Address already in use - bind(2) for "::1" port 3000 (Errno::EADDRINUSE)
    from /Users/jrogers2/.rvm/gems/ruby-2.2.3/gems/puma-3.6.2/lib/puma/binder.rb:26

)

i've been told it's a manual dependency injection problem but am unconvinced as i've looked around a lot and tried many different formats. but here's some examples of my code anyways and full repo below.

// app.js
(function(){
  'use strict';
  angular
    .module('app', ['templates', 'ui.router', 'Devise', 'ngResource', 'ngMessages', 'infinite-scroll', 'ngFileUpload'])
    .run(['Auth', function(Auth){
      Auth.currentUser()
    }])
}())

//application.js
//= require jquery
//= require angular
//= require angular-devise
//= require angular-messages
//= require angular-ui-router
//= require angular-resource
//= require bootstrap-sprockets
//= require moment
//= require angular-rails-templates
//= require ngInfiniteScroll
//= require ng-file-upload
//= require ng-file-upload-shim
//= require_tree .

// routes.js
(function(){
  'use strict';
  angular
    .module('app')
    .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
      $stateProvider
        .state('login', {
          url: '/',
          templateUrl: 'views/login.html',
          controller: 'loginController as loginCtrl',
          onEnter: ['$state', 'Auth', function($state, Auth){
            Auth.currentUser().then(function(data){
              $state.go('list', {id: data.list.id})
            })
          }]
        })
      $stateProvider
        .state('userPurchases', {
          url: '/users/:id/purchases',
          templateUrl: 'views/purchases.html',
          controller: 'purchaseController as purchaseCtrl',
          onEnter: ['$state', 'Auth', function($state, Auth){
            if (!Auth._currentUser){
              $state.go('login')
            }
          }]
        })

// listController.js
(function(){
  'use strict';
  var listController = ['$scope', 'Auth', '$stateParams', 'itemFactory', 'listFactory', function($scope, Auth, $stateParams, itemFactory, listFactory){
    var listCtrl = this;
    Auth.currentUser().then(function(data){
      $scope.currentUser = data;
    });
    $scope.itemsCounter = 0;
    $scope.list = listFactory.get({id: $stateParams.id});
    $scope.items = [];
    $scope.createItem = function(input){
      input.plzrender = 'list';
      input.items.list_id = $scope.currentUser.list.id;
      itemFactory.save(input).$promise.then(function(response){
        $scope.list = response;
      });
    }
    $scope.deleteItem = function(item){
      item.plzrender = 'list';
      itemFactory.delete(item).$promise.then(function(response){
        $scope.list = response;
      });
    }
    $scope.disableInfinite = false;
    $scope.loadMore = function(list){
      if ($scope.list.$resolved) {
        for (var i = 0; i < 10; i++) {
          $scope.items.push($scope.list.items[$scope.itemsCounter]);
          $scope.itemsCounter += 1;
          if ($scope.itemsCounter >= $scope.list.items.length) {
            $scope.disableInfinite = true;
            break;
          }
        }
      }
    }
    $scope.list.$promise.then(function(response){
      $scope.loadMore();
    });
  }];
  angular
    .module('app')
    .controller('listController', listController)
}())

github repo: https://github.com/jd2rogers2/presently

Answer 1

That definitely looks like a JavaScript minification issue. Try to disable asset compression (only for your JS) in production.rb. You can refer to this question for more help on how to do this.

I believe this should solve your problem. But upon my further analysis, I saw the following code in the minified JS for UI router:

function() {
  "use strict";
  angular.module("app").config(function(e, t) {
    e.state("login", {
        url: "/",
        templateUrl: "views/login.html",
        controller: "loginController as loginCtrl",
        onEnter: function(e, t) {
          t.currentUser().then(function(t) {
            e.go("list", {
              id: t.list.id
            })
          })
        }
      }),
      e.state("userPurchases", {
        url: "/users/:id/purchases",
        templateUrl: "views/purchases.html",
        controller: "purchaseController as purchaseCtrl",
        onEnter: function(e, t) {
          t._currentUser || e.go("login")
        }
      }).state("userEvents", {
        url: "/users/:id/events",
        templateUrl: "views/events.html",
        controller: "eventController as eventCtrl",
        onEnter: function(e, t) {
          t._currentUser || e.go("login")
        }
      }).state("userProfile", {
        url: "/users/:id",
        templateUrl: "views/profile.html",
        controller: "profileController as profileCtrl",
        onEnter: function(e, t) {
          t._currentUser || e.go("login")
        }
      }).state("userProfileEdit", {
        url: "/users/:id/edit",
        templateUrl: "views/editProfile.html",
        controller: "editProfileController as editProfCtrl",
        onEnter: function(e, t) {
          t._currentUser || e.go("login")
        }
      }),
      e.state("userFriends", {
        url: "/users/:id/friends",
        templateUrl: "views/friends.html",
        controller: "friendshipController as friendshipCtrl",
        onEnter: function(e, t) {
          t._currentUser || e.go("login")
        }
      }),
      e.state("list", {
        url: "/list/:id",
        templateUrl: "views/list.html",
        controller: "listController as listCtrl",
        onEnter: function(e, t) {
          t._currentUser || e.go("login")
        }
      }),
      e.state("listItemEdit", {
        url: "/list/:list_id/items/:item_id/edit",
        templateUrl: "views/items/edit.html",
        controller: "itemController as itemCtrl",
        onEnter: function(e, t) {
          t._currentUser || e.go("login")
        }
      }).state("listItemShow", {
        url: "/list/:list_id/items/:item_id",
        templateUrl: "views/items/show.html",
        controller: "itemController as itemCtrl",
        onEnter: function(e, t) {
          t._currentUser || e.go("login")
        }
      }),
      t.otherwise("/")
  })
}()

and there is no mention of what e, and t are anywhere. I think this should be your culprit.