Argument '' is not a function in Angular routing

Question

I'm getting this error and I cannot locate the problem, following is my error

Error: [ng:areq] Argument 'homeCtrl' is not a function, got undefined http://errors.angularjs.org/1.2.25/ng/areq?p0=homeCtrl&p1=not%20aNaNunction%2C%20got%20undefined at VALIDITY_STATE_PROPERTY (http://localhost:8100/lib/ionic/js/ionic.bundle.js:7703:12) at assertArg (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9134:11) at assertArgFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:9144:3) at $get (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14903:9) at updateView (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42986:30) at IonicModule.directive.directive.compile (http://localhost:8100/lib/ionic/js/ionic.bundle.js:42942:9) at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14336:13) at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13730:13) at nodeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14330:24) at compositeLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13730:13)

Following is my Angular and Ionic project:

#app.js
angular.module('ft', ['ionic', 'ft.controllers'])
.run(function($ionicPlatform) {
  // run method
})
.config(function($stateProvider, $urlRouterProvider){
  $stateProvider
  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/sideMenu.html',
    controller: 'menuCtrl'
  })
  .state('app.home', {
    url: '/home',
    views: {
      'menuContent': {
        templateUrl: 'templates/home.html',
        controller: 'homeCtrl'
      }
    }
  });
  $urlRouterProvider.otherwise('/app/home');
});

#www/js/controllers/home_ctrl.js
angular.module('ft.controllers', [])
  .controller('homeCtrl', function($scope, $ionicModal, $timeout){

  });

#index.html file
<script src="js/app.js"></script>
<script src="js/controllers/home_ctrl.js"></script>

But if I remove the homeCtrl from routes, it works fine. I spent fair amount of time now and for me it seems ok.

Can you verify, without a doubt, that the browser is able to download the `home_ctrl.js` file? — Mike Perrenoud, Dec 01 '14 at 13:38
i ran it in plnkr, no errors: http://plnkr.co/edit/7eSdX3nE0CKHqomgMEoh?p=preview — No Idea For Name, Dec 01 '14 at 13:42
@MichaelPerrenoud, thanks for the answer. `home_ctrl.js` is accessible from the browser, the issue was in duplication of module loading. I posted an answer with details — sameera207, Dec 01 '14 at 21:24
@NoIdeaForName, thanks for the answer , home_ctrl.js is accessible from the browser, the issue was in duplication of module loading. I posted an answer with details — sameera207, Dec 01 '14 at 21:25

Mihai Dinculescu · Answer 1 · 2014-12-01T14:52:08.120

1

It looks like you are using bundling & minification, try:

var app = angular.module('ft.controllers', []);
app.controller('homeCtrl', ['$scope', '$ionicModal', '$timeout', function ($scope, $ionicModal, $timeout) {
});

Minification of the JS code replaces variables name. AngularJS does it's injection of modules based on this names.

edited Dec 01 '14 at 14:52

answered Dec 01 '14 at 13:39

Mihai Dinculescu

19,743
8
55
70

No, that is valid initialization. – Mike Perrenoud Dec 01 '14 at 13:39
1

Unfortunately that's still not the problem. Angular is unable to find the controller because it's not being loaded. – Mike Perrenoud Dec 01 '14 at 13:43
How can that not be a problem when you're using minification? How can the controller be found if it's signature is changed by the minification process? – Mihai Dinculescu Dec 01 '14 at 13:44
Minification doesn't change the name of the controller itself, just the injected parameter names, and even then they are changed in all referenced locations. Minification is not the issue. – Mike Perrenoud Dec 01 '14 at 13:45
That is not true. Angular injects by parameter name. – Mihai Dinculescu Dec 01 '14 at 13:46
You're right - I didn't state that correctly. My point is this - the OP's issue is unrelated to minification because that wouldn't cause the controller name to be missing. – Mike Perrenoud Dec 01 '14 at 13:48
Now that we cleared my initial misconception can you remove the down-vote? My suggestion is useful if the OP uses minification as I'm suspecting. – Mihai Dinculescu Dec 01 '14 at 14:50
@Mihai-AndreiDinculescu, thanks for the answer. It was an issue with initializing the modules, I posted an answer with details. – sameera207 Dec 01 '14 at 21:23

score 1 · Answer 2 · answered Dec 01 '14 at 21:22

Finally I was able to fix the issue, The problem was ft.controllers is used in two controllers.

angular.module('ft.controllers', [])
  .controller('homeCtrl', function($scope, $ionicModal, $timeout){
  });

angular.module('ft.controllers', [])
.controller('menuCtrl', function($scope, $ionicModal, $timeout){
]});

When I changed the names to ft.controllers.home, ft.controllers.menu and added them to app.js it started working

How ever I thought it will work as I believe the same this is used in ionic sideMenu started app

#controllers.js from ionic started sideMenu app
angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
})

.controller('PlaylistsCtrl', function($scope) {
})

controllers.js file

app.js file

project

Bear in mind you could actually define the module in the `app.js` file like this `angular.module('ft.controllers', [])` and then add the controllers wherever like this `angular.module('ft.controllers').controller(...)`. Notice the second call doesn't send an array - that becomes a *get* instead of *define*. — Mike Perrenoud, Dec 02 '14 at 16:29

Argument '' is not a function in Angular routing

2 Answers2