Angularjs Failed to instantiate module WebApp due to: Error: at Anonymous function

Question

I've an angularjs app, running perfectly in Chrome and Firefox and even Edge! Though not on IE11.

I've tried wrapping my init.js as follows:

var webApp = angular.module('WebApp', ['ngRoute', 'ui.bootstrap', 'angular-mandrill', 'firebase']);

(function() {

  angular.module('WebApp').run(function($rootScope,$timeout) {

         $timeout(function(){
                   $rootScope.$on('$routeChangeSuccess', function(ev, data) {
                    if (data && data.controller) {
                        var controller = data.controller;
                        controller = controller.charAt(0).toLowerCase() + controller.slice(1);
                        controller = controller.replace(/Controller/g, '');
                        $rootScope.controller = controller;
                    }
                });
        }, 100);


    }).$inject = ['$rootScope'];
}).bind(window);

I've also tried wrapping all my controllers like:

(function (angular) { "use strict";

// controller in here }(window.angular));

Anyone else have some ideas? Thanks!

EDITED! -- Additional Error stacks :) --

    HTML1300: Navigation occurred.
localhost:8000
SCRIPT1006: Expected ')'
angular-mandrill.js (1,597)
SCRIPT5022: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=WebApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.5%2F%24injector%2Fmodulerr%3Fp0%3Dangular-mandrill%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.5.5%252F%2524injector%252Fnomod%253Fp0%253Dangular-mandrill%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A25%253A229)%250A%2520%2520%2520at%2520b%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A24%253A263)%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A25%253A13)%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A39%253A372)%250A%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A7%253A353)%250A%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A39%253A222)%250A%2520%2520%2520at%2520Anonymous%2520function%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A39%253A380)%250A%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A7%253A353)%250A%2520%2520%2520at%2520g%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A39%253A222)%250A%2520%2520%2520at%2520bb%2520(http%253A%252F%252Flocalhost%253A8000%252Fassets%252Fexternal%252Fangular%252Fangular.min.js%253A43%253A240)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A40%3A25)%0A%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A7%3A353)%0A%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A39%3A222)%0A%20%20%20at%20Anonymous%20function%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A39%3A380)%0A%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A7%3A353)%0A%20%20%20at%20g%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A39%3A222)%0A%20%20%20at%20bb%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A43%3A240)%0A%20%20%20at%20c%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A21%3A17)%0A%20%20%20at%20yc%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A21%3A325)%0A%20%20%20at%20ee%20(http%3A%2F%2Flocalhost%3A8000%2Fassets%2Fexternal%2Fangular%2Fangular.min.js%3A20%3A156)
angular.min.js (40,25)
rendered http://localhost:8000/assets/css/style.less successfully.
css for http://localhost:8000/assets/css/style.less generated in 1641ms
less has finished. css generated in 1641ms

Stephane Janicaud Stephane Janicaud · Accepted Answer · 2017-04-05T21:56:57

try this, it should work :

(function() {

  angular.module('WebApp', ['ngRoute', 'ui.bootstrap', 'angular-mandrill', 'firebase']);   

  angular.module('WebApp').run(['$rootScope', '$timeout', function($rootScope, $timeout) {

     $timeout(function() {
        $rootScope.$on('$routeChangeSuccess', function(ev, data) {
            if (data && data.controller) {
                var controller = data.controller;
                controller = controller.charAt(0).toLowerCase() + controller.slice(1);
                controller = controller.replace(/Controller/g, '');
                $rootScope.controller = controller;
            }
        });
    }, 100);

    }]);

})(); ;

Error stacks shows that module 'angular-mandrill' is not available. Ensure it's loaded before your WebApp module is initialized.

Add angular-mandrill.js to your HTML.

<script src="//rawgit.com/mrkvngrkn/angular-mandrill/master/dist/angular-mandrill.js"></script>

Then, add angular-mandrill as a module dependency for your app. Do the same for ui.bootstrap and firebase

angular.module('WebApp', ['angular-mandrill']);

Angularjs Failed to instantiate module WebApp due to: Error: at Anonymous function

1 Answers