Question posted in 
Trying to deploy rails + angular project.
Resolved: turned out (from browser logs) that:
1) There was small error in one of js files.
2) Main module wasn’t loaded because of mess in dependencies, but error message was pinting to one of bootstrap files (?!). Reinstalled twitter-bootstrap gem.
However I still don’t understand why project worked in development and didn’t worh in production.
Running rails s -e production, rails answers normally, renders layout,
assets/javascripts folder is loaded (binded event to window onload – worked) . But all bower plug-ins, incluing angular, jquery etc. not working.
Same issue on local on heroku. Assets are compiled to tmp/… folder. Deploy ends successfully, but angular part doesn’t work (no errors in logs), as well as jquery and all plug-ins.
In config/application:
config.serve_static_files = true
config.less.paths << Rails.root.join('app', 'assets', 'bower_components')
config.assets.paths << Rails.root.join('app', 'assets', 'bower_components')
config.assets.initialize_on_precompile = true
config.assets.precompile = ['*.js', '*.css', '*.css.erb', '*.eot', '*.svg', '*.ttf', '*.woff', '*.woff2']
In config/environments/production:
config.assets.js_compressor = :uglifier
config.assets.js_compressor = Uglifier.new(:mangle => false)
config.assets.digest = true
config.assets.compile = true
Tried bundle exec rake:assets:precompile RAILS_ENV=production : does not help.
I think that there is something wrong with loading plug-ins (bower folder, bootstrap, jquery etc.) as main file application.js queried and rendered successfully (logs), but doesn’t work as plug-ins seem not found.
application.js:
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require angular
//= require angular-rails-templates
//= require angular-devise
//= require angular-ui-router
//= require angular-route
//= require angular-bootstrap
//= require angular-touch
//= require ng-tags-input
//= require angular-loading-bar
//= require angular-xeditable
//= require ng-file-upload-shim
//= require ng-file-upload
//= require Buttons
//= require x-editable
//= require angular-ui-notification
//= require_tree ../templates
//= require_tree .
angular.module('boo', ['boo-factories', 'boo-controllers', 'ui-notification', 'ngTagsInput', 'angular-loading-bar', 'ui.router', 'ui.bootstrap', 'templates', 'Devise', 'ngFileUpload', 'xeditable', 'bootstrapLightbox']);
and so on…
2
Answers
What I think is happening is that since you are compiling your assets and the way you made the angular app, some of the angular code is spread out and not understood by the asset pipeline, or the browser.
A quick, but dirty solution(since it’ll take longer to load the pages) is to:
Edit config/environments/production.rb, comment this line:
config.assets.js_compressor = :uglifier
Clean the asset pipeline in the production environment with:
RAILS_ENV=production rake assets:clean
And finally, start the server again:
rails s -e production
Is there any reason you decided to stick loading up your module in application.js? I would externalize that into another file called app.js and ensure that gets loaded in the tree before your factories, controllers, services, etc.
I would follow the advice given on making sure your assets aren’t getting minified in production. That does some weird things.