Firefox is not loading my scripts under Node.js - javascript

I started a project using generator-gulp-webapp and I ran bower install --save heatmap.js. After that I added the Google Maps API source files to index.html and added the following two lines to the html-file:
<script type="text/javascript" src="bower_components/heatmap.js/src/heatmap.js"></script>
<script type="text/javascript" src="bower_components/heatmap.js/src/heatmap-gmaps.js"></script>
My problem now is that when I run gulp serve, none of those files are actually loaded. I don't seem to be getting any 404 errors when I look through the network inspector either. They seem to load just fine when I open up the index.html-file manually, without going through gulp / visiting http://localhost:9000/.
What am I missing here? I'm sure it's something really simple. Here are all of the relevant files.

Okay, turns out that the answer is "have you tried disabling Adblock?".

Related

Bundle.js is not in any folder of my application despite devtool saying the opposite

first I am NOT using webpack, its a full MERN stack application.
I run Lighthouse to test my app performance and it says to minify Bundle.js, it has been two hours or more...and still can't find it.
in my index.html there is a line that I am NOT seeing it in my code but appear in the inspector (devtool)
<script type="text/javascript" src="/static/js/bundle.js"> </script>
i tried to add my workspace to chrome dev tools to locate it, but still doesn't work
enter image description here
I found it,
When you run npm start in any of the examples, an Express server will start which will use Webpack to server /static/bundle.js in development.
here it is ...
https://github.com/reduxjs/redux/issues/1137

How to include a script for use in the html

I am trying to experiment with tinymce npm. I am following their guide and I am stuck here
Include this line of code in the <head> of your HTML page:
<script src="/path/to/tinymce.min.js"></script>.
Now inside my head in html, I put this code
<script src="node_modules/tinymce/tinymce.min.js"></script>.
however in the console, there is an error Failed to load resource: net::ERR_FILE_NOT_FOUND
I also find another stack overflow question related to my problem and came across this one
I also tried using the solution here and this is what I did but still the same error.
<script src="scripts/tinymce.min.js"></script>
here is a screenshot of my sample project.
I am trying to get tinymce.min.js to index.html which is inside views/blog folder
My question is, how can I make this work?
A simple fix for you would be to use a CDN instead of NPM.
Replace this: <script src="node_modules/tinymce/tinymce.min.js"></script>
With this: <script src="https://cdnjs.com/libraries/tinymce"></script>
Below I give my guess at the issue, but I can't be sure without inspecting your whole project:
I think you are neither building nor serving your project. In your sample project I don't see any webpack, gulp, grunt, or other build tool config file. I also don't see anything like Browserify or similar. Those tools would be able to read your script pointing to a local npm folder and replace it with the script from the npm folder. Without those tools, your browser will think the src= string is a web url and the resource will not be found.
As I mentioned, a CDN is a simple fix because that is a real website hosting the script you are asking for. A more complicated approach which is used in commercial development is to have a complete build process and then a server.

Angular CLI: Can't load CDN Scripts in HTML

Currently doing my first project with the Angular CLI, and I'm running into a ridiculous issue. For some strange reason, my scripts won't load when I load them from the through CDN's.
Just before the tag I'm loading the following scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
However, when I run ng serve, both these scripts aren't loaded.
This leaves me asking: why? Especially since in my , I am loading the Bootstrap CSS through a CDN without any issues:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Why does the Angular CLI decide not to load my scripts? And does anyone have a clue how to fix this?
Final note: I'm aware that I could npm install both dependencies and put them in the angular-cli.json file. However, I do not want to do this as I prefer to load them through CDN's. So I'm praying for a simple solution through the tags!
Thanks!
What do you mean "aren't loaded"? you not see them in the browser?
i guess that you have compile error, maybe you need to install type?

Using angular-google-places-autocomplete

inculded angular-google-places-autocomplete in my project for places autocomplete using
bower install angular-google-places-autocomplete
shows an error in the console
Global `google` var missing. Did you forget to include the places API script?
following the kuhnza/angular-google-places-autocomplete documentation included below script manually in the index.html
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
then every works fine , but when moving to production app is build using grunt build then minified and uglified files are created the the same error reappears.
i think the manually added script is removed during building the app.
what to do to solve this issues.how to include this google places api in application properly.Thanks in advance
You need to move your script for google api call before your build:js in the index.html declaration

platform is not defined in polymer files downloaded from website

I'm trying to make a web application but i keep getting the error:
Uncaught ReferenceError: Platform is not defined
In the polymer.js file I downloaded from the website. How do H fix this?
I tried to re-download it and redid the import, which got rid of the other errors but this one persists.
You need to also load platform.js (the polyfills). Make sure it is the first script loaded on your page and comes before any HTML imports:
<script src="bower_components/platform/platform.js"></script>
The basic setup is here: http://www.polymer-project.org/docs/start/usingelements.html#using
More info here: http://www.polymer-project.org/docs/start/getting-the-code.html
platform.js was replaced now for webcomponents.js
If you are sure that is all right with your section and even so the error remains, there is something wrong with your environment (maybe some incompatibility between different versions of components or scritps).
Clear and download all your components and scripts again from the sources. I recommend use of Bower for that. Just wipe your repository and make a fresh bower install.

Categories