Gulp Task Breaking on Angular Files

Question

I have the gulp task set up and running to create an Angular app, and it runs without error and creates the files correctly, but when I load the page on a browser, I get following error messages.

Is there some step or some plugin I'm missing to get the Angular files to all "work"? I've used the angularFilesort() and ngAnnotate() plugins already.

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));

The errors are

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

which points to these lines of code

(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))

The other error is

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

I notice you're not running ngAnnotate on your bower components, but you are running uglify on them. This could be causing your problem.

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));

As an aside, it's not an awesome idea to concatenate all of your dependencies into a single file. The browser can handle asynchronously loading multiple JS files and will do so much faster than loading a single, massive JS file.