Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngGrid due to:
Error: [$injector:nomod] Module 'ngGrid' 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.
Above is the error message I received.
I have loaded the ng-grid script AFTER angularjs, jquery.
I injected it into app like this:
var myApp = angular.module('myApp', ['ui.bootstrap','ngRoute', 'ngResource','ngGrid'])
.controller('myAppCtrl', myAppCtrl);
I wonder where did I do wrong?
===UPDATE
Here is my header
<!-- Angular Libs -->
<script type="text/javascript" src="/library/angularjs/1.2.9/angular.js"></script>
<script type="text/javascript" src="/library/angularjs/1.2.9/angular-route.js"></script>
<script type="text/javascript" src="/library/angularjs/1.2.9/angular-resource.js"></script>
<!-- jQuery Libs -->
<script type="text/javascript" src="/library/jquery/2.1.1/jquery.js"></script>
<!-- Third-party Libs -->
<script type="text/javascript" src="/library/angular-ui/bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="/library/angular-ui/ng-grid3/2.0.7/ng-grid.js"></script>
They are all found. No error of 404 return in Chrome Inspector
USE ui.grid not ngGrid
yea. as stupid as it is. Confused by its official GetStarted lol
I was facing an error with ui-grid, I used the following ng-grid to solve.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
Related
After injecting ui.bootstrap into my module the application is loading a blank page without throwing any errors.
If i remove the injection that page loads fine.
angular.module('app',['ui.bootstrap'])
I have all the necessary includes
<script type="text/javascript" src="/ev2/lib/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/ev2/lib/bower_components/angular-animate/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
I need some help with firebase. I have an app with ionic, angularjs and firebase and works fine with browser. When I deploy to emulator or device I get the below error message.
Error: [$injector:nomod] Module 'firebase' 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.
I have included the header files as follows
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"> </script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
Can someone tell me if I missed anything?
I am building an SPA to run on a page in SharePoint 2013 online and having problems installing ui-bootstrap manually.
I have downloaded this file https://github.com/angular-ui/bootstrap/blob/master/src/modal/modal.js and saved as ui-bootstrap.js.
Then I reference the file in index.html:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/angular-route.min.js"></script>
<script type="text/javascript" src="~site/Webparts/js/ui-bootstrap.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/testLabApp.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/dal.js"></script>
<script type="text/javascript" src="~site/Webparts/testLabApp/email.js"></script>
<link href="~site/Webparts/testLabApp/style.css" rel="stylesheet" />
Then added dependency in App js file:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
However, I am getting injector error:
[$injector:modulerr] http://errors.angularjs.org/1.4.2/$injector/modulerr?p0=testLabApp&p1=Error%3A%20%5B%24injector%3Amodulerr...
Clearly, I have done something wrong, but I could not find how to download the right file(s) from github.
Any help is most appreciated.
Regards
Craig
If you are just using the modal.js, there is no module named ui.bootstrap.
Try changing:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap"]);
To:
var testLabApp = angular.module('testLabApp', ["ngRoute", "ui.bootstrap.modal"]);
Make sure to also download the template files for the modal (window.html and backdrop.html)
It looks like the problem is that you only downloaded modal.js, which is only the modal section, not all of ui-bootstrap.
Try this file: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.js
Or minified: https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js
I've been trying to add the angular-moment package to my angular app but I keep getting errors after trying to include the module.
I ran bower install angular-moment --save in the project root to install the package and verified that I was indeed loading the scripts in index.html:
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.js"></script>
However, as soon as I add the dependency to my app definition like:
angular.module('starter', ['angularMoment', 'ionic', ...
I get a console error such as:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module angularMoment due to:
Error: [$injector:nomod] Module 'angularMoment' 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.6/$injector/nomod?p0=angularMoment
at REGEX_STRING_REGEXP (http://192.168.8.250:8100/bower_components/angular/angular.js:63:12)
at http://192.168.8.250:8100/bower_components/angular/angular.js:1751:17
at ensure (http://192.168.8.250:8100/bower_components/angular/angular.js:1675:38)
at module (http://192.168.8.250:8100/bower_components/angular/angular.js:1749:14)
at http://192.168.8.250:8100/bower_components/angular/angular.js:4081:22
at forEach (http://192.168.8.250:8100/bower_components/angular/angular.js:322:20)
at loadModules (http://192.168.8.250:8100/bower_components/angular/angular.js:4065:5)
at http://192.168.8.250:8100/bower_components/angular/angular.js:4082:40
at forEach (http://192.168.8.250:8100/bower_components/angular/angular.js:322:20)
at loadModules (http://192.168.8.250:8100/bower_components/angular/angular.js:4065:5)
http://errors.angularjs.org/1.3.6/$injector/modulerr?p0=angularMoment&p1=Er…F192.168.8.250%3A8100%2Fbower_components%2Fangular%2Fangular.js%3A4065%3A5)
at REGEX_STRING_REGEXP (http://192.168.8.250:8100/bower_components/angular/angular.js:63:12)
at http://192.168.8.250:8100/bower_components/angular/angular.js:4104:15
at forEach (http://192.168.8.250:8100/bower_components/angular/angular.js:322:20)
at loadModules (http://192.168.8.250:8100/bower_components/angular/angular.js:4065:5)
at http://192.168.8.250:8100/bower_components/angular/angular.js:4082:40
at forEach (http://192.168.8.250:8100/bower_components/angular/angular.js:322:20)
at loadModules (http://192.168.8.250:8100/bower_components/angular/angular.js:4065:5)
at createInjector (http://192.168.8.250:8100/bower_components/angular/angular.js:3991:11)
at doBootstrap (http://192.168.8.250:8100/bower_components/angular/angular.js:1438:20)
at bootstrap (http://192.168.8.250:8100/bower_components/angular/angular.js:1459:12)
http://errors.angularjs.org/1.3.6/$injector/modulerr?p0=starter&p1=Error%3A…
The angularMoment module is defined so I'm not really sure why I'm getting this error?
The full includes look like:
<!-- ionic/angularjs js -->
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<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>
<script src="bower_components/requirejs/require.js"></script>
<script src="bower_components/angular-logX/release/amd/angular-logX.js"></script>
<script src="bower_components/angular-underscore-module/angular-underscore-module.js"></script>
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<!-- build:js scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/configuration.js"></script>
I think it's linked to this bug, http://github.com/urish/angular-moment/issues/36 because you have requirejs on your scripts.
[EDIT]
Has you find out, you have to move require.js below the moment.js include
[NOTICE]
This was originaly a comment but as it seems to be helpfull to various people I've made it has an answer for more clarity.
I'm using Plunker to show a bit of Angular functionality. I hit a really annoying bug that says:
failed to instantiate module fireApp due to:
[$injector:modulerr] Failed to instantiate module simpleLogin due to:
[$injector:nomod] Module 'simpleLogin' 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.
I have tried to import simpleLogin in various ways
<script src="https://cdn.firebase.com/js/simple-login/1.6.3/firebase-simple-login.js"></script>
and
<script data-require="firebase-simple-login#*" data-semver="1.6.2" src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
Here's my head:
<head>
<script src="https://code.angularjs.org/1.2.21/angular.js" data-semver="1.2.21" data-require="angular.js#1.2.21"></script>
<script data-require="firebase#*" data-semver="1.0.18" src="https://cdn.firebase.com/js/client/1.0.18/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/0.8.0/angularfire.js" data-semver="0.8.0" data-require="angularfire#*"></script>
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js" data-semver="1.6.2" data-require="firebase-simple-login#*"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js" data-semver="2.1.1" data-require="jquery#*"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js" data-semver="3.1.1" data-require="bootstrap#*"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" data-semver="4.1.0" data-require="font-awesome#*" />
<script src="app.js"></script>
<link href="main.css" rel="stylesheet" />
</head>
Here's the plunker: http://plnkr.co/edit/YX9qXmPCurZ6BEXCDilr?p=preview
I forgot that I was using simpleLogin as a service (via angularfire seed).
To use it otherwise, you just need to use $firebaseSimpleLogin as a dependency in your controller.
User Login and Authentication in Angularfire