I am going to be working on an angular project without internet access, so my links to the cdn will not function. I would like to save the angularjs library to a folder inside of my project. Here is what I have tried:
I went to the cdn link, copied all of the text, pasted it into a file, and saved that file as angular.min.js . I then commented out the script tag for the cdn in my index.html file, and put in a new script tag specifying the path to the new saved file. When I open my project, I get the error "Uncaught ReferenceError: angular is not defined."
Here are the relevant pieces of my project's file/folder structure:
project
|_core
| |_public
| |_app
| |_index.html
|_libraries
|_angular.min.js
And here is my script tag:
<script src="./../../../libraries/angular.min.js"></script>
And here is the link to the cdn from which I copied the text:
https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js
Are you using a local webserver of any kind? Angular and many scripts need to be loaded from http and not file://. For this, you could use python's SimpleHTTPServer: python -m SimpleHTTPServer 8080 -- will open an http server on http://localhost:8080, open the url in your browser and you should be good to go. Also note that the order in which you load the scripts in your HTML is important, and Angular needs to be loaded before all modules of code that use it.
<script src="../../../libraries/angular.min.js"></script>
How about this ?
Have you just tried this?
<script src="/libraries/angular.min.js"></script>
Maybe your server start website (localhost:80) from the root of your project
You can use Grunt task to minify and concatenate all files. You can read the docs of GruntJS. Very useful.
http://gruntjs.com/sample-gruntfile
see the concatenate section.
if you do that manually you have check the sequence of lib files. Angularjs lib need to be on top.
There are chances of errors.
yes just to include a file you don't need Grunt
check in chrome inspect developer tool in network tab if your file angular.min.js loaded properly. If not you can change the path and try but if it is loading and still you are getting same error so please create jsfiddle or plunker of your file so that we can look it in detail.
Related
Hi im using Angular 7 and Spring framework, and i need to run a external JS function in TS file.
I tested on a single Angular application and it works well, when i compile the Angular code and put the result on spring resources and generate war file the script is not recognized, the console in browser shows "function undefined".
I modified Angular.json file setting the path of the script in "scripts" section, even if i set in index.html < script src="path/to/script2run.js"> it doesn´t works.
How can i load in spring application my JS file?
Can you help me please?
Regards
Where do you keep your JS file?
If it's working when you run with ng serve it should work when it's compiled as well.
So I think issue in the path. Try to see if this file is coming together with your intex.html.
You can do in Chrome browser:
right click -> inspect -> Network and refresh the page and you will see all files coming from server side to browser. If your JS file is not there than it's path issue make sure your js file is exist from where you are trying to get it.
I have an angular app, to this I am trying to add an npm package called svgedit. It gets installed. But when I try to reference a java-script file it says
net::ERR_ABORTED 404 (Not Found)
This is how I am trying to reference it in my index.html in the head section,
<script type="module" src="node_modules/svgedit/svgedit-config-es.js"></script>
I can access this file from within vs code by clicking "ctrl + left mouse". It opens the file properly meaning the reference is proper. But when it runs it gives the above mentioned error in the console. I have also tried switching the type attribute to "text/javascript".
Basically I am trying to integrate this package in my angular app. What is the correct method to go about it.
ng serve will only serve compiled files from your src directory and what''s in the assets folder. It will not serve node_module files directly.
The usual way to add scripts it to add it to the scripts section in angular.json
scripts:
[ //other scripts
"node_modules/svgedit/svgedit-config-es.js"
]
Is your html page in the root directory of your project? if not make sure to navigate to the file correctly. if the html page in the root directory of your project then there must be a typo in the src
Basically I am trying to integrate this package in my angular app. What is the correct method to go about it.
The right way to go about it is to use a bundler like webpack, rollup etc...
I am sorry to ask this silly question. I am trying to use pathfinding.js (https://github.com/qiao/PathFinding.js/) in ionic for my navigation.html page (a partial file located in the www/templates/ directory) but it's not working with partials files except with index.html root file only. However, it gives me error if I use it in the index.html root file, maybe because it needs to draw a svg in the navigation.html page, but it could not find the navigation.html page since it is in the index.html (dependency with the navigation.html)
I am thinking to use bower, but can bower solve this problem?
In index file add the script tag to add scripts.
<script src="./templates/PathFinding.js/">`
It will get loaded.
However, if you use Bower.. Bower will only download the files to src folder .. then you need to manually add script tags for script into the index.html.
normally I would go
<script src="~/Scripts/Controls/SomeScript.js"></script>
and this finds SomeScript.js in the "Scripts/Controls" folder of the same project that the ASP.NET .cshtml page is in.
The time has come however to share the javascript file between two projects. I need to move it to a library project.
What would the value of the src attribute have to be to locate the javascript file in a completely different project in the same solution? Do I have to do something else? How is this problem usually solved?
I have tried "Copy to output directory" on the "SomeScript.js" properties page and this copies the script and its containing folder to the 'bin' directory. However chrome reports "Not allowed to load local resource" when trying to access .js files in the bin folder.
The folder which your scripts exist must be within the project tree, especially if you are planning on publishing the app to a remote server. Visual Studio provides an option to Add Existing Items as a link, which would allow you to symlink items stored outside your project tree into a folder within your project tree. Any changes to the original file will be reflected in your project; however if the file is deleted, the link will remain, broken.
You must also add the following to the end of the project .csproj file before the Project close tag.
<Target Name="CopyLinkedContentFiles" BeforeTargets="Build">
<Copy SourceFiles="%(Content.Identity)" DestinationFiles="%(Content.Link)" SkipUnchangedFiles="true" OverwriteReadOnlyFiles="true" Condition="'%(Content.Link)' != ''" />
</Target>
This edit to the .csproj file will cause visual studio to actually copy the linked file to the location of the link at the end of the build.
In this way, you can still reference ~/Scripts/Controls/SomeScript.js in your project.
use this reference to resolve your issue: Server.MapPath("."), Server.MapPath("~"), Server.MapPath(#"\"), Server.MapPath("/"). What is the difference?
seems that the best way would be to use / at the beginning - that is the root directory.. you can manage your way down from there
refer to the http://dojotoolkit.org/documentation/tutorials/1.9/hello_dojo/demo/slideInGreeting.php
it is totally working fine.
The I copy the html and try to run it on my local apache.
it also working!
But when I try to load the same dojo.js on my web server, it won't work...!!?
(load the dojo.js on my localhost web server, instead of ajax.googleapis.com)
Here is my file structure, html and errors.
Oh, Finally I got it myself.
The dojo.js is only the base, if I use other module of dojo I have to add it on my need.
So I need to download all the dojo modules from:
http://dojotoolkit.org/download/
download the zip file --> Release:tar.gz (7.9MB)zip (12MB)
unzip it , then I can find all the files, include fx.js.
Finally , it working on my server now!