Search code examples
angularjsangularjs-provider

AngularJS unknown provider after code refactoring


I have an app which worked great, until I decided to refactor the code and use Gulp for my project. Here is the error I get:

Error: [$injector:unpr] Unknown provider: _Provider <- _ <- utilsFactory <- storageService <- httpRequestInterceptor <- $http <- $templateFactory <- $view <- $state

Since I'm not sure how to read this error and if they all have an issue or if it's only one of them, here are the two places where I use some of these providers when I start my app:

app.run(function($rootScope, $state, storageService, modalsFactory, appFactory, _) { ... }

And:

angular.module("mediaControl").controller("loginCtrl", function ($state, $translate, authService, utilsFactory, appFactory, storageService) { ... }

In my index.html file, I have:

<!-- inject:js -->
  <script src="src/mediaControl.js"></script>
  ...
  <script src="src/login/providers/httpRequestInterceptor.service.js"></script>
  ...
  <script src="src/common/providers/utils.factory.js"></script>
  <script src="src/common/providers/storage.service.js"></script>
  ...
  <script src="src/login/login.controller.js"></script>
  ...
  <!-- endinject -->

What I checked/did:

  • Check if Gulp put all of the necessary js files in index.html and in the good order (seems ok to me)
  • Check the names of the providers (I didn't change them during the refactoring though)
  • Try to remove my custom providers from loginCtrl and app.run (I still have the same error when I'm doing this)

I read the documentation and some SO questions, but I don't see anything that I would do wrong, considering that my app worked before the refactoring (which consists in reorganizing my file structure, renaming the files, and starting to rewrite the code using ES6 standards). Any idea about what could be wrong here?


Solution

  • As noticed by @shaunhusain, the lodash provider was missing in my index.html. I fixed my Gulpfile so that the file is injected as well, and it works.