AngularJS component misconfiguration when using Gulp

Question

I am trying to set up an AngularJS web project using Gulp as a build tool while following John Papa's opinionated style guide. However when I load my page I receive the following errors:

Uncaught Error: Cannot find module 'function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=to[e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o
Error: [ng:areq] Argument 'WelcomeController' is not a function, got undefined http://errors.angularjs.org/1.4.5/ng/areq?p0=WelcomeController&p1=not%20a%20function%2C%20got%20undefined at REGEX_STRING_REGEXP (angular.js:68) at assertArg (angular.js:1795) at assertArgFn (angular.js:1805) at angular.js:9069 at setupControllers (angular.js:8133) at nodeLinkFn (angular.js:8173) at compositeLinkFn (angular.js:7637) at compositeLinkFn (angular.js:7641) at publicLinkFn (angular.js:7512) at angular.js:1660

My file structure looks like:

Application module (main.js):

(function() {
  'use strict';
  angular.module('cbCommApp', []);
})();

Controller component (WelcomeCtrl.js):

(function() {
  'use strict';

  angular
      .module('cbCommApp')
      .controller('WelcomeController', WelcomeController);

  /* If depdencies are required - use the $inject option */
  WelcomeController.$inject = ['$scope'];


  function WelcomeController($scope) {
    /*jshint validthis: true */
    var wc = this;
    wc.testVar = 'We are up and running from a required module!';
  }
})();

HTML document:

<!doctype html>
<html lang="en" ng-app="cbCommApp">
<head>
  <title>My App Title</title>
</head>
<body ng-controller='WelcomeController as welCtrl'>
  <h1>Hello World</h1>
  <p>{{welCtrl.testVar}}</p>
  <script src="/assets/javascript/jquery.min.js"></script>
  <script src="/assets/javascript/angular.js"></script>
  <script src="/assets/javascript/bundle.js"></script>
</body>
</html>

Gulp Task:

// Browserify task
gulp.task('browserify', function() {
  gulp.src(['source/javascript/**/*.js'])
  .pipe(browserify({
    insertGlobals: true,
    debug: true
  }))
  // Bundle to a single file
  .pipe(concat('bundle.js'))
  // Output it to our dist folder
  .pipe(gulp.dest(config.jsAssets));
});

I've verified that the Angular library is loading properly, and it bootstraps the cbCommApp. It just can't seem to find the Controller component. Does anyone know where things might be going wrong?

Does your bundle.js file look like it has everything in the right order? Also I'm not familiar with using browserify like this. I thought it was to be able to use require() — azium
You are supposed to be able to use something like var WelcomeCtrl = require('./controllers/WelcomeCtrl'); but that is not in line with the style guide I mentioned I am trying to follow. My goal is to have the Angular components be portable to a non Node environment if required in the future while also following best practices. Things do appear in the correct order in bundle.js though (the app is defined on line 1401, and the controller is defined on 2809) — rawkfist0215

felixfbecker felixfbecker · Accepted Answer · 2015-09-01T19:17:04

Seems like either Browserify or your concat command uglifies the JS so that function names get renamed to single letters (you can see that in the output: function e(t,n,r){...). You should either not uglify the code, or directly define your controllers etc. with anonymous functions like .controller('WelcomeController', function($scope) {...}). If you uglify, you also need to use ngAnnotate because otherwise the dependency injection of Angular breaks with the single-letter argument names (maybe ngAnnotate even solves your initial problem - I'm not sure).

AngularJS component misconfiguration when using Gulp

2 Answers