Error: Argument is not a function, got undefined

Question

Using AngularJS with Scala Play, I'm getting this error.

Error: Argument 'MainCtrl' is not a function, got undefined

I'm trying to create a table consisting of the days of the week.

Please take a look at my code. I had checked the name of the Controller, but that seems correct. Note: Code used from this SO answer

index.scala.html

@(message: String)

@main("inTime") {

<!doctype html>
<html lang="en" ng-app>
    <head>
        <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
    </head>
<div ng-controller="MainCtrl">
    <table border="1">
    <tbody ng-repeat='(what,items) in data'>
      <tr ng-repeat='item in items'>
        <td ngm-if="$first" rowspan="{{items.length}}">{{what}}</td>
        <td>{{item}}</td>
      </tr>
    </tbody>
  </table>
</div>
</html> 
}

MainCtrl.js

(function() {
    angular.module('[myApp]', []).controller('MainCtrl', function($scope) {
        $scope.data = {
            Colors: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"]
        }
    });
}());

In html where you have used `ng-app` can you change it to `ng-app=myApp` — Chandermani, Jun 25 '13 at 04:41
Have you tried removing the closure (IIFE) from the code? When I had this problem, it was because I had a PHP error in my javascript. — Kevin Beal, Jul 04 '13 at 01:06
You can find out your problem, by this checklist: http://stackoverflow.com/a/26797874/930170 — S Panfilov, Nov 14 '14 at 05:10
Confirm whether you have added MainCtrl.controller.js is added in BundleConfig.cs file — Syed Mohamed, Feb 13 '18 at 14:30

score 110 · Accepted Answer · edited Mar 18 '15 at 07:43

110

Remove the [] from the name ([myApp]) of module

angular.module('myApp', [])

And add ng-app="myApp" to the html and it should work.

edited Mar 18 '15 at 07:43

Pankaj Parkar

134,766
23
234
299

answered Jun 25 '13 at 05:00

Chandermani

42,589
12
85
88

1

All I had to do to get it working was the second suggestion (i.e. set ng-app="myApp"). If I removed the [], I got another error. – Jason Jul 08 '13 at 07:38
15

Having the second parameter `[]` indicates that you are creating a new module. Removing the second parameter indicates that you are retrieving an existing module. So one possibility to check is if you are calling `angular.module` twice, both times including the second parameter. If so, the later occurrence will overwrite the second, hiding any definitions of controllers up to that point. – Carl G Jul 08 '13 at 22:35
26

When he says to remove the `[]` he's referring to the first parameter where the OP has `[myApp]` instead of `myApp`. He's not talking about the second parameter. – Kevin Beal Aug 15 '13 at 17:15
1

Check the name of your controller if you are using routes. The controller name in the route definition is case sensitive. – Latin Warrior Jan 30 '16 at 20:13

pleerock · Answer 2 · 2013-12-08T18:44:22.867

78

FIRST. check if you have correct controller in the route definitions, same as the controller names that you are defining

communityMod.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/members', {
        templateUrl: 'modules/community/views/members.html',
        controller: 'CommunityMembersCtrl'
      }).
      otherwise({
        redirectTo: '/members'
      });
  }]);

communityMod.controller('CommunityMembersCtrl', ['$scope',
    function ($scope) {
        $scope.name = 'Hello community';
    }]);

different controller names in this example will lead to errors, but this example is correct

SECOND check if you have imported your javascript file:

<script src="modules/community/controllers/CommunityMembersCtrl.js"></script>

edited Dec 08 '13 at 18:44

answered Dec 08 '13 at 18:31

pleerock

18,322
16
103
128

31

In my experience, your "second" is always the problem. I often forget to import my controllers into `index.html` – msanford Feb 18 '14 at 16:18
It was the second one in my case as well, forgot to import the JS file... – Saurabh Misra Mar 10 '20 at 13:08

score 26 · Answer 3 · answered Jul 28 '13 at 12:42

I had the same error message (in my case : "Argument 'languageSelectorCtrl' is not a function, got undefined").

After some tedious comparison with Angular seed's code, I found out that I had previously removed a reference to the controllers module in app.js. (spot it at https://github.com/angular/angular-seed/blob/master/app/js/app.js)

So I had this:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.directives'])

This failed.

And when I added the missing reference:

angular.module('MyApp', ['MyApp.filters', 'MyApp.services', 'MyApp.controllers', 'MyApp.directives'])

The error message disappeared and Angular could instanciate the controllers again.

had the same problem, my issue was that I forgot to add my controller to the app module... why does this not happen automatically??? thanks anyhow! — TheZuck, Mar 16 '15 at 08:54

score 16 · Answer 4 · edited Nov 14 '14 at 22:03

16

Some times this error is a result of two ng-app directives specified in the html. In my case by mistake I had specified ng-app in my html tag and ng-app="myApp" in the body tag like this:

<html ng-app>
  <body ng-app="myApp"></body>
</html>

edited Nov 14 '14 at 22:03

Oliver

9,239
9
69
100

answered Nov 08 '14 at 07:04

Gaurav

821
9
11

1

It happened to me when i did not add the injection to the myApp module. – Ghandhikus Apr 20 '16 at 02:17
Thank you! This fixed my issue. – bradden_gross Dec 13 '16 at 21:14

score 6 · Answer 5 · edited Jun 30 '15 at 18:36

6

This seriously took me 4 HOURS (including endless searches on SO) but finally I found it: by mistake (unintentionally) I added a space somewhere.

Can you spot it?

angular.module('bwshopper.signup').controller('SignupCtrl ', SignupCtrl);

So ... 4 hours later I saw that it should be:

angular.module('bwshopper.signup').controller('SignupCtrl', SignupCtrl);

Almost impossible to see with just the naked eye.

This stresses the vital importance of revision control (git or whatever) and unit/regression testing.

edited Jun 30 '15 at 18:36

Dehli

5,950
5
29
44

answered May 25 '15 at 23:26

leo

1,175
12
13

1

My answer was not an extra space but it lead me to my fix. I had `Controller` instead of `controller` and that was all it took. – Grandizer Oct 26 '15 at 21:05
And I named my file options-moda.controller.js but was looking for options-modal.controller.js DOH! – theFish Oct 23 '18 at 13:16
Mine was because of I forgot to add .js in BundleConfig. Simple but frustrating. – Ege Bayrak Dec 07 '18 at 11:46

score 4 · Answer 6 · answered Feb 20 '14 at 13:59

I have encountered the same problem and in my case it was happening as a result of this problem:

I had the controllers defined in a separate module (called 'myApp.controllers') and injected to the main app module (called 'myApp') like this:

angular.module('myApp', ['myApp.controllers'])

A colleague pushed another controller module in a separate file but with the exact same name as mine (i.e. 'myApp.controllers' ) which caused this error. I think because Angular got confused between those controller modules. However the error message was not very helpful in discovering what is going wrong.

This should get fixed by removing the second parameter in the module... To get the existing module using angular.module('myApp') without the second parameter. i.e. angular.module('myApp').contoller(...) — Santhosh, Apr 17 '14 at 07:38

score 3 · Answer 7 · answered Feb 05 '15 at 08:54

In my case (having an overview page and an "add" page) I got this with my routing setup like below. It was giving the message for the AddCtrl that could not be injected...

$routeProvider.
  when('/', {
    redirectTo: '/overview'
  }).      
  when('/overview', {
    templateUrl: 'partials/overview.html',
    controller: 'OverviewCtrl'
  }).
  when('/add', {
    templateUrl: 'partials/add.html',
    controller: 'AddCtrl'
  }).
  otherwise({
    redirectTo: '/overview'
  });

Because of the when('/' route all my routes went to the overview and the controller could not be matched on the /add route page rendering. This was confusing because I DID see the add.html template but its controller was nowhere to be found.

Removing the '/'-route when case fixed this issue for me.

I was receiving this error as well and tearing my hair out because it was causing my TFS builds to fail. Commenting out the '/' route fixed it for me as well. Now to figure out why! — Phillip Copley, Jun 22 '16 at 13:07

score 3 · Answer 8 · answered Jul 06 '16 at 16:04

If you are in a submodule, don't forget to declare the module in main app. ie :

<scrip>
angular.module('mainApp', ['subModule1', 'subModule2']);

angular.module('subModule1')
   .controller('MyController', ['$scope', function($scope) {
      $scope.moduleName = 'subModule1';
   }]);
</script>
...
<div ng-app="mainApp">
   <div ng-controller="MyController">
   <span ng-bind="moduleName"></span>
</div>

If you don't declare subModule1 in mainApp, you will got a "[ng:areq] Argument "MyController" is not a function, got undefined.

score 2 · Answer 9 · answered Jun 17 '14 at 12:43

Уmed's second point was my pitfall but just for the record, maybe it's helping someone somewhere:

I had the same problem and just before I went nuts I discovered that I had forgotten to include my controller script.

As my app is based on ASP.Net MVC I decided to keep myself sane by inserting the following snippet in my App_Start/BundleConfig.cs

bundles.Add(new ScriptBundle("~/app").Include(
                "~/app/app.js",
                "~/app/controllers/*.js",
                "~/app/services/*.js" ));

and in Layout.cshtml

<head>
...
   @Scripts.Render("~/app")
...
</head>

Now I won't have to think about including the files manually ever again. In hindsight I really should have done this when setting up the project...

score 1 · Answer 10 · answered Sep 26 '14 at 11:02

I got sane error with LoginController, which I used in main index.html. I found two ways to resolve:

setting $controllerProvider.allowGlobals(), I found that comment in Angular change-list "this option might be handy for migrating old apps, but please don't use it in new ones!" original comment on Angular

app.config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]);
wrong contructor of registering controller

before

LoginController.$inject = ['$rootScope', '$scope', '$location'];

now

app.controller('LoginController', ['$rootScope', '$scope', '$location', LoginController]);

'app' come from app.js

var MyApp = {};
var app = angular.module('MyApp ', ['app.services']);
var services = angular.module('app.services', ['ngResource', 'ngCookies', 'ngAnimate', 'ngRoute']);

score 1 · Answer 11 · answered May 21 '15 at 14:36

I had the same error with a big mistake:

appFormid.controller('TreeEditStepControlsCtrl', [$scope, function($scope){

}]);

You see ? i forgot the '' around the first $scope, the right syntax is of course:

appFormid.controller('TreeEditStepControlsCtrl', ['$scope', function($scope){

}]);

A first error i didn't see immediatly was: "$scope is not defined", followed by "Error: [ng:areq] Argument 'TreeEditStepControlsCtrl' is not a function, got undefined"

score 1 · Answer 12 · answered Jul 28 '16 at 12:04

In my case it was a simple typo in index.html:

<script src="assets/javascript/controllers/questionssIndexController.js"></script>

that should have been

<script src="assets/javascript/controllers/questionsIndexController.js"></script>

without the extra s in the controller's name.

score 0 · Answer 13 · answered Jan 25 '16 at 14:19

Could it be as simple as enclosing your asset in " " and whatever needs quotes on the inside with ' '?

<link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">

becomes

<link rel="stylesheet" media="screen" href="@routes.Assets.at('stylesheets/main.css')">

That could be causing some problems with parsing

score 0 · Answer 14 · answered Jul 18 '16 at 02:03

0

To fix this problem, I had to discover that I misspelled the name of the controller in the declaration of Angular routes:

.when('/todo',{
            templateUrl: 'partials/todo.html',
            controller: 'TodoCtrl'
        })

answered Jul 18 '16 at 02:03

MadPhysicist

5,401
11
42
107

score 0 · Answer 15 · answered Jul 20 '17 at 17:22

0

Turns out it's the Cache of the browser, using Chrome here. Simply check the "Disable cache" under Inspect (Element) solved my problem.

answered Jul 20 '17 at 17:22

Weihui Guo

3,669
5
34
56

score 0 · Answer 16 · answered Nov 20 '19 at 13:18

Because this pops-up in Google when trying to find an answer to: "Error: Argument '' is not a function, got undefined".

It's possible that you are trying to create the same module twice.

The angular.module is a global place for creating, registering and retrieving AngularJS modules.

Passing one argument retrieves an existing angular.Module, whereas passing more than one argument creates a new angular.Module

Source: https://docs.angularjs.org/api/ng/function/angular.module#overview

Example:

angular.module('myApp', []) Is used to create a module without injecting any dependencies.

angular.module('myApp') (Without argument) is used to get an existing module.

score 0 · Answer 17 · answered Jul 25 '20 at 16:11

0

There appear to be many working solutions suggesting the error has many actual causes.

In my case I hadn't declared the controller in app/index.html:

<scipt src="src/controllers/controller-name.controller.js"></script>

Error gone.

answered Jul 25 '20 at 16:11

Ty Conway

53
4

score 0 · Answer 18 · answered Jul 08 '22 at 23:28

I know this question is old and AngularJS is on its way out, but I want to add my answer anyway. In my case, I created a new file in Visual Studio Code but did not add the .js extension to my controller file name. That is what led to this error for me.

Error: Argument is not a function, got undefined

18 Answers18

Linked