设置 angular-ui-router 时在控制台中接收 [$injector:modulerr]答案

【问题标题】：Receiving a [$injector:modulerr] in console when setting up angular-ui-router设置 angular-ui-router 时在控制台中接收 [$injector:modulerr]
【发布时间】：2016-06-07 00:50:35
【问题描述】：

我正在使用 angular.js 设置页面，并且正在使用 angular-ui-router 并且遇到了一个我似乎无法弄清楚的非常基本的问题。我需要正确的 CDN，并且我相信我已经正确设置了角度，但遇到了错误：

> angular.js:38Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=portfolioApp&p1=Err…oudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.5.5%2Fangular.min.js%3A21%3A19)

我的app.js如下：

> angular.module('portfolioApp', ['ui.router','ui.bootstrap']).config(['$stateProvider','$urlRouterProvider','$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) 
>{$urlRouterProvider.otherwise('/');  
> $stateProvider
>     .state('main', {
>       url: '/',
>       views: {
>         '/': {
>           templateUrl: '/views/main.html'
>         }
>       }
>     });   $locationProvider.html5Mode({
>     enabled: true,
>     requireBase: false   
>  }); 
>}]);

我的index.html 文件位于我的应用程序的主文件夹中：

<!DOCTYPE html>
<html>
  <head>
    <title>Tammer Galal</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-route.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script> -->
    <script src="/js/app.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/style/style.css">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/darkly/bootstrap.css">
  </head>
  <body ng-app='portfolioApp' class="portfolioBody">
    <div class="bs-component">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html">Home</a>
          </div>
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="dropdown">
                <a href="repo.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Github Repositories<span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                  <li><a href="repo.html">Repos</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <div ui-view><div>
    <!-- <footer class="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer> -->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>

我正在尝试加载我命名为partial-home.html 的基本主页部分，它位于我的public/views/partials 目录路径中。

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 text-center">

    </div>
    <div class="col-xs-12 text-center">
      <img class="img-rounded me" id="firstPicture" src="/img/me.jpg">
    </div>
    <div class="col-xs-12 text-center">

    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 col-md-4">
      <div>
        <h3 class="siteHeader"><strong>Rock Paper Scissors!</strong></h3>
        <a href="rps.html"><img class="img-rounded" id="rpsPic" src="/img/rps.jpg"></a>
        <p class="siteDescrip">Play a game of Rock, Paper, Scissors! Created utilizing: <br /><strong>HTML, CSS3, Javascript, and jQuery</strong></p>
      </div>
    </div>
    <div class="col-sm-4 col-md-4">
      <h3 class="siteHeader"><strong>Face Check</strong></h3>
      <a href="http://face-check.herokuapp.com/"><img class="img-rounded" id="faceCheckPic" src="/img/faceCheckPic.jpg"></a>
      <p class="siteDescrip">A facial and emotional recognition app Created utilizing: <br /><strong>HTML, CSS3, Javascript, jQuery, AJAX, and 3 APIs</strong><br /><strong>Co-Creators: Long Phan and Evan Bates</strong></p>
    </div>
    <div class="col-sm-4 col-md-4">
      <h3 class="siteHeader"><strong>RU Fly?</strong></h3>
      <a href="http://rufly2.herokuapp.com/"><img class="img-rounded" id="faceCheckPic" src="/img/rufly.jpg"></a>
      <p class="siteDescrip">RU Fly is a Rutgers Web Flyer, where students can add their favorite restaurants and leave reviews, so everyone knows the best place to eat! Adding upcoming events soon!<br /><strong>HTML, CSS3, Javascript, Node.js, MySQL, Sequelize, Express, JawsDB</strong></p>
    </div>
  </div>
</div>

我真的不知道我做错了什么，正在考虑从头开始。任何帮助将不胜感激。

【问题讨论】：

使用ng-app 属性将ng-strict-di 添加到您的body 元素中。 ng-strict-di 将强制执行依赖注入，并为您提供有关未正确提供哪些依赖的更详细的错误。不过，只要看看它，我就会猜测是ui.bootstrap 是个问题。
更改为 ` ` 并且仍然收到相同的控制台日志错误。现在将删除 ui-bootstrap 并在 2 分钟后回来查看。更新删除ui-bootstrap解决了这个问题！非常感谢。
创建一个快速插件来重现您的问题，我的怀疑得到了证实。更改为 angular.js 而不是 angular.min.js 显示 Error: [$injector:nomod] Module 'ui.bootstrap' is not available!
一般来说，您应该在开发中使用angular.js 以获得更详细的错误消息，在生产中使用angular.min.js。

标签： javascript angularjs html angular-ui-router

【解决方案1】：

我试图重现此错误。一切正常，但是当我在应用程序“portfolioApp”中添加“ui.bootstrap”模块时，显示相同的错误消息。此外，我在您的“index.html”中没有看到任何“ui.bootstrap”模块的参考。尝试删除 'ui.bootstrap' 或在 'index.html' 中添加此模块的引用。

【讨论】：