title: Module 'App' is not available! You either misspelled the module name or forgot to load it in AngularJS
body: <p>I'm developing a simple web application using angularJS and I'm running into this issue I cannot resolve. Running my website I get this error in console:</p>
  
  <blockquote>
    <p>Uncaught Error: [$injector:modulerr] Failed to instantiate module App
    due to: Error: [$injector:nomod] Module 'App' is not available! You
    either misspelled the module name or forgot to load it. If registering
    a module ensure that you specify the dependencies as the second
    argument.</p>
  </blockquote>
  
  <p>But I'm sure I didn't misspell the module name or forgot to load it. Here's my code:</p>
  
  <pre><code>var App = angular.module('App', ['ngRoute', 'ngMaterial', 'ui-notification', 'ngFileUpload']);
  
  App.run(['$rootScope', '$location', function($rootScope, $location) {
      console.log("TEST");
  }]);
  App.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
      // TODO: routing
  }]);
  
  App.factory('file-uploader', ['Upload', function(Upload) {
      var uploadFile = function(file, callback) {
          var uploader;
          uploader = Upload.upload({
              url: 'SERVER URL' + '/upload-file',
              data: {
                  image: file
              }
          });
          uploader.then(function(fileData) {
              return callback(null, fileData);
          });
          uploader.catch(function(error) {
              return callback(error, null);
          });
      };
  
      return uploadFile;
  }]);
  </code></pre>
  
  <p>This is my index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="App"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content="AUTHOR"&gt;
      &lt;title&gt;PROJECT NAME | Login&lt;/title&gt;
      &lt;link rel="stylesheet" href="/bower_components/angular-material/angular-material.css"&gt;
      &lt;link rel="stylesheet" href="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.css"&gt;
      &lt;link rel="stylesheet" href="css/main.css" type="text/css"&gt;
    &lt;/head&gt;
    &lt;body ng-class="location" ng-cloak&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
      &lt;script defer src="/bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script defer src="/bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
      &lt;script defer src="/bower_components/angular-aria/angular-aria.js"&gt;&lt;/script&gt;
      &lt;script defer src="/bower_components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script defer src="/bower_components/angular-messages/angular-messages.js"&gt;&lt;/script&gt;
      &lt;script defer src="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.js"&gt;&lt;/script&gt;
      &lt;script defer src="/bower_components/angular-material/angular-material.js"&gt;&lt;/script&gt;
      &lt;script defer src="/bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And I've installed all the packages with bower...</p>
  
  <p>Can someone please tell me where is the problem and how can I solve it?</p>