ruby-on-railsangularjsruby-on-rails-4browserifybrowserify-rails

Uncaught ReferenceError: require is not defined using AngularJS, Rails 4 and Browserify

I am using AngularJS and Rails, and followed http://start.jcolemorrison.com/setting-up-an-angularjs-and-rails-4-1-project/ and several other tutorials to get a very simple "Hello World" example up and running on my desktop. The problem is, when I deploy it to a server, none of my code based on Angular works anymore. Instead, I get a Uncaught ReferenceError: require is not defined error in my console.

I realized that part of my problem is that the browser doesn't know what to do with the 'require' function calls, which makes sense so I installed Browserify using browserify-rails. However, it still does not work on the server like I would expect and I get the same error.

Link to the live site: Link

Here's my application.html.erb (simplified):

<!DOCTYPE html>
<html>
<head>
  <base href="/" />
  <title>ShibaInu</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => false %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
  <%= csrf_meta_tags %>
</head>
<body ng-app="shibaInu">
  <div class="container">1 + 2 = {{ 1 + 2 }}</div>

  <div class="container">
    <%= yield %>
  </div>

</body>
</html>

index.html.erb:

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

home.html.erb (rendered inside the container):

<h1>The Home View!</h1>
<ul>
  <li ng-repeat="thing in things">
    {{thing}}
  </li>
</ul>

home.js:

angular.module('shibaInu')
    .controller('HomeCtrl', function ($scope) {
        $scope.things = ['Angular', 'Rails 4.1', 'Working', 'Together!!'];
    });

app.js:

angular
    .module('shibaInu', [
        'ngRoute',
        'templates'
    ]).config(function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
             });
        $locationProvider.html5Mode(true);
    });

application.js

//= require jquery
//= require jquery_ujs
//= require angular
//= require angular-route
//= require angular-resource
//= require angular-rails-templates
//= require bootstrap-sprockets
//= require ng-app/app.js
//= require_tree ../templates
//= require_tree .
Solution

  • I was doing several things wrong, but I'll try to summarize:

    1. I am minifying JS on my server deployment like a good boy, but I was not writing minification-safe JS. See below for my fixed JS.
    2. This wasn't specified in my original post, but I was not using the angularjs-rails gem like I thought I was. I added this to my project.
    3. Related to 2 above, in my initial post I had used bower to install angularjs like the documentation recommends. For my solution, I took this out because it was just making things messy for my purposes.

    New home.js:

    angular.module('shibaInu')
    .controller('HomeCtrl', ['$scope', function ($scope) {
        $scope.things = ['Angular', 'Rails 4.1', 'Working', 'Together!!'];
    }]);

    New app.js:

    angular
    .module('shibaInu', [
        'ngRoute',
        'templates'
    ]).config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'home.html',
                controller: 'HomeCtrl'
             });
        $locationProvider.html5Mode(true);
    }]);