title: How do I fix Error: [$injector:unpr] Unknown provider?
body: <p>I am getting a <code>angular.js:14362 Error: [$injector:unpr] Unknown provider: reportTypeServiceProvider &lt;- reportTypeService &lt;- ReportTypeController</code> error.</p>
  
  <p>I've found a bunch of stuff about this, but I still can't figure out what the issue is in my code. Here it is:</p>
  
  <p>pitchviz.js:</p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('pitchviz', [
        'pitchviz.config',
        'pitchviz.routes',
        'pitchviz.report-types'
      ]);
  
    angular
      .module('pitchviz.config', []);
  
    angular
      .module('pitchviz.routes', ['ngRoute']);
  
    angular
      .module('pitchviz')
      .run(run);
  
    run.$inject = ['$http'];
  
    function run($http) {
      $http.defaults.xsrfHeaderName = 'X-CSRFToken';
      $http.defaults.xsrfCookieName = 'csrftoken';
    }
  })();
  </code></pre>
  
  <p>pitchviz.config.js:</p>
  
  <pre><code>(function () {
  'use strict';
  
    angular
      .module('pitchviz.config')
      .config(config);
  
    config.$inject = ['$locationProvider'];
  
    function config($locationProvider) {
      $locationProvider.html5Mode(true);
      $locationProvider.hashPrefix('!');
    }
  })();
  </code></pre>
  
  <p>pitchviz.routes.js:</p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('pitchviz.routes')
      .config(config);
  
    config.$inject = ['$routeProvider'];
  
    function config($routeProvider) {
      $routeProvider.when('/', {
        controller: 'ReportTypeController',
        controllerAs: 'vm',
        templateUrl: '/static/templates/report-types/report-types.html'
      }).otherwise('/');
    }
  })();
  </code></pre>
  
  <p>report-types/report-types.modules.js:</p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('pitchviz.report-types', [
        'pitchviz.report-types.controllers',
        'pitchviz.report-types.services'
      ]);
  
    angular
      .module('pitchviz.report-types.controllers', []);
  
    angular
      .module('pitchviz.report-types.services', []);
  })();
  </code></pre>
  
  <p>report-types/controllers/report-type.controller.js:</p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('pitchviz.report-types.controllers')
      .controller('ReportTypeController', ['reportTypeService', ReportTypeController]);
  
    ReportTypeController.$inject = ['reportTypeService'];
  
    function ReportTypeController(reportTypeService) {
      var vm = this;
  
      vm.reportType = undefined;
  
      activate();
  
      function activate() {
  
        reportTypeService.get().then(reportTypeSuccess, reportTypeError);
  
        function accountSuccess(data, status, headers, config) {
          console.log(data);
          vm.reportType = data.data;
        }
  
        function reportTypeError(data, status, headers, config) {
          console.log(data);
          console.log(status);
        }
      }
    }
  })();
  </code></pre>
  
  <p>report-type/services/report-type.service.js:</p>
  
  <pre><code>(function () {
    'use strict';
  
    angular
      .module('pitchviz.report-types.services')
      .service('reportTypeService', ['reportTypeService', reportTypeService]);
  
    reportTypeService.$inject = ['$http'];
  
    function reportTypeService($http) {
      var reportTypeService = {
        get: get
      };
  
      return reportTypeService;
  
      function get() {
        console.log("service");
        return $http.get('/api/report-types/');
      }
    }
  })();
  </code></pre>
  
  <p>What's going on here? Thanks!</p>