AngularJS：モジュール 'App'は利用できません！あなたはモジュール名のスペルが間違っているか、それをロードするのを忘れていました

私はangularJSを使って簡単なWebアプリケーションを開発していますが、私は解決できないこの問題に取り組んでいます。AngularJS：モジュール 'App'は利用できません！あなたはモジュール名のスペルが間違っているか、それをロードするのを忘れていました

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.

しかし、私はモジュール名のスペルを間違えたり、それをロードするのを忘れていなかったと確信している：私のウェブサイトを実行している私は、コンソールにこのエラーが発生します。これは私のindex.htmlである

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; 
}]);

：ここに私のコードです

<!DOCTYPE html> 
<html ng-app="App"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content="AUTHOR"> 
    <title>PROJECT NAME | Login</title> 
    <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css"> 
    <link rel="stylesheet" href="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.css"> 
    <link rel="stylesheet" href="css/main.css" type="text/css"> 
    </head> 
    <body ng-class="location" ng-cloak> 
    <div ng-view></div> 
    <script defer src="/bower_components/angular/angular.js"></script> 
    <script defer src="/bower_components/angular-route/angular-route.js"></script> 
    <script defer src="/bower_components/angular-aria/angular-aria.js"></script> 
    <script defer src="/bower_components/angular-animate/angular-animate.js"></script> 
    <script defer src="/bower_components/angular-messages/angular-messages.js"></script> 
    <script defer src="/bower_components/angular-ui-notification/dist/angular-ui-notification.min.js"></script> 
    <script defer src="/bower_components/angular-material/angular-material.js"></script> 
    <script defer src="/bower_components/jquery/dist/jquery.js"></script> 
    </body> 
</html>

そして、ここで私は

は、誰かが私に教えてくださいすることができ亭ですべてのパッケージを...インストールしましたどのように私はそれを解決することができますか？

出典

2016-05-31 Leonardo Minati

あなたのHTMLのどこかに 'ng-app =" App "'でアプリを含めましたか？ – thepio

このチェックリストは役に立つかもしれません：http://stackoverflow.com/a/26797874/930170 –

@thepio確かに、私のHTMLにはhtml（ng-app = "App"）があります –