title: Angular Js HTML5 Mode not working
body: <p>I'm trying to add HTML5 mode to my angular app to remove the "#" symbol. 
  The issue is that it just doesn't work. My entire ng-view will not display! Here is my code:</p>
  
  <pre><code>var app = angular.module('app', [
      'ngRoute',
      ...    ]);
  app.config(['$routeProvider, $locationProvider',
  function($routeProvider, $locationProvider) {
      $locationProvider.html5Mode(true);
      $routeProvider.
          when('/', {
              templateUrl: 'partials/main.html'
          }).
          when('/raw-communication', {
              templateUrl: 'partials/raw-communication.html',
              controller: 'RawCommunicationCtrl'
          }).
          otherwise({
              redirectTo: "/404"
          });
  }
  ]);
  </code></pre>
  
  <p>My url that I am using is localhost:8080. It's worth mentioning that everything works when I remove the code for html5Mode.</p>
  
  <p>When I mean it doesn't work, I mean nothing shows up on the entire ng-view directive. For instance if I had this:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="app"&gt;
  &lt;head&gt;
      &lt;base href="/"/&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Stock App&lt;/title&gt;
      &lt;script src="bower_components/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt;
      ...
  &lt;/head&gt;
  &lt;body&gt;
  &lt;h1&gt;Stock App&lt;/h1&gt;
  &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>only the h1 tag will appear. The content that is meant to display is the partial from "partials/main.html".</p>
  
  <p>The URL has not changed when visiting localhost:8080, but a 404 error occurs when visiting localhost:8080/raw-trades.</p>
  
  <p>I have the following error in the console:</p>
  
  <blockquote>
    <p>Uncaught Error: [$injector:modulerr] <a href="http://errors.angularjs.org/1.3.13/" rel="nofollow noreferrer">http://errors.angularjs.org/1.3.13/</a>$injector/modulerr?p0=app&amp;p1=Error%3A%20…Flocalhost%3A8080%2Fbower_components%2Fangular%2Fangular.min.js%3A38%3A135)</p>
  </blockquote>
  
  <p>No other 404 errors occurred in my network tab.</p>
  
  <p>UPDATE 3:</p>
  
  <p>This is not a duplicate, as the homepage should still be working.</p>
  
  <p>UPDATE: <a href="https://docs.angularjs.org/error/$injector/modulerr?p0=app&amp;p1=Error:%20%5B$injector:unpr%5D%20http:%2F%2Ferrors.angularjs.org%2F1.3.14%2F$injector%2Funpr%3Fp0%3D%2524routeProvider%252C%2520%2524locationProvider%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:6:417%0A%20%20%20%20at%20http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:38:7%0A%20%20%20%20at%20d%20(http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:36:13)%0A%20%20%20%20at%20Object.e%20%5Bas%20invoke%5D%20(http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:36:283)%0A%20%20%20%20at%20d%20(http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:34:498)%0A%20%20%20%20at%20http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:35:117%0A%20%20%20%20at%20s%20(http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:7:302)%0A%20%20%20%20at%20g%20(http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:34:399)%0A%20%20%20%20at%20ab%20(http:%2F%2Flocalhost:8080%2Fbower_components%2Fangular%2Fangular.min.js:38:135" rel="nofollow noreferrer">full error link</a></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I have narrowed down my problem; the following works:</p>
  
  <pre><code>app.config(['$routeProvider',
      function($routeProvider) {
         ...
      }
  ]);
  </code></pre>
  
  <p>but this does not:</p>
  
  <pre><code>app.config(['$routeProvider, $locationProvider',
      function($routeProvider, $locationProvider) {
         ...
      }
  ]);
  </code></pre>
  
  <p>Regardless if I am actually using <code>$locationProvider</code>.</p>
  
  <p><strong>NEW UPDATE</strong></p>
  
  <p>It's meant to be</p>
  
  <pre><code>app.config(['$routeProvider', '$locationProvider',
  </code></pre>
  
  <p>NOT</p>
  
  <pre><code>app.config(['$routeProvider, $locationProvider',
  </code></pre>
  
  <p>What a waste of an hour!</p>