I'm trying to set up a simple token based authentication and have so far been able to create the tokens and save them to local storage, but when I try to create an interceptor that includes the token to every request sent I get a strange error:

Error: [$injector:unpr] http://errors.angularjs.org/1.6.6/$injector/unpr?p0=%24localStorageProvider%20%3C-%20%24localStorage%20%3C-%20%24http%20%3C-%20%24templateRequest%20%3C-%20%24route

Here is the code that I use for the Interceptor

var app = angular.module('Jäsentietopalvelu', ["ngRoute"])

.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider){
        $locationProvider.hashPrefix('');
        $routeProvider
                .when('/', {
                templateUrl: 'login.html',
                })
                .when('/testi', {
                templateUrl: 'testi.html',
                })
                .when('/logout', {
                templateUrl: 'logout.html',
                })
                .when('/login', {
                templateUrl: 'login.html',
                })

        $httpProvider.interceptors.push(['$q','$location','$localStorage', function($q,$location, $localStorage){
                return {
                        'request': function (config){
                                config.headers = config.headers || {};
                                if ($localStorage.accessToken) {
                                        config.headers.Authorization = 'bearer ' + $localStorage.accessToken;
                                }
                                return config;
                        },
                        'responseError': function(response){
                                if(response.status === 401 || response.status === 403) {
                                        $location.path('/');
                                }
                                return $q.reject(response);
                        }
                };
        }]);
}])

In what way should I create the interceptor so that it works properly? Is it supposed to be in module.config or somewhere else?

EDIT:

Here is my index -page

<html ng-app="Jäsentietopalvelu">
<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Jäsentietopalvelu</title>
        <script src="https://cdn.jsdelivr.net/ngstorage/0.3.10/ngStorage.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><!-- load jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script><!-- load angular -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.min.js"></script><!-- load angular routes -->
        <script src="core.js"></script>
</head>
<body ng-controller="mainCtrl">
        <ng-view></ng-view>
</body>

upvote
  flag
you are pushing $localStorage into your $httpProvider, while it's not injected into your config. Change config so it has it: .config(['$localStorage', ... , function($localStorage, ... – Aleksey Solovey
upvote
  flag
I added $localStorage to .config, and now I'm getting error like Error: [$injector:modulerr] errors.angularjs.org/1.6.6/$injector/… – nyoatype
upvote
  flag
That's a good sign, your first error was resolved, now you have the second one. Your module needs to have dependency injection to ngStorate. 31piy already posted an answer – Aleksey Solovey

1 Answers 11

up vote 0 down vote accepted

This error means that AngularJS could not find one of the required dependency in your project, named $localStorage.

I suspect you are using ngStorage in your code to deal with Local Storage in the browser using AngularJS.

First, you need to ensure that you've installed it as a dependency in the project. Follow these installation methods to get it in your project.

After installation, you need to ensure to declare it as a dependency in your angular module:

var app = angular.module('Jäsentietopalvelu', ["ngRoute", "ngStorage"]);

Then only you can use its components in your project.

upvote
  flag
I installed ngStorage using npm. After that I also tried to use the link to install the module but in both cases I got the following error. Error: [$injector:modulerr] errors.angularjs.org/1.6.6/$injector/… – nyoatype
upvote
  flag
@nyoatype -- You are loading the script for ngStorage before loading AngularJS. Moveit after AngularJS' script tag. – 31piy

Not the answer you're looking for? Browse other questions tagged or ask your own question.