Gulp Задание задачи Angular Файлы

У меня есть задача gulp создана и запущена для создания приложения Angular, и он работает без ошибок и правильно создает файлы, но когда я загружаю страницу в браузере, я получаю следующие сообщения об ошибках.

Есть ли какой-то шаг или какой-то плагин, который мне не хватает, чтобы получить Angular файлы для всех "работать"? Я уже использовал плагины 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 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

Ответы

Ответ 1

Я замечаю, что вы не используете ngAnnotate для компонентов вашей акустической системы, но на них работает uglify. Это может вызвать проблемы.

Try:

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 файла.

Ответ 2

После прочтения различных ответов в SO первая ошибка обычно относится к забытому ; в строках до ошибки.
Вы можете настроить concat-задачу, чтобы использовать ; в качестве разделителя для js файлов, чтобы этого избежать.

На втором я согласен с @ShaunScovil, также используя файлы .min, предоставленные из каждого пакета колонок, безопаснее.

Вы можете использовать этот main-bower-files пакет, чтобы установить это в зависимости от env и автоматизировать процесс построения одного или больше файлов всех зависимостей бауэр.

Ответ 3

То же самое происходит с GruntJS, и я недавно узнал, как его исправить. Убедитесь, что все ваши контроллеры, директивы и фильтры angular js надлежащим образом включены в них.

Пример не работает:

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

Обратите внимание на приведенное выше, как неверно включен таймаут $?

Пример будет работать:

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

Теперь значение таймаута $правильно включено. Обязательно проверьте эту небольшую деталь на всех контроллерах, фильтрах и директивах.