So hey guys, I'm trying run a html file for this angular 2 course I'm taking. After creating the dependancies for the app I downloaded them with npm. Now when I try to run the app, I get this error..
file:///Users/Rocky/Angular2-course/skeleton/node_modules/jquery/dist/jquery.min.js
Failed to load resource: net::ERR_FILE_NOT_FOUND
This is how I wrote the jquery script..
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
If your'e using Angular, you want to try and avoid using jQuery since Angular comes with jqLite.
Try to the version of Bootstrap made for Angular 2.
Check out https://ng-bootstrap.github.io/#/getting-started
Also, ever though of linking them?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
If your files are in "./node_modules/jquery/dist/". Then, the script tag in your pages just looks like this:
<script src="/scripts/jquery.min.js"></script>
If you were using express with nodejs, a static route is as simple as this:
app.use('/scripts', express.static(__dirname + '/node_modules/jquery/dist/'));
Then, any browser requests from /scripts/xxx.js will automatically be fetched from your dist directory.
Note: Newer versions of NPM put more things at the top level, not nested so deep so if you are using a newer version of NPM, then the path names will be different than indicated in the OP's question and in the current answer. But, the concept is still the same. You find out where the files are physically located on your server drive and you make an app.use() with express.static() to make a pseudo-path to those files so you aren't exposing the actual server file system organization to the client.
Related
I'm trying to use Firebase with Browserify and certain tools in that territory have trouble with the firebase script tags. I'm guessing it's because the Browserify bundles don't include those resources (specifically Beefy, the hot-reload browserify local-server-helper), so those resources aren't found. Because I don't quite understand how those script tags work to begin with, I'm having trouble accommodating for their functionality.
I'm talking about these things:
<!-- update the version number as needed -->
<script defer src="/__/firebase/7.17.2/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/7.17.2/firebase-auth.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-database.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-messaging.js"></script>
<script defer src="/__/firebase/7.17.2/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
The comments are somewhat helpful. My attention is pointed to the firebase 'init' source, which I'm guessing takes all the scripts above it to initialize the firebase keyword that is then used later in .js files.
However, in a bundled environment, should I be doing this a different way than the CLI sets it up?
All of those script includes are only relevant if you're using Firebase products in web pages served by Firebase Hosting. The __ leading each path are reserved by Firebase Hosting for these types of scripts.
If you're not using Firebase Hosting, just remove them.
If you're using bundling software, just remove them, and instead import the Firebase libraries using whatever your bundler prefers.
After I build my angular app, I have to perform one last manual step to get my program to run: The platform it runs on has a requirement that its javascript file is in the <head> of the html file that is running. Their .js is on a CDN. So basically, post-build, I have to open up index.html and add the following:
<script src="https://cdn.fragilecorp.com/lib/js/platform.js" type="text/javascript"></script>
Is there a way I can accomplish this automatically using angular configs or a different way?
Yes, in .angular-cli.json (.angular.json in older versions), I believe you can add what's inside of src to the scripts array.
Check this out:
How to include external JS file to angular5?
Description
Jquery is not working from local disk -using a downloaded copy of any jquery version does not work ok.
it works ok from ref links over the internet.
per jquery documentation - it is suppose to work from local disk as well
(i.e script src = "local path"...).
my code works fine with reference external links to jquery lib (versions 2.2.4 , 3.2.1 ) no problem
whenever i try to fallback or just use the local downloaded file for the same version it fails!
the relevant code is
<script src async = './jquery-3.2.1.min.js'></script>
or just
<script src = './jquery-2.2.4.min.js'></script>
and i tried several other workarrounds including pasting the whole file into my html as script) none worked neither on chrome nor firefox windows 7-8 node-8.9.1
tried similar to the following as well:
<script>window.jQuery || document.write('<script src="jquery-2.2.4.min.js"><\/script>')</script>
error message is:
detailed error: ReferenceError: $ is not defined
detailed error: TypeError: pageExecute is undefined
one suggested solution is: use dev server.
what is dev server and why needed? means what? so i can not just use the local copy of jquery lib?
node.js does not serve ANY files by default (unlike some other web servers). So, if you want the jQuery file to be served by your own web server, then you need to create a route that serves that file or use something like express.static() that serves multiple files.
Since your web URL is http://localhost:6060/example1, you are loading the web page through your own web server. Therefore any script tag such as:
<script src="jquery-2.2.4.min.js"></script>
will be requested form your own web server as:
http://localhost:6060/jquery-2.2.4.min.js
If you don't have a route defined for that specific URL in your node.js server, then you will get an error. If you are using Express in your node.js server, then you either need something like:
app.use(express.static("/someDirPath"));
to create a middleware handler that will automatically look in /someDirPath for files that are requested. Or, you need to make specific routes for files you want to serve:
app.get("/jquery-2.2.4.min.js", function(req, res) {
res.sendFile("/somePath/jquery-2.2.4.min.js");
});
In my design projects, I make a URL distinction between static files and dynamic routes. I use /public at the beginning of the URL path for any public resource as this makes it simple to distinguish which request is for a static resource and which is for a dynamically served route. So, in my script file, I'd use:
<script src="/public/js/jquery-2.2.4.min.js"></script>
And, then on my server, I'd use:
// serve static resources from the public directory below our project
app.use(express.static("/public", path.join(__dirname, public)));
And, then I'd have a directory structure of public static files:
myAppDir
various server files
- public
- js
- css
- img
Issue with file path
If both js and html file in same folder then use:
<script type="text/javascript" src="jquery-2.2.4.min.js"></script>
I started learning JS and at the moment I am working on Require.js.
Here is the deal, I have simple html page and js in it:
<script data-main="js/main.js" src= "js/lib/require.js" type="text/javascript"></script>
I do really have main.js in the root/js folder but by some reason page is looking for main.js in the root. Error:
*Failed to load resource file:///work/programs/brackets/4proj/main.js*
If I put main.js in the root (data-main="main") all will work as expected but I don't want to have a lot of *js in the root, even 2 js files. I saw in the require.js examples that it is possible but I have had no success with it.
What I've tried:
/js/main.js
./js/main.js
//js/main.js
and all the same without extension. It's still not working.
Here is project structure.
Project folder - 4prog/
/js
/js/lib/ <- jquery.js,require.js
/css
index.html
p.s. I am using Ubuntu + brackets + chromium.
From the docs:
http://requirejs.org/docs/api.html#jsfiles
.js does have meaning to require - it makes it behave like an absolute path.
So does prefixing with "/".
You didn't explicitly mention trying
<script data-main="js/main" src= "js/lib/require.js" type="text/javascript"></script>
Which is what works on my system (from file: !), so I can only assume that either you've got something else going on, or you didn't try that.
You didn't mention your version of require, your OS, or your browser, so that could be it, but it's more likely that trying to do an absolute path with require is messing you up without serving from a web server.
I'm working Jasmine on a Rails plugin that would be included in a Rails app that loads jQuery from a CDN. However, I'm running into issues running Jasmine tests in my plugin. I need to load jQuery before my source javascript files in app/assets/javascripts, but if I include jQuery in my jasmine.yml it doesn't get loaded before the source files:
jasmine.yml contents:
src_dir: "app/assets/javascripts"
src_files:
- "my_rails_plugin_source_includer.js"
spec_dir: spec/javascripts
asset_paths:
- "vendor/assets/javascripts"
my_rails_plugin_source_includer.js requires my source javascripts:
//= require my_jquery_dependent_script.js
//= require my_other_jquery_dependent_script.js
I'm using
bundle exec jasmine-headless-webkit --color --keep ./spec/javascripts/specs.js
to run my tests. I get an error message like
ReferenceError: Can't find variable: jQuery
ReferenceError: Can't find variable: jQuery
Test ordering seed: --seed 1629
My tests pass if I explicitly require a jQuery javascript file (e.g., jquery-1.9.1-min.js) in my_rails_plugin_source_includer.js. However, I don't want to do that, as I want the actual Rails app, rather than this plugin. Any suggestions on how to require jQuery before my source files? Requiring it in my specs or my helpers doesn't work, as Jasmine seems to always load the source files first (which of course makes sense).
I was able to solve this issue by doing the following:
Downloading jquery-1.9.1.min.js from the official jQuery source and storing it in my spec/javascripts/support/helpers folder.
Creating a source.js file in my spec/javascripts/support/fixtures folder (can be an arbitrary folder) that has the following contents:
//= require ../helpers/jquery-1.9.1.min
//= require ../../../../app/assets/javascripts/application
where app/assets/javascripts/application.js is the manifest for my plugin's JavaScripts.
Editing my jasmine.yml file to use the following sources:
src_dir: "spec/javascripts/support/fixtures"
src_files:
- "source.js"
As a result, the jQuery-dependent source JavaScripts have jQuery preloaded only for Jasmine testing.
Thanks for your answer, Fares, it gave me the insight into what's happening with the jasmine config file.
There's a predictable order to how files are included in your jasmine page's <head> tag.
First, my setup deatils:
rails 4.0.1
jasmine 1.3.2
jquery-rails 3.0.4 (which provides jquery-1.10.2)
Here's my spec/javascripts/support/jasmine.yml. I have no helpers, I don't need css files to test my particular app, and I removed all the comments.
src_files:
- spec/javascripts/lib/jquery-1.10.2.js
- app/assets/javascripts/tools/dependency-parser.js
spec_dir: spec/javascripts
spec_files:
- '**/*[sS]pec.js'
The <head> of my jasmine page contains the following, in order:
jasmine core <link rel="shortcut icon" type="image/png" href="/__JASMINE_ROOT__/images/jasmine_favicon.png">
<link rel="stylesheet" href="/__jasmine__/jasmine.css" type="text/css" media="screen">
<script src="/__jasmine__/jasmine.js" type="text/javascript"></script>
<script src="/__jasmine__/jasmine-html.js" type="text/javascript"></script>
<script src="/__jasmine__/json2.js" type="text/javascript"></script>
src_files <script src="/spec/javascripts/lib/jquery-1.10.2.js" type="text/javascript"></script>
<script src="/app/assets/javascripts/tools/dependency-parser.js" type="text/javascript"></script>
helper_files <!-- I didn't have anything here -->
spec_files <script src="/__spec__/dependency-parser_spec.js" type="text/javascript"></script>
jasmine boot <script src="/__boot__/boot.js" type="text/javascript"></script>
My app uses the asset pipeline, and the jquery-rails gem, along with the typical includes in app/assets/application.js:
//=require jquery
//=require jquery-ujs
//=require tree .
Because I am using the jquery-rails gem, that means I don't actually have the jQuery JavaScript files anywhere to load directly - they should come from the asset pipeline if they come from anywhere. It also seemed that I couldn't include the app/assets/javascripts/application.js file for some reason. This turned out to be okay; I just want to test my custom JavaScript, which depends upon jQuery.
So, I simply downloaded the version of jQuery that my app is using (1.10.2), and put it in:
spec/javascripts/lib/ <= I created this folder
After that everything worked perfectly, because I could predictably load my .js files in the order in which I needed them. It's not perfect. I now manually have keep my jQuery version the same in my specs as whatever version of jquery-rails I use, but that's a rather minor thing for now...though it begs the question, "Why the hell do people package javascript file into a gem?" No other web framework does this kind of wacky stuff.
I also tried using the jasmine 2.0.0.rc5 gem (the current version as of this writing), because it was supposed to take care of asset pipeline issues like this, but it didn't work for me.
I also tried jumping to something more complex like using the jasmine-jquery or jasminerice gems, but found both of their implementations to be more complicated versions of what I did above. Once I understood how the config file was generating the contents of the <head> tag in my particular case, it was a relatively easy fix.
I may move to jasmine 2.0.0 when it's released, if I feel it's necessary (it supposedly has better Rails 4 support), but I'm pretty sure this solution is going to work out just fine.