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.
Related
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'm trying to add the angular-flot library to a yeoman scaffolded angular project.
I added it using
bower i --save angular-flot
which pulled it into my bower_components directory but didn't add it to the index.html file.
I added it manually (as well as a reference to the flot CDN) and it works fine using
grunt serve
however, when I do
grunt build
and load the index.html file from the /dist directory, I get an error that the angular-flot is not included. So I think it's not making it through minification.
This is how the relevant section of my index.html look. I manually added the three lines between endbower and endbuild
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-touch/angular-touch.js"></script>
<!-- endbower -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="bower_components/angular-flot/angular-flot.js"></script>
<!-- endbuild -->
Have you tried running grunt wiredep? This should add the dependency to index.html.
Also, you need to make sure your dependency is included in app.js:
angular.module('yourApp', [
'ngMessages',
'ngRoute',
'ngSanitize',
//...
'angular-flot'
])
I just installed Angular UI Grid via Bower.
My bower_components directory looks like this:
.
..
angular
angular-animate
angular-cookie
angular-cookies
angular-mocks
angular-resource
angular-sanitize
angular-touch
angular-ui-grid <-- the interesting directory
angular-ui-router
angularjs-rails-resource
bootstrap-sass-official
fontawesome
jquery
ng-token-auth
Confusingly, my index file looks like this:
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-animate/angular-animate.js"></script>
<script src="../bower_components/angular-cookies/angular-cookies.js"></script>
<script src="../bower_components/angular-touch/angular-touch.js"></script>
<script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="../bower_components/angular-resource/angular-resource.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="../bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
<script src="../bower_components/angular-cookie/angular-cookie.js"></script>
<script src="../bower_components/ng-token-auth/dist/ng-token-auth.js"></script>
<script src="../bower_components/angularjs-rails-resource/angularjs-rails-resource.js"></script>
<!-- endbower -->
<!-- endbuild -->
Notice the absence of angular-ui-grid.
It's not that there are no .js files in bower_components/angular-ui-grid:
$ find bower_components/angular-ui-grid -name '*.js'
bower_components/angular-ui-grid/ui-grid.js
bower_components/angular-ui-grid/ui-grid.min.js
What could be the problem?
Ah ha. I had angular-ui-grid in devDependencies in bower.json. It needed to be in dependencies.
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>
Trying out Yeoman (1.0.4). Generated an Angular app with yo angular; entered No to installing Bootstrap with Sass, as I wanted Bootstrap v 3 with LESS.
After scaffolding, to get Bootstrap 3, I entered:
bower install bootstrap
That installed bootstrap into bower_components/bootstrap folder. But it did not link/include Bootstrap's CSS or JS in index.html file. Why?
The index.html file does have Angular js files from bower_components folder:
<!-- build:js scripts/modules.js -->
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- endbuild -->
But not bootstrap files. Why? Do I have to add/link to them manually? What am I doing wrong? How can I add Bootstrap after generating a scaffold for my app?
According to yeoman's Getting Started guide:
# Install it and save it to bower.json
>bower install jquery-pjax --save
# If you're not using RequireJS...
>grunt bower-install
This is supposed to inject your dependencies into your index.html file.
Note:
There is some setting up that needs to be done, before being able to use bower-install.
See, here for more details.
You must edit the index.html. Yeoman generator builds the base index.html. Bower only downloads dependencies as packages... but that's all, it doesn't know anything else about your app and how are you going to use the packages it downloaded. You must add the desired files by yourself.
With https://github.com/stephenplusplus/grunt-bower-install, if you have the following in your index.html
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<!-- endbower -->
<!-- endbuild -->
Then bower install will add the vendor files to your html whenever it runs. Otherwise, yes.
Using yeoman, you install dependencies with the --save flag to update the bower.json file.
After that, you run $ bower update(optional) and do a $ grunt wiredepto inject the dependencies into your index.html.
If you look at the comments in your index.html generated by Yeoman, you will see something like:
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/modernizr/modernizr.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/json3/lib/json3.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.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-touch/angular-touch.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-block-ui/dist/angular-block-ui.js"></script>
<!-- endbower -->
<!-- endbuild -->
It is within those comments that the dependencies will be injected
Wiredep does it without depending on Grunt or any other build tool: https://github.com/taptapship/wiredep
npm install --save wiredep
Insert placeholders in your code where your dependencies will be injected:
<html>
<head>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
Let wiredep work its magic:
$ node
> require('wiredep')({ src: 'index.html' });
Since Bootstrap version 3.3.5, the bootstrap.css file has been removed from Bootstrap's package manager json. Thus, I had to roll back to version 3.3.4 before running wiredep.
bower install --save bootstrap#3.3.4