title: js file isnt found when I put it in a bundle
body: <p>Current setup in my _Layout.cshtml I have the standard script tag with file path to a few angularjs files like so.</p>
  
  <pre><code>&lt;script src="~/Scripts/angularjs/Controller/MyController.js"&gt;&lt;/script&gt;...(plus a few more)
  </code></pre>
  
  <p>So instead of explicitly having all of them in the _layout file I wanted to bundle them. So I did in the BundleConfig.cs like so.</p>
  
  <pre><code> bundles.Add(new ScriptBundle("~/Scripts").Include(
   "~/angularjs/Factory/authService.js",
  "~/angularjs/Controller/MyController.js"));
  </code></pre>
  
  <p>Everything builds. However when I run it, the browser console window gives me an angular error saying that it can not find my authService.js file. The official error is as follows.</p>
  
  <blockquote>
    <p>Uncaught Error: [$injector:unpr] <a href="http://errors.angularjs.org/1.5.8/" rel="nofollow noreferrer">http://errors.angularjs.org/1.5.8/</a>$injector/unpr?p0=authServiceProvider%20%3C-%20authService</p>
  </blockquote>
  
  <p>So my question is why when I bundle my scripts does it not see the authService file. Bear in mind if I call it explicitly, my angular and webpage works fine with no errors. (I have also messed with the order that I call them in my bundle and I still can not get the webpage to work).</p>
  
  <p>Any help would be greatly appreciated.</p>
  
  <p>Edit: To provide a little bit of angular code here is my service.</p>
  
  <pre><code>(function () {
  
      var authService = function ($http, $q, localStorageService) {
      /*bunch of code*/
   };
  
      var module = angular.module("mainApp");
  
      module.factory("authService", authService);
  
  
  
  }());
  </code></pre>
  
  <p>So I made the following changes but I am still getting the same error along with an additional error in the web browser of "~Scripts/angularjs" responded with 403 error.</p>
  
  <pre><code>(function () {
  
      var module = angular.module("mainApp");
  
      module.factory("authService", authService);
  
      authService.$inject("$http", "$q", "localStorageService");
  
      var authService = function ($http, $q, localStorageService) {
  /*my code*/
  };
  }());
  </code></pre>
  
  <p>Final Solution:
  For clarification I will post what I did in order for it to work. The key was as pointed out by @Tommaso Sebastianelli to pass in the dependencies on the line module.factory in the []. Thanks so much for the prompt response.</p>
  
  <pre><code>(function () {
  
      var authService = function ($http, $q, localStorageService) {
  /*my code here*/
  
   };
      var module = angular.module("mainApp");
  
      module.factory("authService", ["$http", "$q","localStorageService", authService]);
  
  }());
  </code></pre>