Question

我已经设置并运行gulp任务来创建一个Angular应用程序，它运行时没有错误并正确创建文件，但是当我在浏览器上加载页面时，我收到以下错误消息。

我是否缺少一些步骤或一些插件，以便将Angular文件全部转移到＃34; work＆＃34;？我已经使用了angularFilesort（）和ngAnnotate（）插件。

var bower = gulp.src(bower_files)
    .pipe(concat("bower-expanded.js"))
    .pipe(gulp.dest(paths.prod))
    .pipe(rename("bower.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.prod + paths.js));        

// gather and compress the app's js files 
var app = gulp.src(paths.source + "app/**/*.js")
    .pipe(angularFilesort())
    .pipe(concat("app-expanded.js"))
    .pipe(ngAnnotate({          
          add: true,
          single_quotes: true
    }))
    .pipe(gulp.dest(paths.prod))
    .pipe(rename("app.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.prod + paths.js));

错误是

TypeError: (intermediate value)(...) is not a function
(function(angular) {

指向这些代码行

(function(angular) {
  'use strict';

  /**
   * Called with an array this acts like map, otherwise it acts like _.mapValues
   * in lodash.
   * @return {Array|Object} The same type as the input argument.
   */
  var mapValues = function(obj, callback) {
    if (angular.isArray(obj))

另一个错误是

Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module angularSpinner due to:
[$injector:nomod] Module 'angularSpinner' 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.
http://errors.angularjs.org/1.4.4/$injector/nomod?p0=angularSpinner

Answer 1

我注意到您没有在您的凉亭组件上运行ngAnnotate，但您正在运行uglify。这可能会导致您的问题。

尝试：

var bower = gulp.src(bower_files)
    .pipe(concat("bower-expanded.js"))
    .pipe(ngAnnotate({          
      add: true,
      single_quotes: true
    }))
    .pipe(gulp.dest(paths.prod))
    .pipe(rename("bower.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.prod + paths.js));

顺便说一下，将所有依赖项连接到单个文件中并不是一个很棒的想法。浏览器可以异步加载多个JS文件，并且比加载一个庞大的JS文件要快得多。

Answer 2

在阅读了SO中的各种答案后，第一个错误通常是指错误之前的行中遗忘的;。
您可以将concat任务配置为使用;作为js文件的分隔符来避免这种情况。

第二，我同意@ShaunScovil，同时使用每个凉亭包提供的.min文件也更安全。

您可以使用此main-bower-files包来根据env进行设置，并自动构建所有bower依赖项的一个或多个文件。

Answer 3

同样的事情发生在GruntJS上，我最近学会了如何修复它。确保所有角度js控制器，指令和过滤器都有适当的包含。

示例不起作用：

angular.module('uniApp').directive('autoFocus', function ($timeout) {
   return function (scope, element, attrs) {
    scope.$watch(attrs.autoFocus,
      function (newValue) {
          $timeout(function () {
              element.focus();
          });
      }, true);
   };
});

请注意上面如何正确包含$ timeout？

示例将起作用：

angular.module('uniApp').directive('autoFocus',['$timeout', function ($timeout) {
   return function (scope, element, attrs) {
    scope.$watch(attrs.autoFocus,
      function (newValue) {
          $timeout(function () {
              element.focus();
          });
      }, true);
   };
}]);

现在正确包含$ timeout。确保检查所有控制器，过滤器和指令的这个小细节。

吞噬Angular文件的Gulp任务

3 个答案: