Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:

I am trying to lazy load files by reading this POST. But not able to implement it. I am getting a 'module error' Error in the firebug.

Here is my project structure:

root
|----app
     |----script.js
     |----app.js
     |----appBootstrap.js
     |----login
          |----login.html
          |----login.js
     |----vendor
          |----angular.min.js
          |----angular-route.min.js
|----index.html

index.html code:

<!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>

    </head>
    <body ng-view="">

        <!-- javascript files-->
        <script type="text/javascript" rel="javascript" src="app/vendor/angular.min.js"></script>
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.min.js"></script>
<script type="text/javascript" rel="javascript" src="app/script.js"></script>
        <script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script>

    </body>
    </html>

app.js code :

(function()
{
    var myApp = angular.module('myApp',[]);

    myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide)
        {
            myApp.controllerProvider = $controllerProvider;
            myApp.compileProvider    = $compileProvider;
            myApp.routeProvider      = $routeProvider;
            myApp.filterProvider     = $filterProvider;
            myApp.provide            = $provide;

            $routeProvider.when('/', {templateUrl:'login/login.html', resolve:{ deps: function($q, $rootScope)
            {
                var deferred = $q.defer();
                // Add dependencies here
                var dependencies =
                    [
                        'login/login.js'
                    ];

                $script(dependencies, function()
                {
                    // all dependencies have now been loaded by $script.js so resolve the promise
                    $rootScope.$apply(function()
                    {
                        deferred.resolve();
                    });
                });

                return deferred.promise;
            }}});
        });
})();

appBootstrap.js code:

$script(['app.js'], function()
{
    angular.bootstrap(document, ['myApp'])
});

When I try to load the root folder in the browser, I get the following error

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=myApp&p1=Error%3A%…calsearch_new%2Fbranches%2Fb1.0%2Fapp%2Fvendor%2Fangular.min.js%3A32%3A232) 

Could someone please explain what am I doing wrong?

Update 1: As suggested by @kartikluke added the ngRoute file (angular-route.min.js) but still showing same error but twice now

share|improve this question

1 Answer 1

up vote 3 down vote accepted

Well I followed the link in the error

Module Error
error
Description
This error occurs when a module fails to load due to some exception. The error message above should provide additional context.

In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute.

Add ngRoute

Alright so it doesn't seem to be ngRoute.

If you are not sure which module is missing, use the not minified angular.js which gives a readable error message: "Error: [$injector:nomod] Module 'ngRoute' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument."

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.js"></script>
<script type="text/javascript" rel="javascript" src="app/app.js"></script>
<script type="text/javascript" rel="javascript" src="app/script.js"></script>
<script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script>`

Alright I looked through your code and I found that after replacing with the unminified code and adding app.js to the scripts I found that the module $compileProvider was not injected.

enter image description here

myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide, $compileProvider)

Pretty simple in the end. Use the cdn and the unminified code will give you the correct errors.

share|improve this answer
    
tried adding ngRoute file but still giving the same error – VishwaKumar Feb 20 '14 at 8:41
1  
Use the non minified version of Angular it'll give you readable errors. – kartikluke Feb 20 '14 at 8:49
    
sorry not getting any readable errors after using non minified also , error persists – VishwaKumar Feb 20 '14 at 8:55
    
Are you getting the same error? – kartikluke Feb 20 '14 at 8:56
    
yes same error twice – VishwaKumar Feb 20 '14 at 8:57

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.