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?
Related
My css and js functionality dont load properly in VSC.
When I go live, it seems that it cannot find the files.
only when I refer to it from the project root will it work in css.
from src/main/webapp/ <script src="src/main/webapp/js/darkmode.js" type="text/javascript"></script>
in Intellij and Heroku web deployment it works from the webapp root:
from webapp/ <script src="/js/darkmode.js" type="text/javascript"></script>
The same applies to .css files.
And then I am not even talking about referring to REST resources on heroku, as this will work on tomcat local but not on heroku web with the same adress.
It seems my problems in vsc where down to loading in a larger project with Java, when I loaded only the webapp folder then things worked properly !
You can use drag and drop mouse files from project to working file ( VS Studio)
Or using "~"
<link href="~/Content/bootstrap-chosen.css" rel="stylesheet" />
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.
In the demo html page downloaded from the 'Trying Out React' page, they use the following CDN to bring in babel.js:
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
Seems like React knows to automatically use this library.
But if I've installed babel using npm install babel-cli Where can I find this 'babel.js' file?
<script src="node_modules/babel-cli/[babel.js?]"></script>
Am I thinking about this wrong?
It sounds like you now need to compile the script(s) you're using which require Babel, as described in the Usage guide: https://babeljs.io/docs/usage/cli/
You may need to use the "--out-file" to reference later in your HTML file.
thanks for your time! I am battling to get any scripts running in the Ionic framework's sidemenu starter template. I have placed them everywhere (except where they're supposed to be, clearly) but to no avail. I have tried loading them before ionic and also using a lower version of jquery. I have built a decent mobile site with jquery that I've pushed through phonegap and it works perfectly but I would like to use Ionic as a personal challenge. However, I can't seem to get any of the scripts I'm using to work.
Do I include them in the main index file and if so, do they get loaded when each template instantiates? Or must I include them in each of the templates? If you could please be quite specific as to where in the folders I should place them (if indeed there is a specific place) and also where I should call the scripts.
I installed ionic using this yeoman generator https://github.com/diegonetto/generator-ionic if that helps.
If I have note been clear enough please comment and I will elaborate further.
Thank you for your patience - J
I know this is old, but for those who are struggling with this for Ionic 2, add script files to src/assets/scripts, then refer to them via a script tag in src/index.html (not the one in www). When it builds, everything in src/assets will be copied to www/assets, including your scripts. index.html will also be copied to www.
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="assets/scripts/openpgp/openpgp.js"></script>
<script src="assets/scripts/openpgp/openpgp.worker.js"></script>
I would add any scripts such as jquery either just before or just after the script tag for cordova. This is in index.html located within the app/ directory of the project that running the yeoman generator created.
<!-- Place scripts such as JQuery here -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
Once you have placed the scripts here they will get called when the app runs, and libraries such as jquery will be available globally throughout the app. I hope this helps.
As nice listed by a user here https://github.com/ionic-team/ionic/issues/9422
Install latest ionic
Start your project
Go to /src/
open the assets folder
create a /js/ folder inside assets
copy your .js inside this js folder
goto /src/index.html
Add your path
Go to your typescript file of choice and declare var N;
N.yourFunction
ionic serve
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?".