Unknown provider: ngStorageProvider <- ngStorage when trying to use Angular ngStorage

Question

I have this code below that uses ngStorage. but when I try to run this is part of my angular app I get this error to the console:

Error: [$injector:unpr] Unknown provider: ngStorageProvider <- ngStorage <- signupController

Why?

sign in controller.js

var smallTalkzModel = angular.module('smallTalkzModel', ['ui.router', 'luegg.directives', 'ngCookies', 'ngStorage', 'angular-jwt']);

smallTalkzModel.controller('signupController', ['$scope', '$location', '$http', 'userDetails','ngStorage',
    function ($scope, $location, $http, userDetails,$localStorage) {

        $scope.register_user = function (info) {
            $http({
                url: '/register_user',
                method: 'POST',
                data: info
            }).then(function (response) {
                $localStorage.jwt = response.data.id_token;
                $location.path('main');
            }, function (error) {
                alert(error.data);
            });
        }
    }]);

update:

changed the code to include the $localStoragein the controller paramters. now the error mesge is gone, but the $localStorage is undefined after I make an assigmnet into it...

controller('signupController', ['$scope', '$location', '$http', 'userDetails', '$localStorage',
    function ($scope, $location, $http, userDetails, $localStorage) {

        $scope.login_info = "";
        $scope.userDetails = userDetails.isLogged;
        $scope.userLogin = false;
        $http.get('/online_users')
            .success(function (data) {
                $scope.usersNumber = data.length;
            })
            .error(function (data) {
                console.log('Error: ' + data);
            });

        $scope.register_user = function (info) {
            $http({
                url: '/register_user',
                method: 'POST',
                data: info
            }).then(function (response) {
                $localStorage.jwt = response.data.id_token;
                $location.path('main');
            }, function (error) {
                alert(error.data);
            });
        }

    }]);

this is where my code throw the error of undefined localstorage:

mainController.js

smallTalkzModel.controller('mainController', ['$scope', 'sessionInfo', '$location', '$http', 'userDetails','$localStorage',
    function ($scope, sessionInfo, $location, $http, userDetails, jwtHelper,$localStorage) {

        $scope.login_info = "";
        $scope.userLogin = userDetails.isLogged;

        var jwt = $localStorage.jwt; // here $localStorage is undefined
..........

}

Answer 1

You need to install ngStorage, and add it to your project. It is not part of angular core.

If you have it already installed, the error could be caused because you forgot to add the script in your project.

Here the official documentation: https://github.com/gsklee/ngStorage

Here an example: How to use ngStorage in angularjs

UPDATE :

I see than in the controller signupController you are injecting ngStorage (in the string part) when the injection should be $localStorage or $sessionStorage. This is causing the issue because ngStorage is a module, not a provider.

UPDATE 2 :

When you are declaring the mainController, the second parameter are the modules that your controller depends on, there, you forgot to add the string for jwtHelper, just before the String for $localStorage. So there is one String less that variables you have in your function.