getting 404 error for bower components - javascript

I am trying to run my application using gulp task runner and i have installed few bower components and angular is one of them
When i try to run the application I am getting errors :
In index.html:
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/bootstrap-accessibility-plugin/plugins/js/bootstrap-accessibility.js"></script>
<script src="bower_components/mediaelement/build/mediaelement-and-player.js"></script>
<script src="bower_components/angular-socialshare/dist/angular-socialshare.min.js"></script>
I have also included the path but still getting the same errors.

Test 404 error urls from console by run those into the browser. It will ensure that files were available in the location or not.
Use relative path in all files if index.html and bower_components are in same location.
Ex : ./bower_components/jquery/dist/jquery.js
When your angular code start executing, angular does not exist.
AngularJS: Uncaught ReferenceError: angular is not defined
you are trying to access a variable called angular which is not defined.

"Uncaught ReferenceError: angular is not defined".
For this error make sure you have the right version of NodeJS installed with respect to your project.
npm install -g node#7.10.1. whatever version you want after the # symbol.
You can check the version by node -v.
For Bower Components.
bower install .

Related

openlayers and nodejs jquery not working offline

I have an openlayers with online jquery working, but sometimes I won't have internet access and I'd like to use it offline. I've downloaded the lib but it's not working, I'm sure that it's in the "js" folder, please help me
I'm using nodejs and openlayers
//working
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//not working
<script src="js/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
//browser error
Error: Bootstrap's JavaScript requires jQuery bootstrap.min.js:6:36
ReferenceError: $ is not defined
​it's giving me this error, but with online jquery it's OK
First of all you should install jQuery. Run command below in your project folder to install jQuery:
npm install jquery
You should import it in index.js file:
import {$,jQuery} from 'jquery';
// export for others scripts to use
window.$ = $;
window.jQuery = jQuery;
Based on this post.
Or you should import it to your html:
<script src="node_modules/jquery/dist/jquery.min.js"></script>
If you find the right answer please close the question on other communities(r.g. gis.stackexchange.com) and refer to the answer.
Thanks!
Hope it helps.
I just solved using a local server, don't ask me why it works this way and junt pointing the file path didn't work
first, open a terminal and go to the jquery.min.js folder, then start a simple server (ex: python3 -m http.server 8080)
after, go to the index. html file and add the source
<script src="http://localhost:8080/jquery-3.4.1.min.js"></script>
and now it works offline

How to setup the environment for Angular 2.0?

Taking my initial steps towards Angular 2.0.
First thing is to set up the right environment for the development.
My index.html
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to Angular 2.0</title>
<!--css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
<div class="container">
<h1> Hello Angular 2 </h1>
<my-app> Loading app component....<my-app>
</div>
<!--js-->
<!-- Polyfills for older browsers -->
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/zone.js#0.7.4?main=browser"></script>
<script src="https://unpkg.com/reflect-metadata#0.1.8"></script>
<script src="https://unpkg.com/systemjs#0.19.39/dist/system.src.js"> </script>
<script> window.autoBootstrap = true; </script>
<script src="https://cdn.rawgit.com/angular/angular.io/b3c65a9/public/docs/_examples/_boilerplate/systemjs.config.web.js"></script>
<script>
System.import('app').catch(function (e) { console.log(e); });
</script>
<!--js-->
</body>
</html>
I have copied the content from https://angular.io/docs/ts/latest/guide/setup.html for the following files:-
app.component.ts
app.module.ts
main.ts
NPM is installed & running.
But in order to get the node_modules folders with the required dependencies for the app to run.
What commands do I need to run.
What are the commands that I need to run to set up the Angular 2 environment?
Please note I am new to NPM.
Thanks.
You have angular-cli wich is a good starter point. It will set you everything up according to best practices.
Simple way to set up your first Angular 2 Application.
Download the zip version here.firstAngular2App
Extract it to your destination folder. Assume D:
Open your command prompt(ensure that all required softwares are installed).
Navigate it to the folder. Use the command cd D:\firstAngular2App
Executre npm install
Once it is done use npm start
This way you have your first Angular2 appliction up and running.
npm install in the root project (it will create your node_modules from the dependencies mentioned in package.json file, should have those files as a start)
If you are already using Visual Studio Code as an IDE, you may want to explore how they recommend setting up Angular. I personally found their installation guide painless and feature-rich. I have never walked through an official Angular installation before due to being drenched in jQuery projects. This guide was simple enough to give me a good beginners understanding.

ngCordova [$injector:modulerr] error with Ionic

I'm trying to use ngCordova in my project. I've used bower and installed it, put the full lib/ngCordova/dist/ng-cordova-js path after my Ionic Bundle and before Cordova in my index.html and here is my module:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova'])
But this error appears:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngCordova due to: ......
I've put everything in the right place, updated everything, but this error keeps appearing, how can i solve it?
That error occurs when you do not correctly load the javascript. Try referencing the ngCordova lib in your index
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/ngCordova/dist/ng-cordova.js"></script>
see the last line. If that does not help we need more information. Post your index html code and the full error you get that you left out after 'due to:'...

In angularJS application reloading the page causes missing dependency errors

I have an angularJS application that uses the ui.bootstrap directives. The ui.bootstrap module is included in index as follows:
<!-- JQuery first -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Then bootstrap it -->
<script src="/lib/js/tinymce/tinymce.min.js"> </script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<!-- Then let AngularJS take the wheel -->
<script src="/angular/angular.js"></script>
<!-- add dependencies -->
<script type="application/javascript" src="lib/angular-bootstrap/ui-bootstrap.js"></script>
<script type="application/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="/lib/angular-ui-tinymce/src/tinymce.js"></script>
<script src="/lib/angular-route.min.js"></script>
<!-- App client -->
<script src="/app.js"></script>
<!--Controllers-->
This works as I'm clicking through the site normally, but when the browser's reload button is hit, I recieve the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module reviewModule due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=ui.bootstrap
Is this just a quirk of angular? I've had issues like this before with reloading. Is there a way to prevent the default action of reload events and handle them with routeProvider manually?
Notice the src="lib/angular-bootstrap/ui-bootstrap.js" does not begin with a slash. This causes the script to be referenced from the current directory, not the root directory. Changing all script tags to include the initial slash like this: src="/lib/angular-bootstrap/ui-bootstrap.js" fixes the problem by referencing your script's paths from the applications root directory.
it is probably result of some kind of race condition. Your app.js script loads faster than others so it gives you injector error.
Try loading dependencies on head and your app.js in body

ReferenceError: inject is not defined

When I run the SpecRunner HTML file I get this error.
Looking around, this is due to angular-mocks.js not being referenced. In my case it is being referenced.
SpecRunner.html:
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<script type="text/javascript" src="lib/angular-mocks.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="../main/static/js/controllers/norm-definitions-controller.js"></script>
When the tests are run, I get this exception: ReferenceError: inject is not defined
I can see that angular-mocks.js is referenced and it's not a caching issue as I can see it using Firebug.
Looking in angular-mocks.js I can see the full reference angular.mock.inject = function() { ... }, I've tried this as a reference too, and get the exception ReferenceError: angular is not defined.
You still need angular.js lib. I didn't saw it among your scripts. It should be before angular-mock.js.
For the errors which come while adding karma and jasmine to testing your project, make sure that
your angular.js and angular-mocks js files both have same versions.
the jasmine version is compatible with angularjs version, refer to jasmine official site to make sure there is no syntax error.
refer to test formation on angular js official site to follow unit testing methodologies.
The above steps help avoid most of the common errors.

Categories

Resources