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?
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 am having issue with ngMaterial while including it in project then its showing error Uncaught Error: [$injector:unpr]
My app.js file look like
angular
.module('app', ['ui.router','ngMaterial','objectTable'])
.config(config)
.run(run);
and in view, I have included files in this order
<!-- external scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<!-- bower plugins -->
<script type="text/javascript" src="app-content/scripts/object-table.js"></script>
<!-- application scripts -->
<script src="app.js"></script>
<script src="app-services/user.service.js"></script>
<script src="app-services/flash.service.js"></script>
<script src="home/index.controller.js"></script>
<script src="account/index.controller.js"></script>
Can anyone help me to solve this? I tried to change the order of files but still, the issue is same.
It should be like this.
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.min.js"></script>
Import angular-animate and angular-aria before angular-material.
see this code. switch angular-animate import and see the difference.
http://codepen.io/next1/pen/NNRMeQ
For posterity: I installed using Visual Studio and NuGET. I first installed my angularjs.core package (only the angular file). This was version 1.5.8. I then installed angular material afterwards. This was installed in version 1.1.3. What i didnt notice at first was that when iu installed angular material was that it included its own version of angular.
The point is - i was using my first installed "angularjs.core" in a way to high version (i think this was the problem). I then switched to using the angular version shipped with material NuGet package. Then then everything worked.
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.
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>
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