I'm following this tutorial and although adding it to the Gem file and bundle installing it works fine. The moment I try to include it into application.js, the file, I get the following error while loading it:
throw Error("Sprockets::FileNotFound: couldn't find file 'angular'\n (in /my/path/to/rails/app/assets/javascripts/application.js:13)")
application.js file looks like so (starting with line 13):
//= require angular
//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require bootstrap
//= require pusher.min.js
//= require pusher_setup
//= require_directory .
Therefore, my question is how can I successfully include AngularJS into my Rails project?
I'm currently using Rails 3.2.2, and Ruby 1.9.3.
I had face same problem. I resolved it by following way.
1) In my case, //= require_tree . was missing in application.js file.. so i have added it.
2) Restarted Apache Server (If webrick, then restart it)
After adding a gem you always have to restart the web server.
From looking at the gem's source code, it has the angular javascripts in vendor/assets/javascripts, which means they will be available by just doing //= require angular. If they don't load, it's probably because the server needs to be restarted and you need to bundle install.
As for the require_tree ., I strongly advise against that, because it means you will lose control over the order in which things get loaded.
For example angular itself is packaged with it's own version of jQuery (jQuery-lite), but if there is already jQuery present when it is loaded, it will use the global version.
Which means doing
//= reqiure angular
//= require jquery
will do something different, than
//= require jquery
//= require angular
There are many other cases when load order can matter, for example if you have Backbone.js and Underscore, you will want to load Underscore before Backbone, etc.
As a general practice I would always recommend just using require, unless you're loading your own code where order doesn't matter, for example //= require_tree ./controllers for your own directory of controllers. In that case I'd say require_tree is perfectly ok.
in your gemfile if you are using like this :
group :assets do
gem 'angularjs-rails'
end
then remove that group :assets thing, It should be simple without block:
ex:
gem 'angularjs-rails'
It will definitely work
In case anyone had a same issue and the offered solution wouldn't work.
I have added //= require angular in the asset
group :assets do
//= require angular
end
However still I was getting the same error. After a bit of search I found out that for some reason it needs to be added outside of the assets group. All good now. Not sure if this is a best way though however I am not getting this error anymore.
Related
To preface my question, I am following this guide.
When trying to build a CRUD interface using Rails and React, I receive this error when trying to create a new item:
addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded.
I wasn't improperly adding a ref attribute to any JSX not inside of a render method, so I must have multiple copies of React within my asset pipeline.
Research yielded the following potential results:
Introducing webpack or Searchkit, suggested in this SO answer, seemed to be clunky workarounds for my simple CRUD interface.
This unselected SO answer suggested removing the //= require react line from ./app/assets/javascripts/application.js. This proved to be unsuccessful.
Issue #671, from the official GitHub react-rails repo. here, outlines the first part of my issue perfectly. I followed this potential solution, which suggests removing the //= require react-server line of the ./app/assets/javascripts/server_rendering.js file. This lead to a new error, outlined below:
Uncaught ReferenceError: $ is not defined
Which I assume means that react_server not only contains a second copy of React, but also loads something vital for my AJAX calls.
For reference, here are the contents of ./app/assets/javascripts/application.js:
// This is a manifest file that'll be compiled into application.js, which will include all the files
...
// about supported directives.
//
//= require rails-ujs
//= require react
//= require components
//= require turbolinks
//= require_tree .
and ./app/assets/javascripts/server_rendering.js:
//= require react_ujs
//= require react-server
//= require ./components
...
Where a set of ellipses, or ..., are used to shorten known comment sections.
Ruby version: 2.3.3p222 (2016-11-21 revision 56859)
Rails version: 5.1.1
react-rails version: 2.2.0
The third potential answer, or removing the //= require react-server from ./app/assets/javascripts/server_rendering.js, was a step in the right direction.
Removing this line doesn't yield a new issue, it just reveals another error you had the entire time. react_server doesn't define the $ variable for AJAX calls, the jQuery gem does.
Found here. I am confident in this solution because the error:
Uncaught ReferenceError: $ is not defined
is a jQuery issue, as the AJAX calls you are probably making take a form referenced in their official doc. here.
Therefore, after running gem install jquery-rails in your shell, your ./app/assets/javascripts/application.js should look like this:
...
//= require rails-ujs
//= require jquery
//= require react
//= require components
//= require turbolinks
//= require_tree .
Your ./app/assets/javascripts/server_rendering.js file should look like this:
//= require react_ujs
// require react-server
//= require ./components
...
Note that require react-server is commented out.
And make sure to follow the solution found in this SO answer regarding the .\app\views\layouts\application.html.erb file.
I am working on a rails app. It is a standard app, using server rendered pages, and jquery. I have had a decently hard time wrangling together the jquery and i am not sure why.
I am using jquery for a couple things: a datepicker and a timepicker. That is only used for a form a user can use, and is rendered in a users section where they can create/edit.
The structure of my javascript is right now i am using 1 javascript file called main which is required in my application.js. That is all the JS i am using.
application.js
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap.min.js
//= require jquery.raty.min.js
//= require jquery.turbolinks
//= require chosen-jquery
//= require turbolinks
//= require main
//= require_tree .
main.js
$(document).ready(function() {
// users profile stuff
if ($('table.calendar tbody tr td ul').hasClass('active-trip')) {
$('.active-trip').parent().css('background-color', 'orange');
}
$("#trip_start_date").datepicker({
minDate: 1
});
$("#start_date").datepicker({
minDate: 1
});
$("#end_date").datepicker({
minDate: 1
});
// ==========
// js in user's trips
$('#trip_start_time').timepicker();
$('#trip_end_time').timepicker();
// ===========
});
The problem that I am having is I am using a bootstrap navbar, with some JS effects on it (dropdowns). On this one page (a resource called "Gyms", or /gyms) the JS completely breaks and leaves the navbar useless. The error that I am getting is
Uncaught TypeError: $(...).timepicker is not a function
And I notice when I get that error once, it then starts repeating and I get it on every page. But yet, when I go back to the form where i use this code, it works completely fine even with the error?
This might be a turbolinks issue, but I am really not sure. I am using these gems
gem 'jquery-rails'
gem 'jquery-ui-rails'
gem 'turbolinks'
gem 'jquery-turbolinks'
if that helps anything. I have also played around with using the jQuery CDN script rendered in application.html.erb but that doesn't really seem to help or hurt anything and is pretty much neutral. Any help would be much appreciated
Try changing the order of requiring:
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks
put jquery.tubolinks before all other scripts but right after jquery
I'm working on a website that uses HTML, CSS, and JavaScript with jQuery plugins. In order to make the website more dynamic, I shifted my code to Ruby on Rails. The HTML and CSS are fine, but some of the jQuery plugins that I had working before aren't functioning anymore.
I tried multiple ways to fix this. I first added the javascript files into app/assets/javascripts and then added //= require pluginfilename in application.js and then <%= javascript_include_tag name..... %> but that didn't work.
Is there something that I'm missing or doing wrong? I'm fairly new to Rails. This is version 4.2.3 btw.
Edit: this is my application.js file
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap.min
//= require turbolinks
//= require countdown
//= require grid
//= require custom
//= require script
//= require_tree .
First thing I would do would be to try and find a version of the plugin that's distributed via CDN, then including it via <%= javascript_include_tag link %>.
Barring that...
Did you do a //= require pluginfilename without the extension? Can you paste in your application.js file so we can take a look?
Also, what errors are you getting your JS console? Are you ensuring that the plugin is being loaded before it's being used? (Load order in the application.js file matters.)
You can find a bridge between Bower and Rails with Rails-Assets.org. I've used this for several projects and it works nicely. If your plugins are using bower, they should exist on Rails-Assets.org
I am trying to get rangeslider.js working in Ruby on Rails. I have used their GitHub page as a reference, but couldn't find any help for Rails.
http://andreruffert.github.io/rangeslider.js/
Application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require rangeslider.js
//= require rangeslider.min.js
//= require_tree .
I came across the following error message
Sprockets::FileNotFound
(in C:/Users/rmatthews/Documents/repos/pcbuilder/app/assets/javascripts/application.js:17)
Line 17, was //= require rangeslider.min.js
The files are located on my computer, but in my /downloads/rangeslider.js-0.3.7 directory
My guess is that Rails does not search that directory.
Do I need to place them somewhere else, like /vendor/assets?
I've been following this as a Reference, but couldn't find much
http://guides.rubyonrails.org/asset_pipeline.html#how-to-use-the-asset-pipeline
I've seen a couple of similar questions, but since they were discussing jquery, they didn't seem to be of much help.
Rails does not search random directories that exist outside of your application. You will need to place this file at vendor/assets/rangeslider.js.
Then require it by:
//= require rangeslider
I am trying hard to have one of my javascript file load/work with a Rails4 app.
The file is users.js.coffee . This is a catch all javascript file that I want loaded for all pages (not necessarily just for users controller)
If I try to load by localhost:3000/assets/users.js I can see the compiled JS file. However using cmd+o on chrome doesnt load the file and also the events are not fired so I know its not working(and loading)
Also tried running bundle exec rake assets:clean assets:precompile
I do not see any 500 or 400 or js errors in console. The simplest of users.js.coffee doesnt work as well
$(document).ready ->
alert('hello')
Some configs:
applcations.js
//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap-slider
//= require users
//= require_tree .
development.rb
config.assets.initialize_on_precompile = false
config.serve_static_assets = false
production.rb
# Disable Rails's static asset server (Apache or nginx will already do this)
config.serve_static_assets = true
# Compress JavaScripts and CSS
config.assets.compress = true
config.assets.compile = false
# Generate digests for assets URLs
config.assets.digest = true
config.assets.debug=true
Also the users.js.coffee was working fine before I started playing around with getting bootstrap using bootstrap-sass etc (on an tangent,eventually ended up loading bootstrap from hosted CDNs in application.haml, not sure if it should interfere with how js files are loaded/works)
Any pointers to debug this is greatly appreciated. Already spent few hours and Asset Pipeline gets me everytime
Thanks
P.S:
I am deploying to heroku (however this fails in both dev and heroku so hopefully fixing in dev should be enough)
Update application.js content by moving //= require users after all other libraries that your application's javascripts depend on but before the require_tree .:
//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap-slider
//= require users
//= require_tree .
The order of requiring javascripts is important here. If your file is users.js.coffee then you need jQuery for coffeescript so jQuery must be required before users.