Error: [$injector:unpr] Unknown provider: $localStorageProvider <- $localStorage <- authService

[jindovu]

Hi everyone, I run project and got something wrong, and I don't know why App.js var app = angular.module('AngularAuthApp', [ 'ngRoute', "angularUtils.directives.dirPagination", "LocalStorageModule", "angular-loading-bar", "authService"]);

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

    $routeProvider.otherwise("/");
    config.routeHome($routeProvider);
    config.routeAccount($routeProvider);

    $locationProvider.html5Mode(true);

}]);

Controller (function () { 'use strict'; angular .module('AngularAuthApp') .controller('loginController', loginController);

loginController.$inject = ['$scope', '$location', 'authService'];
function loginController($scope, $location, authService) {
    console.log("loginController");
    $scope.login = login;

    initController();

    function initController() {
        // reset login status
        authService.Logout();
    };

    function login() {
        $scope.loading = true;
        authService.Login($scope.username, $scope.password, function (result) {
            console.log(result);
            if (result === true) {
                $location.path('/home');
            } else {
                $scope.error = 'Username or password is incorrect';
                $scope.loading = false;
            }
        });
    };
}

})(); Service (function () { 'use strict';

angular.module('authService', ['angular-loading-bar']).factory('authService', authService);

authService.$inject = ['$http', '$localStorage'];
function authService($http, $localStorage) {
    console.log("test");
    var service = {};

    service.Login = Login;
    service.Logout = Logout;

    return service;

    function Login(userName, password, callback) {
        $http.post('/api/token', { username: userName, password: password })
            .success(function (response) {
                // login successful if there's a token in the response
                if (response.token) {
                    // store username and token in local storage to keep user logged in between page refreshes
                    $localStorage.currentUser = { username: userName, token: response.token };

                    // add jwt token to auth header for all requests made by the $http service
                    $http.defaults.headers.common.Authorization = 'Bearer ' + response.token;

                    // execute callback with true to indicate successful login
                    callback(true);
                } else {
                    // execute callback with false to indicate failed login
                    callback(false);
                }
            });
    }

    function Logout() {
        // remove user from local storage and clear http auth header
        delete $localStorage.currentUser;
        $http.defaults.headers.common.Authorization = '';
    }
}

})(); Please help me, Thank you so much.

[egilkh]

You need to add ngStorage as a dependency in your angular.module call.

var app = angular.module('AngularAuthApp', [
  'ngStorage',
  'ngRoute',
  'angularUtils.directives.dirPagination',
  'LocalStorageModule',
  'angular-loading-bar',
  'authService'
]);

[jindovu]

Yes, I have tried it however it's throw new exception Error: [$injector:modulerr] Failed to instantiate module AngularAuthApp due to: [$injector:modulerr] Failed to instantiate module ngStorage due to: [$injector:nomod] Module 'ngStorage' 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. http://errors.angularjs.org/1.5.8/$injector/nomod?p0=ngStorage minErr/<@http://localhost:5000/lib/angular/angular.js:68:12 module/<@http://localhost:5000/lib/angular/angular.js:2082:17 ensure@http://localhost:5000/lib/angular/angular.js:2006:38 module@http://localhost:5000/lib/angular/angular.js:2080:14 loadModules/<@http://localhost:5000/lib/angular/angular.js:4617:22 forEach@http://localhost:5000/lib/angular/angular.js:321:11 loadModules@http://localhost:5000/lib/angular/angular.js:4601:5 loadModules/<@http://localhost:5000/lib/angular/angular.js:4618:40

And here is my view register Js

<script type="text/javascript" src="lib/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="lib/angular/angular.js"></script>
    <script type="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
    <script type="text/javascript" src="lib/angular-route/angular-route.js"></script>
    <script type="text/javascript" src="lib/angular-resource/angular-resource.js"></script>
    <script type="text/javascript" src="lib/angular-local-storage/dist/angular-local-storage.js"></script>
    <script type="text/javascript" src="lib/angular-utils-pagination/dirPagination.js"></script>
    <script type="text/javascript" src="lib/angular-loading-bar/src/loading-bar.js"></script>
    <script type="text/javascript" src="lib/ngStorage/dist/angularLocalStorage.min.js"></script>

[egilkh]

Did you include the ngStorage.js file?

By the way, it is impossible to read your pastes, they loose all formatting and end up as text and not code :)

[jindovu]

Yes, I have been included file in my view, it's not working

[egilkh]

<script type="text/javascript" src="lib/ngStorage/dist/angularLocalStorage.min.js"></script>

This isn't our ngStorage. Try adding

<script src="https://cdn.jsdelivr.net/ngstorage/0.3.6/ngStorage.min.js"></script>

[jindovu]

OMG, it's working now, Thank you for your help

[egilkh]

👍