Rails Heroku Deployment Error: Precompiling assets failed – Sprockets::FileNotFound: couldn’t find file ‘angular’ with type ‘application/javascript’

My app works locally, however when I try to deploy to Heroku, I get a Sprockets::FileNotFound: couldn't find file 'angular' with type 'application/javascript' error.

I have tried precompiling with RAILS_ENV=production bundle exec rake assets:precompile and purging my build cache with heroku builds:cache:purge -a findum, but still no luck. I recently migrated from Bower to Yarn– not sure if my asset path is the problem?

Has anyone run into a similar error that they were able to resolve? So many thanks 🙏.

This is my application.js :

//= require lodash
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require jqueryui-touch-punch
//= require cloudinary/jquery.fileupload
//= require cloudinary/jquery.cloudinary
//= require angular
//= require angular-resource
//= require angular-animate
//= require angular-bootstrap
//= require angular-sanitize
//= require angular-rails-templates
//= require_tree ../templates
//= require bootstrap
//= require external/picker
//= require external/picker.date
//= require angular-filter/dist/angular-filter
//= require swipebox
//= require angular-ui-sortable/sortable
//= require bootstrap-select/dist/js/bootstrap-select
//= require string-mask/src/string-mask
//= require_tree .

And Gemfile:

source 'https://rubygems.org'

gem 'rails', '~> 4.2.0'
gem 'active_model_serializers', '~>0.9.3'
gem 'angular-rails-templates'
gem 'responders', '~> 2.0'

gem 'angular_rails_csrf'

gem 'pg'

gem 'resque', require: "resque/server"
# gem 'resque-scheduler'

gem 'bootstrap-sass', '~> 3.2.0'
gem 'sass-rails', '>= 3.2'
gem 'animate-scss'
gem 'swipebox'
gem 'rake', '< 11.0'
gem 'lodash-rails'
gem 'jquery-rails'
gem 'turbolinks'

# gem 'bcrypt-ruby', '3.0.1'

gem 'devise'
gem 'geocoder'
gem 'searchkick'
gem 'cloudinary'
gem 'httparty'
gem 'newrelic_rpm'
gem 'rack-cors', :require => 'rack/cors'
gem 'passenger'
gem 'uglifier'
gem 'rollbar'
gem 'figaro'
gem 'git'

gem 'mailchimp', '~> 0.0.9'
gem 'twitter'
gem 'friendly_id', '~> 5.1.0'
gem 'roo', git: "https://github.com/roo-rb/roo.git"

gem 'uuid'
gem 'awesome_print'
gem 'seed_dump'
gem 'mixpanel-ruby'
gem 'redcarpet'

group :production do
  gem 'rails_12factor'
  gem 'aws-sdk'
end

group :test, :development do
  gem 'factory_bot_rails'
  gem 'rspec-rails', '~> 3.2.0'
  gem 'protractor-rails'
  gem 'dotenv-rails'
end

group :test do
  gem 'database_cleaner', '~> 1.3.0'
end

group :development do
  gem 'annotate', '2.5.0'
  gem 'better_errors'
  gem 'binding_of_caller'
  gem 'pry-byebug'
  gem 'pry-rails'
  gem 'twitter-console'
  gem 'mailcatcher'
  gem 'bullet'
end

ruby '2.2.2'

 

assets.rb

Rails.application.config.assets.precompile.shift
# Explicitly register the extensions we are interested in compiling
Rails.application.config.assets.precompile.push(Proc.new do |path|
  File.extname(path).in? [
    '.html', '.erb',                 # Templates
    '.png',  '.gif', '.jpg', '.jpeg', '.svg', # Images
    '.eot',  '.otf', '.svc', '.woff', '.ttf', # Fonts
  ]
end)
# Precompile additional assets
Rails.application.config.assets.precompile += ['private_beta.css', 'admin/admin.js', 'admin/admins.css']

My package.json looks like this:

{
  "name": "Findum",
  "version": "0.0.1",
  "repository": {
    "type": "git",
    "url": "https://github.com/findum/findum.git"
  },
  "engines": {
    "node": "14.x",
    "yarn": ">= 1.0.0"
  },
  "scripts": {
    "postinstall": "node -e "try { require('fs').symlinkSync(require('path').resolve('node_modules/@bower_components'), 'vendor/assets/bower_components', 'junction') } catch (e) { }""
  },
  "dependencies": {
    "@bower_components/angular": "angular/bower-angular#1.2.32",
    "@bower_components/angular-animate": "angular/bower-angular-animate#~1.2.27",
    "@bower_components/angular-bootstrap": "angular-ui/bootstrap-bower#~0.12.0",
    "@bower_components/angular-filter": "a8m/angular-filter#*",
    "@bower_components/angular-resource": "angular/bower-angular-resource#~1.2.27",
    "@bower_components/angular-sanitize": "angular/bower-angular-sanitize#~1.2.27",
    "@bower_components/angular-ui-sortable": "angular-ui/ui-sortable#~0.13.3",
    "@bower_components/bootstrap-select": "snapappointments/bootstrap-select#1.6.4",
    "@bower_components/font-awesome": "FortAwesome/Font-Awesome#~4.2.0",
    "@bower_components/jquery": "jquery/jquery-dist#~2.1.3",
    "@bower_components/jquery-ui": "components/jqueryui#~1.11.2",
    "@bower_components/jquery-ujs": "rails/jquery-ujs#1.0.3",
    "@bower_components/jqueryui-touch-punch": "furf/jquery-ui-touch-punch#*",
    "@bower_components/lodash": "lodash/lodash#~2.4.1",
    "@bower_components/spin.js": "fgnass/spin.js#~2.0.1",
    "@bower_components/string-mask": "the-darc/string-mask#0.2.0",
    "bower": "~1.3.11",
    "jquery": "^3.5.1"
  }
}

And my application.rb:

require File.expand_path('../boot', __FILE__)

require 'rails/all'
require 'csv'

Bundler.require(:default, Rails.env)

module Findum
  class Application < Rails::Application

    config.time_zone = 'Eastern Time (US & Canada)'

    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
    # config.i18n.default_locale = :de

    config.encoding = "utf-8"

    config.filter_parameters += [:password]

    config.active_support.escape_html_entities_in_json = true

    config.active_record.schema_format = :sql

    config.active_record.raise_in_transactional_callbacks = true

    config.assets.enabled = true

    config.assets.version = '1.0'

    config.assets.initialize_on_precompile = false

    # Add the fonts path
    config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
    # Add Bower components
    config.assets.paths << Rails.root.join('vendor', 'assets', 'bower_components')

    config.secret_key_base = 'findum'

    config.eager_load = false

    config.autoload_paths += Dir[Rails.root.join('app', 'models', '**/')]
    config.autoload_paths += Dir["#{config.root}/lib/**/"]


    config.i18n.enforce_available_locales = true
  end
end

Answer

Update:

It looks like it was a problem with my post-Bower configuration (I migrated from Bower –> Yarn) I was able to solve Sprockets errors by adding this line to my assets.rb:

Rails.application.config.assets.paths << Rails.root.join('node_modules')

and by running yarn add <package name> for files that Sprockets could not locate.

I also made the following updates to old package names in my `application.rb’

//= require lodash
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require cloudinary/jquery.fileupload
//= require cloudinary/jquery.cloudinary
//= require angular
//= require angular-resource
//= require angular-animate
//= require angular-bootstrap
//= require angular-sanitize
//= require angular-rails-templates
//= require_tree ../templates
//= require bootstrap
//= require external/picker
//= require external/picker.date
//= require angular-filter/dist/angular-filter
//= require swipebox
//= require angular-ui-sortable
//= require bootstrap-select
//= require string-mask/src/string-mask
//= require_tree .

Leave a Reply

Your email address will not be published. Required fields are marked *