2

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

1 Answer 1

5

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.

Sign up to request clarification or add additional context in comments.

8 Comments

tried adding ngRoute file but still giving the same error
Use the non minified version of Angular it'll give you readable errors.
sorry not getting any readable errors after using non minified also , error persists
Try removing the ="" from the ng-view attribute.
I have uploaded my project folder here sendspace.com/file/1xv9k6. Can u please download and check if you dont mind
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.