Argument 'MyCtrl' is not a function, got undefined

So I keep getting the following: Error: [ng:areq] Argument 'AppsCtrl' is not a function, got undefined when I try to define a few different modules. My setup looks like:

main.js

require.config({
    paths: {
        angular: 'lib/angular/angular',
        jquery: 'lib/jquery/jquery-2.1.0',
        angularCookies: "lib/angular/angular-cookies",
        angularRoute: "lib/angular/angular-route",
        angularAnimate: "lib/angular/angular-animate",
        angularTouch: "lib/angular/angular-touch",
        angularSanitize: "lib/angular/angular-sanitize",
        angularAMD: 'lib/angularAMD/angularAMD',
        ngload: 'lib/angularAMD/ngload'
    },
    map: {
        '*': {
            'less': 'lib/require/require-less/less',
        }
    },
    shim: {
        jquery: {
            exports: '$'
        },
        angular: {
            exports: 'angular',
            deps: ['jquery']
        },
        angularAMD: ['angular'],
        ngload: ['angularAMD']
    }
});

require(['angular', 'angularAMD', 'app/app'], function (angular, angularAMD, app) {
    angularAMD.bootstrap(app);
});

app.js

define(['angular', 
        'angularCookies',
        'angularRoute', 
        'angularAnimate',
        'angularTouch',
        'angularSanitize',
        'app/admin/admin' // module trying to be included!
    ], function (angular) {

    var app = angular.module('phx', ['ngCookies', 'ngRoute', 'ngAnimate', 'ngSanitize', 'admin']);

    app.config(function ($routeProvider, $locationProvider) {
        $routeProvider.otherwise({ redirectTo: 'apps' });
        $locationProvider.html5Mode(true);
    });

    app.run(function ($rootScope, $location, $route, Auth) {
        var deregister = $rootScope.$on("$routeChangeStart", function () {
            Auth.authorize().then(function (xhr) {
                if (xhr) {
                    $rootScope.authed = true;
                    $rootScope.profile = xhr.data;
                    deregister();
                }
            },function(){
                $location.path('login');
            });
        });

        $rootScope.$on('$routeChangeSuccess', function() {
            if ($route.current && $route.current.$$route && $route.current.$$route.controller){
                $rootScope.controller = $route.current.$$route.controller;
                $rootScope.page_title = $route.current.$$route.title;
            }
        });
    });

    return app;
});

admin.js

define(['angular', 'angularAMD'], function (angular, angularAMD) {
    var module = angular.module('admin', []);
    module.config(function ($routeProvider) {
        // admin/apps/apps.js
        $routeProvider.when('/apps', 
            angularAMD.route({
                templateUrl: 'app/admin/apps/apps.tpl.html',
                controller: 'AppsCtrl',
                title: 'Applications',
                controllerUrl: 'app/admin/apps/apps',
                resolve: {
                    apps: function (AppsModel) {
                        return AppsModel.findAll();
                    }
                }
            }));
    });
    return module;
});

It happens when the route hits the app. I added console logs and everything is getting hit its just timing related.

Anyone got any ideas?

[marcoslin]

Looking at your code, the problem seems to be related to the call to angularAMD.bootstrap(app) in your main.js instead of your app.js. After bootstrap is called, angular.module no longer works and you should be calling app.register... instead. Try to move the bootstraping to the end app.js and kick off your app.js using deps: ['app'] in your require.config.

Also, as you defined angular as dependency to angularAMD in your require.config, there is really no reason to include angular in app.js or admin.js.

If this doesn’t solve your problem, setup a JSFiddle or Plunker and I will try to help further.

[yangyili]

you may forget include js file