参考错误，角度未定义答案

【问题标题】：Reference Error, angular is not defined参考错误，角度未定义
【发布时间】：2016-04-20 15:35:18
【问题描述】：

我已经坐了一上午，试图用 Angular 解决这个问题。

我已经用 yeoman 生成了一个项目（事实上，就像今天的一千个一样......），它就是无法启动，它一直在给我

ReferenceError: angular is not defined error

好的，在我输入代码之前，我已经尝试过使用 npm install、bower install，有和没有 sudo。

我已将wiredep 任务添加到Gulpfile，我已将index.html 文件中所有不同部分的依赖项硬编码，并尝试了许多适用于本网站和其他人的解决方法，但似乎没有什么对我有用:(

我想这一定是一个愚蠢的错误，但我无法理解......

所以，这里是代码：

index.html:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="newOneApp">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div class="header">
      <div class="navbar navbar-default" role="navigation">
        <div class="container">
          <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
              <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="#/">newOne</a>
          </div>

          <div class="collapse navbar-collapse" id="js-navbar-collapse">

            <ul class="nav navbar-nav">
              <li class="active"><a href="#/">Home</a></li>
              <li><a ng-href="#/about">About</a></li>
              <li><a ng-href="#/">Contact</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
    <div ng-view=""></div>
    </div>

    <div class="footer">
      <div class="container">
        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
      </div>
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="/bower_components/angular/angular.js"></script>
    <script src="/bower_components/jquery/dist/jquery.js"></script>
    <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="/bower_components/angular-animate/angular-animate.js"></script>
    <script src="/bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="/bower_components/angular-resource/angular-resource.js"></script>
    <script src="/bower_components/angular-route/angular-route.js"></script>
    <script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="/bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <!-- endbuild -->
</body>
</html>

app.js：

'use strict';
angular
  .module('newOneApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

main.js：

'use strict';


angular.module('newOneApp')
  .controller('MainCtrl', function () {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

最后是 about.js：

'use strict';

    angular.module('newOneApp')
      .controller('AboutCtrl', function () {
        this.awesomeThings = [
          'HTML5 Boilerplate',
          'AngularJS',
          'Karma'
        ];
      });

提前谢谢你

【问题讨论】：

您确定您的构建过程正在将angular.js 或angular.min.js 加载到您的网页上吗？
你应该在封闭的body标签之后加载脚本
嗨，谢谢你的回复，我真的不知道你的意思是什么，我已经运行 gulp build 并没有发生任何奇怪的事情，如果那是你要去的地方跨度>
嗨，亚历克斯，谢谢你的回复，这也不行
您可以试试view page source 并单击angular.js 的链接，看看是否实际加载了角度文件？

标签： javascript angularjs bower yeoman-generator-angular referenceerror

【解决方案1】：

我相信<script src="/bower_components/angular/angular.js"></script>（可能还有其他 Angular 库）应该在 index.html 的标题中。

【讨论】：

他有一个构建器系统，它可能会自动注入依赖项，例如 Angular。我确实怀疑问题可能在那里。
是的，我不熟悉 Yeoman，但我可以重现相同的错误，将测试项目中的脚本 src 从标题移到正文下方。
在正文渲染后加载脚本更快，它们不需要在标题中
您好，谢谢您的回复，这也不起作用，我之前已经尝试过，现在再次以防万一，不起作用:(

【解决方案2】：

我们之前确实遇到过这个问题。

我们的问题是我们的构建系统在某些脚本上添加了defer 标签，但在其他脚本上没有。这导致我们的 Angular 文件在 angular.js 加载之前加载。

无论哪种方式，您的构建系统似乎都有问题。我也会发布 Yeoman 代码。您的实际渲染页面是什么样的？上面有angular.js 吗？脚本标签是否有defer 属性？

【讨论】：

您好，谢谢您的回复，不渲染的页面看起来不像我用 yeoman 创建的其他页面，它更简单。我的 js 文件都没有 defer 属性，它们都是干净的，因为我刚刚创建了它们