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:'...
Related
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 .
I am new to ionic framework and trying to put the ngPDFViewer to my application. The error I get is:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngPDFViewer due to:
Error: [$injector:nomod] Module 'ngPDFViewer' 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.
What I do
In index.html
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/pdf.compat.js"></script>
<script src="lib/pdf.js"></script>
<script src="lib/ng-pdfviewer.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
In app.js
angular.module('starter', ['ionic', 'ngPDFViewer', 'starter.controllers', 'starter.services'])
More information about ngPDFViwer here:
https://github.com/akrennmair/ng-pdfviewer/
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
I try to use ngAnimate module to create a simple animation. The problem is that every time I try to just include this module as a dependency I got this error: Error: Unknown provider: $animateProvider from ngAnimate.
The code is very simple, but I can't get what is the problem.
Here is my HTML template:
<html>
<head>
<script type="text/javascript" src="/js/lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-animate.js"></script>
<script type="text/javascript" src="/js/lib/angular-cookies.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-resource.min.js"></script>
<script type="text/javascript" src="/js/lib/angular-ui-router.min.js"></script>
<script type="text/javascript" src="/js/lib/underscore-min.js"></script>
</head>
<!-- And so on -->
</html>
And I include ngAnimation in my module like this:
var myModule = angular.module('myModule', ['ngCookies', 'ngResource', 'ui.router', 'ngAnimate']);
Quite simple. Everything is like in this tutorial, nothing special. But it doesn't work. The same problem was on stackoverflow here, but useless...
So, can anybody explain me what is the problem?
All in all the problem was fixed by migrating to 1.2.13 version of AngularJS. I think that this error was occured bacause 1.0.8 doens't support it (or maybe it was some thing else).
I fixed this error by updating to angular 1.2.13. Seems that for me was due to mismatching versions between angular 1.0.8 etc.
In my experience, this type of error is usually due to wrong file references. Are you sure the path to angular-animate.js is correct? does it point to the right file? is the file present in your directory?
Quoting another answer that helped me for future watchers of this post:
https://stackoverflow.com/a/24766563/1366216
Ran into the same problem. You have to match the version of angular to angular animate.
change:
"angular-animate": "1.2.6"
Crux is that you need to match angular version with angular-animate version.
I'm using Laravel 5.5 and AngularJS 1.7 with laravel-mix but I'm facing issues. Angular fails to load module. Here's my code...
webpack.mix.js
mix.scripts([
'node_modules/angular/angular.js',
'resources/assets/js/admin.js'
], 'public/js/all.js');
admin.js
var app = angular.module("admin", []);
app.controller("AdminController", function($scope) {
$scope.doSomething = function(){
console.log('doing something....');
}
});
I have included an Angular module in the body of the template.
<body class="hold-transition skin-red sidebar-mini fixed" ng-app="admin">
And mixed js files into the footer of the Blade template.
<!-- jQuery 3 -->
<script src="{{asset('admin/bower_components/jquery/dist/jquery.min.js')}}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{{asset('admin/bower_components/bootstrap/dist/js/bootstrap.min.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{asset('admin/dist/js/adminlte.min.js')}}"></script>
<script src="{{asset('js/all.js')}}"></script>
<!-- Optionally, you can add Slimscroll and FastClick plugins.
Both of these plugins are recommended to enhance the
user experience. -->
</body>
</html>
Then run ...
npm run dev or npm run watch
However, I'm still getting the same error...
jquery.min.js:2 Uncaught Error: [$injector:modulerr] Failed to
instantiate module admin due to: Error: [$injector:nomod] Module
'admin' 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.