Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr]

Question

I'm using loopback for backend and postgresql for database. so I tried to use lb-service/js.

If I tried to inculde lbServices in login.js (angular.module('myApp',['ngRoute' ,'lbServices']) .. etc) means getting the error.

error details:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module ngRoute due to: 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.

Index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Myapps</title>
        <!-- Bootstrap -->
        <link href="vendor/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
        <script src="vendor/theme_files/js/jquery.min.js"></script>
        <script src="vendor/angular/angular.js"></script>
        <script src="vendor/angular-resource/angular-resource.js"></script>
        <script src="vendor/angular-ui-router/release/angular-ui-router.js"></script>
        <script src="js/services/lb-services.js"></script>
    </head>
    <body ng-app="myApp" class="nav-md " style="background:#F7F7F7;">
        <div class="container body" ui-view></div>
        <script src="vendor/bootstrap/dist/js/bootstrap.js"></script>
        <script src="js/app.js"></script>
        <script src="js/controllers/loginController.js"></script>
        <script src="js/services/login.js"></script>

    </body>
</html>

login.html

<div id="wrapper">
    <div id="login" class="animate form">
        <section class="login_content">
            <form ng-submit="login()">
                <br>
                <h1>Login</h1>
                <div>
                    <input type="text" class="form-control" ng-model="loginForm.username" placeholder="Username" required="" />
                </div>
                <div>
                    <input type="password" class="form-control" ng-model="loginForm.password" placeholder="Password" required="" />
                </div>
                <div>

                    <button type="submit" class="btn btn-default submi" ng-disabled="disabled">
                        Log in
                    </button>

                    <a class="reset_pass" href="#">Lost your password?</a>
                </div>
                <div ng-show="error" class="alert alert-danger">
                    {{errorMessage}}
                </div>
            </form>
        </section>
        <!-- content -->
    </div>

</div>

app.js

angular.module('myApp', ['lbServices', 'ui.router']).config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
    $stateProvider.state('todo', {
        url : '',
        templateUrl : 'views/login.html',
        controller : 'loginController'
    }).state('login', {
        url : '/login',
        templateUrl : 'views/login.html',
        controller : 'loginController'
    }).state('profile', {
        url : '/profile',
        templateUrl : 'views/profile.html',
        controller : 'loginController'
    });
    $urlRouterProvider.otherwise('login');

}]);

logincontroller.js

angular.module('myApp').controller('loginController', ['$scope', '$location', 'AuthService',
function($scope, $location, AuthService) {
    $scope.login = function() {
        // initial values
        $scope.error = false;
        $scope.disabled = true;
        // call login from service
        AuthService.login($scope.loginForm.username, $scope.loginForm.password)
        // handle success
        .then(function() {
            $location.path('/index');
            $scope.disabled = false;
            $scope.loginForm = {};
        })
        // handle error
        .catch(function() {

            $scope.error = true;
            $scope.errorMessage = "Invalid username and/or password";
            $scope.disabled = false;
            $scope.loginForm = {};
        });

    };

}]);

service/login.js

angular.module('myApp',['ngRoute' ,'lbServices']).factory('AuthService', ['$q', '$timeout', '$http',
function($q, $timeout, $http) {

    // create user variable
    var user = null;

    // return available functions for use in controllers
    return ( {
        isLoggedIn : isLoggedIn,
        getUserStatus : getUserStatus,
        login : login,
        logout : logout,
        register : register
    });

    function isLoggedIn() {
        if (user) {
            return true;
        } else {
            return false;
        }
    }

    function getUserStatus() {
        return user;
    }

    function login(username, password) {

        // create a new instance of deferred
        var deferred = $q.defer();
        // send a post request to the server
        $http.post('/api/login', {
            username : username,
            password : password
        })
        // handle success
        .success(function(data, status) {
            if (data.status === 200 && data.status) {
                user = true;
                deferred.resolve();
            } else {
                user = false;
                deferred.reject();
            }
        })
        // handle error
        .error(function(data) {
            user = false;
            deferred.reject();
        });

        // return promise object
        return deferred.promise;

    }

}]);

you are using ui.router, not angular ngRoute in your application. Why did you try to inject ngRoute at all?. — Claies
also, you are overwriting the myApp module by using the setter syntax in multiple files. github.com/johnpapa/angular-styleguide#setting-vs-getting — Claies

Fazal Rasel Fazal Rasel · Accepted Answer · 2016-02-05T04:42:06

0

votes

edit login.js to

angular.module('myApp',['ui.router' ,'lbServices'])

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr]

1 Answers