angular.js:10126 Error: [ng:areq] Argument […] is not a function, got undefined

Question

I know it's duplicate but mine doesn't work .I searched a lot. Angular routing to some pages which I want to load their controller using requirejs fails

app.js

define("app", ['angular', 'angularUiBootstrap'], function () {

var app = angular.module('app', ['ngCookies', 'ngRoute']);

app.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide',
    function ($controllerProvider, $compileProvider, $filterProvider, $provide) {

    }]);

    return app;

});

routing.js

define('routing', ['app', 'safeApply'], function (app) {

app.factory('api', function ($http, $cookies) {
    return {
        init: function (token) {
            debugger;
            $http.defaults.headers.common['X-Access-Token'] = token || $cookies.token;
        }
    };
});
/////////////////////////////
app.factory('httpInterceptor', function httpInterceptor($q, $window, $location) {
    return function (promise) {
        var success = function (response) {
            return response;
        };

        var error = function (response) {
            if (response.status === 401) {
                $location.url('/login');
            }

            return $q.reject(response);
        };

        return promise.then(success, error);
    };
});
/////////////////////////

app.config(function ($routeProvider, $locationProvider, $httpProvider, $provide) {


    var routingCfg =
        [
            { path: '/', controller: 'MainPageController', isFree: true, category: 'User', actionUrl: '/Home/MainPage' },
            { path: '/UploadNationalCard2', controller: 'UploadNationalCardController2', isFree: true, category: 'User', actionUrl: '/UploadNationalCard/Index' },
            { path: '/SmsReply', controller: 'SmsReplyJsController', isFree: true, category: 'User', actionUrl: '/SmsReply/Index' },
            { path: '/Support', controller: 'SupportController', isFree: true, category: 'User', actionUrl: '/Support/Index' },
            { path: '/Rule', controller: 'RuleController', isFree: true, category: 'User', actionUrl: '/Rule/Index' },
            { path: '/Api', controller: 'ApiController', isFree: true, category: 'User', actionUrl: '/Api/Index' },
            { path: '/Language', controller: 'LanguageController', isFree: true, category: 'User', actionUrl: '/Language/Index' },
            { path: '/About', controller: 'AboutController', isFree: true, category: 'User', actionUrl: '/About/Index' },
        ];

    routingCfg.forEach(function (x) {



        $routeProvider.when(x.path, {

            templateUrl: x.actionUrl,
            controller: x.controller,
            resolve: {
                load: ['$q', '$rootScope', 'safeApply', '$location', function ($q, $rootScope, safeApply, $location) {

                    var deferred = $q.defer();
                    require([x.controller], function () {

                        safeApply($rootScope, function () {
                            deferred.resolve();
                        });

                    });
                    return deferred.promise;

                }]
            }

        });
        $routeProvider.otherwise({
            redirectTo: '/'
        });
    });

});

    return app;

});

requirejsConfig.js

/// <reference path="routing.js" />
require.config({
baseUrl: '/',
urlArgs: 'v=1.0',
skipDataMain: true,

paths: {

    bootstrap: 'Scripts/bootstrap.min',
    jquery: 'Scripts/jquery-1.10.2.min',
    angular: 'Scripts/angular-1.4.7/angular',
    angularRoute: 'Scripts/angular-1.4.7/angular-route',
    angularCookies: 'Scripts/angular-1.4.7/angular-cookies',

    angularUiBootstrap: 'app/lib/ui-bootstrap/ui-bootstrap-tpls-0.10.0.min',

    app: 'app/js/app',
    routing: 'app/js/routing',
    safeApply: 'app/js/safeApply',

    serviceBaseAngular: 'app/js/serviceBaseAngular',
    UserPageController: 'app/user/UserPageController',
    MainPageController: 'app/user/MainPageController',
    UploadNationalCardController2: 'app/user/UploadNationalCardController2',
    SmsReplyJsController: 'app/user/SmsReplyJsController',


},

shim: {

    'bootstrap': ["jquery"],
    'angularUiBootstrap': ['angular'],
    'app': ['angular', 'angularRoute'],
    'angular': {
        deps: ["jquery"],
        exports: 'angular'
    },
    'angularRoute': ['angular'],
    'angularCookies': ['angular'],



},
});
require(
[
    'app',
    'routing',
    'jquery',
    'bootstrap',
    'angular',
    'angularUiBootstrap',
    'safeApply',
    'angularCookies',
    'angularRoute',
    'serviceBaseAngular',
    'UserPageController',
    'MainPageController',
    'UploadNationalCardController2'
    ],
function (app) {
    //app.init();
    angular.bootstrap(document, ['app']);

});

this works because it is in the require part of reuirejsConfig.js

MainPageController.js

define("MainPageController", ['app'], function (app) {
app.controller('MainPageController', ["$scope", "serviceBaseAngular", 
"$compile", "$timeout", "$location", "$rootScope", function ($scope, 
serviceBaseAngular, $compile, $timeout, $location, $rootScope) {

    }]);
});

MainPage.cshtml

<div ng-controller="MainPageController">
</div>

but SmsReplyJsController.js doesn't work

define('SmsReplyJsController', ['app'], function (app) {
app.controller('SmsReplyJsController', ["$scope", "$location", "$routeParams", "sharedServices", function ($scope, $location, $routeParams,  sharedServices) {

     }]);
});

and I get this error

VM976:27 Error: [ng:areq] Argument 'SmsReplyJsController' is not a function, 
got undefined
 http://errors.angularjs.org/1.4.7/ng/areq?
 p0=SmsReplyJsController&p1=not%20aNaNunction%2C%20got%20undefined

which means

Error: ng:areq
Bad Argument
Argument 'SmsReplyJsController' is not a
Description
AngularJS often asserts that certain values will be present and truthy using     a helper function. If the assertion fails, this error is thrown. To fix this     problem, make sure that the value the assertion expects is defined and matches     the type mentioned in the error.

If the type is undefined, make sure any newly added     controllers/directives/services are properly defined and included in the     script(s) loaded by your page.

error-ngareq-from-angular-controller didn't help me

Any help! thanks

Answer 1

The line that causes error is in safeApply.js

define("safeApply", ['app'], function (app) {

console.log('safeApply')

app.factory('safeApply', [function () {

    return function ($scope, fn) {

        var phase = $scope.$root.$$phase;

        if (phase == '$apply' || phase == '$digest') {
            if (fn && typeof fn === 'function') {
                $scope.$eval(fn);
            }
        } else {
            if (fn && typeof fn === 'function') {
                $scope.$apply(fn);
            } else {
                $scope.$apply();
            }
        }
    };
}]);
});

it is

if (fn && typeof fn === 'function') {
                $scope.$apply(fn);
            }

actually after angular routing, which uses safeApply to load dependencies first then the controller, when it loads the controller using "$scope.$apply(fn);" the error occurs

$routeProvider.when(x.path, {

        templateUrl: x.actionUrl,
        controller: x.controller,
        resolve: {
            load: ['$q', '$rootScope', 'safeApply', '$location', function ($q, $rootScope, safeApply, $location) {

                var deferred = $q.defer();
                require([x.controller], function () {

                    safeApply($rootScope, function () {
                        deferred.resolve();
                    });

                });
                return deferred.promise;

            }]
        }

    });

Can you give me some hint to solve it!

Solved

I added lazy to my app

define("app", ['angular', 'angularUiBootstrap'], function () {
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngCookies','ngAnimate']);

app.config(['$controllerProvider', '$compileProvider', '$filterProvider', '$provide', function ($controllerProvider, $compileProvider, $filterProvider, $provide) {
    app.lazy = {
        controller: $controllerProvider.register,
        directive: $compileProvider.directive,
        filter: $filterProvider.register,
        factory: $provide.factory,
        service: $provide.service
    };
}]);
return app;
});

and controllers like

define("NewContactController", ['app'], function (app) {
app.lazy.controller('NewContactController', ["$scope", "serviceBaseAngular", "sharedServices", "$compile", "$timeout", "$location", "$rootScope", "$routeParams", function ($scope, serviceBaseAngular, sharedServices, $compile, $timeout, $location, $rootScope, $routeParams) {



}]);
});