I've been having trouble using the Asset Pipeline. Although I read an excellent guide here I still have trouble.
I'm trying a javascript solution for adding form elements "on the fly" from this [guide] (http://jyrkis-blogs.blogspot.com/2014/06/adding-fields-on-fly-with-ruby-on-rails.html#code4Div)
When I put the javascript into a <script> tag at the bottom of my page, everything works as expected.
If I simply copy and paste the script into application.js the code also works.
However, when I try to move the code to app/assets/javascripts/people.js my site throws a Reference Error.
This is a similar problem to the questions on SO titled 'Ruby on Rails 3.1 RC1 Javascript Asset Pipeline Problem' (not enough rep for the link), but I only have one script, so the alphabetical solution doesn't help. Moving the file to vendor/assets/javascript also didn't help.
Application.js currently looks like:
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 people.js
= require_tree .
Related
I have a legacy Angular JS application and now working in tandem with few new Angular 5 components using upgrade module. Following this post here
Currently, I need to include all my AngularJs code into my index.html.
But, I want to include all JS files (more than 200) in my angular-cli.json in scripts section like below:
"scripts": [
"../appjs/**"
],
But, ng-build gives me error no such file or directory:\appjs\**.
How to include all the files in the folder in on go avoiding to include all the files one by one.
Here is the image of the folder structure.
Please guide. Thanks.
Unfortunately the scripts: [] attribute doesn't accept globbing patterns. This is alluded to in the documentation:
scripts: An object containing JavaScript script files to add to the
global context of the project. The scripts are loaded exactly as if
you had added them in a tag inside index.html.
So the alternative is to use a powershell script or DOS cmd to list the files and output them to the screen/file and then add all the necessary quotes to paste them into the scripts attribute in the config file.
I cannot come up with a working solution. I guess I should somehow be using html-webpack-inline-source-plugin or a combination of multiple entry points but this is too much for me to handle.
What I want to have is:
all my js files bundled together and injected (not inlined) into index.html [this works of course!]
one js file, which is not included in the bundle described above, inlined into index.html
the inlined js file has to go through the Webpack "transformation pipe" since that js file depends on the Webpack build step
Example of the file to be inlined:
const asset = "require('./assets/blob.json')";
fetch(asset).then(.......)
This file should first go through the Webpack transformation since what should actually be inlined is something like:
<script>
var asset = "/static/json/blob.md5hashofblobjson.json";
fetch(asset).then(.......)
</script>
So basically the file that is to be inlined depends on the Webpack build process and cannot be just read with the fs module and written directly into index.html by hand.
Also, the inlined JavaScript should not include any WebpackJSONP bundle loading code, just the pure JS. Below that inlined piece of JS should come the usual bundled scripts that are injected (not inlined).
How should I configure my build process? Thanks a mil!
Under my wwwrooot folder I have a sub folder named scripts which has the following structure:
scripts (folder)
options.js
components (folder)
require.js
jquery.js and many more in this folder
I have the following script on my ASP.NET webpage (under _Layout.cshtml):
<script src="~/scripts/components/require.js" data-main="scripts/options"></script>
This is supposed to go to my wwwroot folder to scripts/components and start require.js, where as a parameter I am passing script/options.js file.
(quick note: this was given to me, I did not create it).
Unfortunately, it returns the error that it could not localize my options.js file. By looking into the console window, the GET function should be expecting the following path:
http://localhost:8000/scripts/options.js
whereas on my page GET function is trying to access the following file:
http://localhost:8000/app/scripts/options.js
I believe it is caused by the fact, that my MVC start page is under App controller (to be more precise it is App/index.html).
I believe (correct me if I am wrong), that the problem can be fixed by somehow removing the /app/ from the search string. Unfortunately, I don't quite know how to do it.
Any help on this matter would be more than welcome.
My Rails project contains TypeScript files which are being translated into JavaScript. For every translated .js file I also get a .js.map file. An example file structure is as follows:
/assets/javascripts/resources/Setting.ts
/assets/javascripts/resources/Setting.js
/assets/javascripts/resources/Setting.js.map
And in my application.js I simply do
//= require_tree .
The problem is that when this whole things gets rendered I get the following HTML (for each TypeScript file I have):
<script src="/assets/resources/Setting.js?body=1"></script>
<script src="/javascripts/resources/Setting.js.map.js"></script>
As you can see - for some reason Rails thinks that Settings.js.map file is to be included and automatically adds .js to it.
If this means anything - the TypeScript compilation happens only at IDE level, so it is not integrated into the Rails in any way.
Rails version: 4.2.1
So.. how do I exclude those map files?
My apologies if this has been posted somewhere else, but I'm not exactly sure how to even phrase a search for this problem.
Basically, I've got fullcalendar.js sitting in app/assets/javascripts/. Within my application.js file (in the same folder of course) I've got the following...
//= require jquery
//= require jquery_ujs
//= require foundation
//= require_tree .
So, as expected the fullcalender.js gets swept up in the asset compiling process and ends up in the application.js that is then served to the user.
The problem comes in when I try to reference a function defined in fullcalendar.js (and thus defined in application.js after compiling the assets) it throws an error stating TypeError: $(...).fullCalendar is not a function in the js console of firebug, and of course full calendar doesn't render.
Now, however, if I include <%= javascript_include_tag "fullcalendar.js" %> in the layout file after all of the other scripts and stylesheets have been pulled in, it works as expected.
Baffled, I looked into the js in each file and compared them and can't see a difference. Is there something going on with the asset pipeline that I'm not aware of or is this some freaky DOM issue? I just have no idea at this point.
For reference, here are the contents of both the application.js and fullcalendar.js that are linked to in the page source of the site. I've only included the relevant full calendar portion of each, as it's too large for gist or pastebin if I include everything.
What baffles me is that both the sources come from the same file, one is just linked to directly, the other flows through the asset pipeline process.
application.js - http://pastebin.com/byyNErB8
fullcalendar.js - http://pastebin.com/k4p29YmP
Any insight or help would be GREATLY appreciated.
Maybe a dependency error. I'll suggest you to use a better practice for such lib.
Put the fullcalendar scripts into vendor/assets/javascripts
Require this script manually in application.js before the tree and after jquery and any other lib it depends.
/=require 'fullcalendar`
Add
Check the loaded Javascript files in header, if application.js is the last, you have dependency error. The lib must be there before calling it.