Rails Heroku 部署错误：预编译资产失败 – Sprockets::FileNotFound：找不到类型为“application/javascript”的文件“angular”

问题描述

我的应用程序在本地运行，但是当我尝试部署到 Heroku 时，出现 Sprockets::FileNotFound: Couldn't find file 'angular' with type 'application/javascript' 错误。

我尝试过使用 RAILS_ENV=production bundle exec rake assets:precompile 进行预编译并使用 heroku builds:cache:purge -a findum 清除我的构建缓存，但仍然没有运气。我最近从 Bower 迁移到 Yarn – 不确定我的资产路径是否有问题？

有没有人遇到过他们能够解决的类似错误？非常感谢?。

这是我的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 .

还有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']

我的 package.json 看起来像这样：

{
  "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"
  }
}

还有我的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','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

解决方法

更新：

看起来这是我的后 Bower 配置的问题（我从 Bower 迁移 --> Yarn）我能够通过将此行添加到我的 assets.rb 来解决 Sprockets 错误：

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

并通过为链轮无法找到的文件运行 yarn add <package name>。

我还对我的 `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 .