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
..........

}

score 3 · Accepted Answer · edited May 23 '17 at 11:48

3

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.

edited May 23 '17 at 11:48

Community

1
1

answered Nov 05 '16 at 17:56

fiso

1,375
1
14
20

not sure that this is the problem. I did npm install ngstorage --save, and I added the cdn script src to my index.html – Matoy Nov 05 '16 at 18:02
Don't use the cdn if you have it installed, just use the local path to the file. – fiso Nov 05 '16 at 18:08
@Matoy, check my update, I think there is the answer. – fiso Nov 05 '16 at 18:13
Thanks. I did it and error msg is gone, but now the localstorage is undefined. (update my quesiton) – Matoy Nov 05 '16 at 18:34
What is undefined, the $localStorage or $localStorage.jwt? – fiso Nov 05 '16 at 18:39
$localStorage, that is why I get: "TypeError: Cannot read property 'jwt' of undefined" – Matoy Nov 05 '16 at 18:41
I am using $localStorage on another controller. there i tried to read the value of $localStorage.jwt (after I set it in the signin controller). there I get this error saying that $localStorage is undefined. however, even if the assingment did go well, $localStorage should not be undefined. – Matoy Nov 05 '16 at 18:43
Can you show the code where $localStorage is undefined? – fiso Nov 05 '16 at 18:52
that solved it. thank u so much.. one last thing - can you explain to me why the number of modules (the square brackets) should ovelap the number of string in the function paramaters? – Matoy Nov 05 '16 at 19:55

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

1 Answers1