Angular injector error injecting factory into controller

Question

I am getting an injector error on clientService, and can't figure out why. I'm trying to create a clientsService and pass it into the clientsController, but it gets this error in Chrome tools. I'm fairly new to Angular, so any help would be greatly appreciated, as I need to get this project up and running as soon as possible.

angular.js:13003 Error: [$injector:unpr] Unknown provider: clientsServiceProvider <- clientsService <- clientsController
http://errors.angularjs.org/1.5.0-rc.0/$injector/unpr?p0=clientsServiceProvider%20%3C-%20clientsService%20%3C-%20clientsController
    at angular.js:68
    at angular.js:4463
  `enter code here`  at Object.getService [as get] (angular.js:4616)
    at angular.js:4468
    at getService (angular.js:4616)
    at Object.invoke (angular.js:4648)
    at extend.instance (angular.js:9622)
    at nodeLinkFn (angular.js:8731)
    at compositeLinkFn (angular.js:8035)
    at publicLinkFn (angular.js:7915)


Here are the included file listings below
// app.js
// clientsController.js
// clientsService.js


////////////
// app.js //
////////////
var app = angular.module('app',
[
    'auth0',
    'ngRoute',
    'angular-storage',
    'angular-jwt',
    'scope'
]);

app.config(function myAppConfig($routeProvider,
    authProvider,
    $httpProvider,
    $locationProvider,
    jwtInterceptorProvider) {
    $routeProvider
        .when('/',
        {
            controller: 'clientsController',
            templateUrl: 'views/clients/clients.html',
            pageTitle: 'Clients',
            requiresLogin: true
        })
        .when('/login',
        {
            controller: 'loginController',
            templateUrl: 'views/login.html',
            pageTitle: 'Login'
        })
        .when('/clients',
        {
            controller: 'clientsController',
            templateUrl: 'views/clients/clients.html',
            pageTitle: 'Clients',
            requiresLogin: true
        });

    authProvider.init({
        domain: AUTH0_DOMAIN,
        clientID: AUTH0_CLIENT_ID,
        loginUrl: '/login'
    });

    authProvider.on('loginSuccess',
        function($location, profilePromise, idToken, store) {
            console.log("Login Success");
            profilePromise.then(function(profile) {
                store.set('profile', profile);
                store.set('token', idToken);
            });
            $location.path('/');
        });

    authProvider.on('loginFailure',
        function() {
            alert("Error");
        });

    authProvider.on('authenticated',
        function($location) {
            console.log("Authenticated");

        });

    jwtInterceptorProvider.tokenGetter = function(store) {
        return store.get('token');
    }

    // Add a simple interceptor that will fetch all requests and add the jwt token to its authorization header.
    // NOTE: in case you are calling APIs which expect a token signed with a different secret, you might
    // want to check the delegation-token example
    $httpProvider.interceptors.push('jwtInterceptor');
});

app.run(function($rootScope, auth, store, jwtHelper, $location) {
    $rootScope.$on('$locationChangeStart',
        function() {

            var token = store.get('token');
            if (token) {
                if (!jwtHelper.isTokenExpired(token)) {
                    if (!auth.isAuthenticated) {
                        auth.authenticate(store.get('profile'), token);
                    }
                } else {
                    // Either show the login page or use the refresh token to get a new idToken
                    $location.path('/');
                }
            }

        });
});

//////////////////////////
// clientsController.js //
//////////////////////////

angular.module('app').controller('clientsController', function ($scope, auth, $http, $location, $timeout,clientsService) {

    var vm = this;
    vm.auth = auth;
    vm.appTitle = "Ortho CRM";

    vm.loadClientsSummary = function() {
            clientsService.getAllClientsSummary(vm.currentPage - 1, vm.pageSize)
                .then(function(data) {
                        vm.totalRecords = data.totalRecords;
                        vm.clients = data.results;
                        vm.filteredClients = data.results;

                    },
                    function(error) {
                        $window.alert('Sorry, an error occurred: ' + error.data.message);
                    });
    }

    vm.loadClientById = function(id) {
        for (var i = 0; i < vm.clients.length; i++) {
            var cli = vm.clients[i];
            if (cli.id === id) {
                return cli;
            }
        }
        return null;
    }

    vm.init = function() {
        alert("Init");
        vm.loadClientsSummary();
    }

    vm.init();

});

////////////////////
// clientsService //
////////////////////

angular.module('app').factory('clientsService',function($http, $q) {

        var serviceBase = '/api/clientsService/',

        factory = {};

        //////////////
        // Clients //
        /////////////

        // Creates

        factory.insertClient = function(client) {
            return $http.post(serviceBase + 'postClient', client)
                .then(function(results) {
                    client.id = results.data.id;
                    return results.data;
                });
        };

        // Reads

        factory.getAllClientsSummary = function(pageIndex, pageSize) {
            return getPagedResource('ApiClientsSummary', pageIndex, pageSize);
        };

        factory.getClientById = function(id) {
            //then does not unwrap data so must go through .data property
            //success unwraps data automatically (no need to call .data property)
            return $http.get(serviceBase + 'GetClientById/' + id);
        };

        factory.getLeadStrengthValuesByClientId = function(id) {
            //then does not unwrap data so must go through .data property
            //success unwraps data automatically (no need to call .data property)
            return $http.get(serviceBase + 'GetLeadStrengthValuesByClientId/' + id);
        };

        factory.getActiveClientLeadStatusByClientId = function(id) {
            return $http.get(serviceBase + 'GetActiveClientLeadStatusByClientId/' + id);
        }

        // Updates

        factory.updateClient = function(client) {
            return $http.put(serviceBase + 'putClient/' + client.id, client)
                .then(function(status) {
                    return status.data;
                });
        };

        // Deletes

        factory.deleteClient = function(id) {
            return $http.delete(serviceBase + 'deleteClient/' + id)
                .then(function(status) {
                    return status.data;
                });
        };

        //////////////
        // Contacts //
        //////////////

        // Creates

        // Reads

        factory.getClientContactByClientId = function(id) {
            //then does not unwrap data so must go through .data property
            //success unwraps data automatically (no need to call .data property)
            return $http.get(serviceBase + 'GetClientContactByClientId/' + id);
        };

        factory.getClientContactSummaryByClientId = function(id) {
            return $http.get(serviceBase + 'GetClientContactSummaryByClientId/' + id);
        };

        factory.getClientChampionContactByClientId = function(id) {
            //then does not unwrap data so must go through .data property
            //success unwraps data automatically (no need to call .data property)
            return $http.get(serviceBase + 'GetClientChampionContactByClientId/' + id);
        };

        // Updates
        factory.updateContact = function(contact) {
            return $http.put(serviceBase + 'updateContact/' + contact.clientId, contact)
                .then(function(status) {
                    return status.data;
                });
        };

        // Deletes


        ////////////
        // States //
        ////////////

        // Creates

        // Reads

        factory.getAllStates = function() {
            return $http.get(serviceBase + 'getAllStates')
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        factory.getStateById = function(id) {
            return $http.get(serviceBase + 'getStateById/' + id)
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        ////////////////
        // Phone Type //
        ////////////////

        // Creates

        // Reads

        factory.getAllPhoneTypes = function() {
            return $http.get(serviceBase + 'getAllPhoneTypes')
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        factory.getPhoneTypeById = function(id) {
            return $http.get(serviceBase + 'getPhoneTypeById/' + id)
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        ////////////////////////
        // CellPhoneProviders //
        ////////////////////////

        // Creates

        // Reads

        factory.getAllCellPhoneProviders = function() {
            return $http.get(serviceBase + 'getAllCellPhoneProviders')
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        factory.getCellPhoneProviderById = function(id) {
            return $http.get(serviceBase + 'getCellPhoneProviderById/' + id)
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        ////////////////////
        // ContactMethods //
        ////////////////////

        // Creates

        // Reads

        factory.getAllContactMethods = function() {
            return $http.get(serviceBase + 'getAllContactMethods')
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        factory.getContactMethodById = function(id) {
            return $http.get(serviceBase + 'getContactMethodById/' + id)
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        /////////////////
        // ClientTypes //
        /////////////////

        // Creates

        // Reads

        factory.getAllClientTypes = function() {
            return $http.get(serviceBase + 'getAllClientTypes')
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        factory.getClientTypeById = function(id) {
            return $http.get(serviceBase + 'getClientTypeById/' + id)
                .then(
                    function(results) {
                        return results.data;
                    });
        };


        //////////////////////////
        // Client Lead Statuses //
        //////////////////////////

        // Creates

        // Reads

        factory.getAllClientLeadStatuses = function() {
            return $http.get(serviceBase + 'GetAllClientLeadStatuses');
        }

        factory.getClientLeadStatusById = function(id) {
            return $http.get(serviceBase + 'getClientLeadStatusById/' + id)
                .then(
                    function(results) {
                        return results.data;
                    });
        };

        factory.checkUniqueValue = function(id, property, value) {
            if (!id) id = 0;
            return $http.get(serviceBase + 'checkUnique/' + id + '?property=' + property + '&value=' + escape(value))
                .then(
                    function(results) {
                        return results.data.status;
                    });
        };

        function getPagedResource(baseResource, pageIndex, pageSize) {
            var resource = baseResource;
            resource += (arguments.length == 3) ? buildPagingUri(pageIndex, pageSize) : '';
            return $http.get(serviceBase + resource)
                .then(function(response) {
                    var clients = response.data;
                    //extendCustomers(custs);
                    return {
                        totalRecords: parseInt(response.headers('X-InlineCount')),
                        results: clients
                    };
                });
        }

        function buildPagingUri(pageIndex, pageSize) {
            var uri = '?$top=' + pageSize + '&$skip=' + (pageIndex * pageSize);
            return uri;
        }

        return factory;
    });

Answer 1

1. Yes, the issue will occur in crome if your view is making using of "ng-strict" directive which means that all custom injections(not angular inbuild) should be be properly declared and injected. If thats the case, then try explicit injection. Something like this:

   app.controller("clientsController", clientsController);
   
   clientsController.$inject = ["clientsService", "$scope", "auth", "$http","$location", "$timeout"];
   
   function clientsController(clientsService, $scope, auth, $http, $location, $timeout)
   {
     // Controller functions
   }
   

2. Not sure, if your application is build in MVC? But, try checking if you have added and registered your "customerService.js" as a ScriptBundle in BundleConfig of AppStart.

Answer 2

You must inject the service into your controller.

angular.module('clientsController', ['clientsService']);

Answer 3

It seems possible that you may not be including your clientsService.js in your index.html file.

You need to include it (and before your app.js script) in your html.

For example

<script src="js/clientsService.js" type='text/javascript'/> <script src="js/app.js" type='text/javascript'/>