Error: $injector:unpr Unknown Provider in AngularJS

Question

I'm trying to do test app on AngularJS but stuck on few days on one place with this error:

angular.js:38 Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.4.1/$injector/unpr?p0=AuthtokenProvider%20%3C…terceptor%20%3C-%20%24http%20%3C-%20%24templateRequest%20%3C-%20%24compile

as I could understand, I did a mistake somewhere in the references:

can you show me where my code below

mainController.js:

angular.module('mainController', [])

.controller('MainController', function($rootScope, $location, Auth) {

        var vm = this;

        vm.LoggedIn = Auth.isLoggedIn();

        $rootScope.$on('$routeChangeStart', function () {
            vm.LoggedIn = Auth.isLoggedIn();

            Auth.getUser()
                .then(function (data) {
                    vm.user = data.data;
                });
        });

        vm.doLogin = function () {

            vm.processing = true;

            vm.error = '';

            Auth.login(vm.loginData.username, vm.loginData.password)
                .success(function (data) {
                    vm.processing = false;

                    Auth.getUser()
                        .then(function (data) {
                            vm.user = data.data;
                        });

                    if (data.success)
                        $location.path('/');
                    else
                        vm.error = data.message;

                });
        }

        vm.doLogout = function () {
            Auth.logout();
            $location.path('/logout');
        }
    });

userController.js:

    angular.module('userController', ['userService'])

.controller('UserController', function(User){

    var vm = this;

    User.all()
        .success(function (data) {
            vm.users = data
        })
})

.controller('UserCreateController', function(User, $location, $window){

        var vm = this;

        vm.signupUser = function () {
            vm.message = '';

            User.create(vm.userData)
                .then(function(response){
                    vm.userData = {};
                    vm.message = response.data.message;

                    $window.localStorage.setItem('token', response.data.token);
                    $location.path('/');
                })
        }
    })

authService.js:

angular.module('authService', [])

.factory('Auth', function($http, $q, AuthToken) {

        var  authFactory = {};

        authFactory.login = function(username, password){

            return $http.post('/api/login', {

                username: username,
                password: password
            })
                .success(function(data){
                    AuthToken.setToken(data.token);
                    return data;
                })
        }

        authFactory.logout = function(){
            AuthToken.setToken();
        }

        authFactory.isLoggedIn = function(){
            if(AuthToken.getToken())
                return true;
            else
                return false;
        }

        authFactory.getUser = function(){
            if(AuthToken.getToken())
            return $http.get('/api/me');
            else
            return $q.reject({ message: "User has no token"});
        }

        return authFactory;
    })

.factory('AuthToken', function($window){

        var  authTokenFactory = {};

        authTokenFactory.getToken = function(){
            return $window.localStorage.getItem('token');
        }

        authTokenFactory.setToken = function (token) {
            if(token)
            $window.localStorage.setItem('token', token);
            else
            $window.localStorage.removeItem('token');
        }

        return authTokenFactory;
    })

.factory('AuthInterceptor', function ($q, $location, Authtoken) {

        var interceptorFactory = {};

        interceptorFactory.request = function(config){

            var token = Authtoken.getToken();

            if(token){
                config.headers['x-access-token'] = token;
            }

            return config
        };

        interceptorFactory.responseError = function (response) {
            if(response.status == 403)
            $location.path('/login');

            return $q.reject(response);
        }

        return interceptorFactory;
    });

userService.js:

angular.module('userService', [])

.factory('User', function($http){

        var userFactory = {};

        userFactory.create = function(userData){
            return $http.post('/api/signup', userData);
        }

        userFactory.all = function(){
            return $http.get('/api/users');
        }

        return userFactory;
    });

app.js:

angular.module('MyApp', ['appRoutes', 'mainController', 'authService', 'userController', 'userService'])

.config(function($httpProvider){

        $httpProvider.interceptors.push('AuthInterceptor');
    });

app.routes.js:

angular.module('appRoutes', ['ngRoute'])

.config(function ($routeProvider, $locationProvider) {

        $routeProvider

            .when('/', {
                templateUrl: 'app/views/pages/home.html'
            })
            .when('/login',{
                templateUrl: 'app/views/pages/login.html'
            })
            .when('/signup', {
                templateUrl: 'app/views/pages/signup.html'
            });

        //$locationProvider.html5Mode(true);
        $locationProvider.html5Mode({
            enabled: true,
            requireBase: false
        });
    });

Answer 1

Maybe the problem is referencing the name of the module in different files. I read in another post here that this makes the module to load the number of times it is repetead. So asign a name to a variable and then use the variable in the rest of the files instead of naming it again.

Example of the forum.

Answer 2

You need to inject your authService into your mainController to make it available since you are using Auth in mainController:

angular.module('mainController', ['authService']);

Everytime you pass in the 2nd argument to module (the array) it creates a new module that doesn't have access to other modules that have been created. So you have to make them available to each other this way.

You can read about loading dependencies here