Javascript AngularJS-错误：未捕获错误：[$injector:modulerr]http://_Javascript_Angularjs_Dependency Injection

Javascript AngularJS-错误：未捕获错误：[$injector:modulerr]http://

javascript angularjs dependency-injection

Javascript AngularJS-错误：未捕获错误：[$injector:modulerr]http://,javascript,angularjs,dependency-injection,Javascript,Angularjs,Dependency Injection,我是AngularJS的新手，一直在一个小网站上工作。目前，我正在将所有页面链接在一起，并使用Gulp创建一个分发文件夹。发行版的创建没有问题，但我最终得到了上面提到的错误。这是我的密码 index.html <!DOCTYPE html> <html lang="en" ng-app="arabicApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Comp

我是AngularJS的新手，一直在一个小网站上工作。目前，我正在将所有页面链接在一起，并使用Gulp创建一个分发文件夹。发行版的创建没有问题，但我最终得到了上面提到的错误。这是我的密码

index.html

<!DOCTYPE html>
<html lang="en" ng-app="arabicApp">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head 
         content must come *after* these tags -->

    <title>Ristorante Con Fusion</title>    
        <!-- Bootstrap -->
<!-- build:css styles/main.css -->
    <link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <!--<link href="styles/bootstrap-social.css" rel="stylesheet">
    <link href="styles/mystyles.css" rel="stylesheet">-->
<!-- endbuild -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div ui-view="sidebar"></div>
    <div ui-view="content"></div>

    <!-- build:js scripts/main.js -->
        <script src="../bower_components/angular/angular.min.js"></script>
        <script src="../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
        <!--<script src="https://code.angularjs.org/1.6.4/angular.js"></script>
        <script src="https://code.angularjs.org/1.6.4/angular-route.js"></script>-->
        <script src="scripts/app.js"></script>
        <!--<script src="scripts/controllers.js"></script>
        <script src="scripts/services.js"></script>-->
    <!-- endbuild -->

</body>

</html>

sidebar.html

<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand"><a href="#">Lessons</a></li>
        <li><a ui-sref="app.verbSelect">Verbs</a></li>
        <li><a ui-sref="app">Nouns</a></li>
    </ul>
</div>

有人能解释一下我遗漏了什么吗？显然，我没有包括一些我应该包括的东西。任何帮助都将不胜感激

多谢各位

编辑：这里是错误

main-665edfe53c.js:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=arabicApp&p1=Error%…20(http%3A%2F%2Flocalhost%3A3000%2Fscripts%2Fmain-665edfe53c.js%3A1%3A8239)
    at main-665edfe53c.js:1
    at main-665edfe53c.js:1
    at o (main-665edfe53c.js:1)
    at u (main-665edfe53c.js:1)
    at Bt (main-665edfe53c.js:1)
    at i (main-665edfe53c.js:1)
    at Q (main-665edfe53c.js:1)
    at X (main-665edfe53c.js:1)
    at main-665edfe53c.js:6
    at HTMLDocument.n (main-665edfe53c.js:1)

编辑：这是我的bower.json文件。我认为这可能值得包括在这里

{
  "name": "class",
  "description": "Arabic Class",
  "main": "index.html",
  "keywords": [
    "Arabic",
    "Class",
    "Practice"
  ],
  "authors": [
    "Ba"
  ],
  "license": "MIT",
  "homepage": "",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "angular": "^1.6.4",
    "angular-ui-router": "^0.4.2"
  },
  "devDependencies": {
    "font-awesome": "^4.7.0",
    "angular-resource": "^1.6.4",
    "angular-route": "^1.6.4",
    "angular": "^1.6.4",
    "angular-ui-router": "^0.4.2"
  }
}

编辑：错误是由于我在app.js文件中添加了依赖项“ui路由器”造成的。经过两天的努力寻找问题，我意识到我必须添加“ui.router”。那太令人沮丧了

您需要包括：

您可以从控制台共享完整的错误跟踪吗？它抱怨哪个模块？@Pete。当然我将编辑我的帖子，希望你检查了角度错误页面（错误日志中的url）。另外，我在你的应用程序中看到了

'ngResource'

依赖项，但它似乎没有包含在内。ngResource位于一个单独的js文件中，它不包含在

angular.js

中。你可以从@Pete:谢谢。我查看了一下URL，发现它出于某种原因提到了ngRoute。我在index.html文件中安装并包含angular-route.min.js以及angular-resource.min.js文件。然而，我最终还是得到了同样的错误。出于某种原因，URL仍然提到ngRoute。我不知道该怎么做。我在你的

index.html

中没有看到对

angular resource.js

的引用。它有angular.min.js和angular-ui-router.min.js。请添加

angular resource.min.js

。或者尝试从应用程序中删除

'ngResource'

依赖项。您可以从控制台共享完整的错误跟踪吗？它抱怨哪个模块？@Pete。当然我将编辑我的帖子，希望你检查了角度错误页面（错误日志中的url）。另外，我在你的应用程序中看到了

'ngResource'

依赖项，但它似乎没有包含在内。ngResource位于一个单独的js文件中，它不包含在

angular.js

index.html

中没有看到对

angular resource.js

的引用。它有angular.min.js和angular-ui-router.min.js。请添加

angular resource.min.js

。或者尝试从应用程序中删除

'ngResource'

依赖项。感谢您的回复。我用你的app.js文件替换了我的app.js文件，但是我仍然得到了同样的错误。你也不见了，请看我的更新答案。我在用bower下载了angular-resource.min.js文件后，实际上包含了它。见我上面的评论。然而，我仍然得到同样的错误。我不知道为什么。谢谢你的帮助，但是不管我怎么做，这个该死的错误都不会消失。因为你没有包括我的答案。谢谢你的回复。我用你的app.js文件替换了我的app.js文件，但是我仍然得到了同样的错误。你也不见了，请看我的更新答案。我在用bower下载了angular-resource.min.js文件后，实际上包含了它。见我上面的评论。然而，我仍然得到同样的错误。我不知道为什么。谢谢你的帮助，但不管我怎么做，这个该死的错误都不会消失。因为你没有包括ngResource

main-665edfe53c.js:1 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.4/$injector/modulerr?p0=arabicApp&p1=Error%…20(http%3A%2F%2Flocalhost%3A3000%2Fscripts%2Fmain-665edfe53c.js%3A1%3A8239)
    at main-665edfe53c.js:1
    at main-665edfe53c.js:1
    at o (main-665edfe53c.js:1)
    at u (main-665edfe53c.js:1)
    at Bt (main-665edfe53c.js:1)
    at i (main-665edfe53c.js:1)
    at Q (main-665edfe53c.js:1)
    at X (main-665edfe53c.js:1)
    at main-665edfe53c.js:6
    at HTMLDocument.n (main-665edfe53c.js:1)

{
  "name": "class",
  "description": "Arabic Class",
  "main": "index.html",
  "keywords": [
    "Arabic",
    "Class",
    "Practice"
  ],
  "authors": [
    "Ba"
  ],
  "license": "MIT",
  "homepage": "",
  "dependencies": {
    "bootstrap": "^3.3.7",
    "angular": "^1.6.4",
    "angular-ui-router": "^0.4.2"
  },
  "devDependencies": {
    "font-awesome": "^4.7.0",
    "angular-resource": "^1.6.4",
    "angular-route": "^1.6.4",
    "angular": "^1.6.4",
    "angular-ui-router": "^0.4.2"
  }
}

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-resource.js" type="text/javascript"></script>

// arabic-app.module.js
(function() {

  'use strict';

  angular.module('arabicApp', ['ui-router', 'ngResource']);

})();

// arabic-app.config.js
(function() {

  'use strict';

  angular.module('arabicApp').config(Config);

  Config.$inject = ['$stateProvider', '$urlRouterProvider']

  function Config($stateProvider, $urlRouterProvider) {
    $stateProvider
      .state('app', {
        url: '/',
        views: {
          'sidebar': {
            templateUrl: 'views/sidebar.html',
          },
          'content': {
            templateUrl: 'views/home.html',
            //controller  : 'IndexController'
          }
        }
      })
      .state('app.verbSelect', {
        url: 'verbSelect',
        views: {
          'content@': {
            templateUrl: 'views/VerbSelect.html',
            //controller: 'verbsController'
          }
        }
      })
      .state('app.verbPractice', {
        url: 'verbPractice',
        views: {
          'content@': {
            templateUrl: 'views/verbPractice.html',
            //controller: 'verbsController'
          }
        }
      });
    $urlRouterProvider.otherwise('/');
  }

})();