I've just added angular-leaflet-directive to my project and when I come to build it with Grunt, it's now failing. The dependency was added using bower. This project was built using the Yeoman angular-generator.
Here I'm including the leaflet-directive in my app.js
angular
.module('statsApp', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute',
'leaflet-directive'
])
And then for now, I simply have <leaflet></leaflet> in my view just to get things started.
When the Grunt build fails, I get this error message
Error: [$injector:modulerr] Failed to instantiate module statsApp due to:
Error: [$injector:modulerr] Failed to instantiate module leaflet-directive due to:
Error: [$injector:nomod] Module 'leaflet-directive' 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.
This SO post solved my problem. It's not specific to the module I'm adding, but specific to Karma tests failing because they didn't know about the leaflet-directive module.
AngularJS Error: Module ngAnimate is not available
Related
I installed angular-sweetalert ^1.1.2 via npm install --save angular-sweetalert and tried to inject it:
var app = angular.module('myApp', [
require('angular-sweetalert') // doesn't work
]);
I'm getting the following Error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module undefined due to:
Error: [ng:areq] Argument 'module' is not a function, got undefined
It seems like it's depending on more:
include the files in your app
i. SweetAlert.min.js
ii. sweet-alert.js OR sweet-alert.min.js
include the module in angular (i.e. in app.js) - oitozero.ngSweetAlert
Any ideas how to properly install/require the module?
Thanks in advance!
The module injector name is wrong, it should be 'oitozero.ngSweetAlert' rather than 'angular-sweetalert', also don't use require in the module injector. From angular.module says
A module is a collection of services, directives, controllers,
filters, and configuration information. angular.module is used to
configure the $injector.
var app = angular.module('myApp', [
'oitozero.ngSweetAlert'
]);
PS: Make sure all the dependency files (step 2) are included before inject the library module.
I want to use materialize for my angular project from https://github.com/krescruz/angular-materialize but I get the error
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to
instantiate module F1FeederApp due to: Error: [$injector:modulerr]
Failed to instantiate module ui.materialize due to: Error:
[$injector:nomod] Module 'ui.materialize' 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.
In my app.js:
angular.module('F1FeederApp', [
'ui.materialize',
'F1FeederApp.services',
'F1FeederApp.controllers',
'ngRoute'
]).
What am I doing wrong? According to the link above these declarations should have been enough..
Try running this in root of your project if you are using bower.
bower install angular-materialize --save
and add the source file angular-materialize/src/angular-materialize.js into your index.html
OR
If you are not using bower or node download this file in your project and add it in your index.html
Hope this helps
So I am quite new to AngularJS and I can't seem to add additional module lets say for example d3 for graph.
So My code for adding new modules is
(function() {
'use strict';
angular
.module('infographicsModule', ['ngAnimate', 'ngCookies', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ngResource', 'ui.router', 'ui.bootstrap', 'toastr']);
})();
But if I try to add d3 as an additional module it throws an error
Uncaught Error: [$injector:modulerr] Failed to instantiate module infographicsModule due to:
Error: [$injector:modulerr] Failed to instantiate module d3 due to:
Error: [$injector:nomod] Module 'd3' 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.
Any suggestions? If you require more code, I can post it.
Maybe it's happen cause D3 isn't an angular module.
You can try do this with the following link: https://github.com/WealthBar/angular-d3
Or you can encapsulate in a service or factory and call from this.
in my app.js I have included the dependency for flow
var myApp = angular.module('myApp',['ui.router', 'ngResource', 'flow']);
I have included the javascript in my index file to load as follows
<script type="text/javascript" src="//cdn.jsdelivr.net/flow.js/2.0.0b2/flow.js"></script>
I am getting the error Module 'flow' is not available!
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module flow due to:
Error: [$injector:nomod] Module 'flow' 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.2.23/$injector/nomod?p0=flow
This is probably because if you want to use the ['flow'] module in angularJs you have to include both:flow.js and ng-flow.
If you are using bower and it is configured to place the libraries on the js/vendor you would have to do something like this.
bower install "ng-flow#~2" --save
{{ HTML::script('js/vendor/flow.js/dist/flow.min.js') }}
{{ HTML::script('js/vendor/ng-flow/dist/ng-flow.min.js') }}
If you are not, just look for a ng-flow CDN.
Best regards!
you need to include http: before your cdn:
change your script to this and it should work:
<script type="text/javascript" src="http://cdn.jsdelivr.net/flow.js/2.0.0b2/flow.js"></script>
I'm attempting to pre-render my AngularJS site using PhantomJS. (With phantomjs-runner.js from http://www.yearofmoo.com/2012/11/angularjs-and-seo.html) I'm unable to load the page through PhantomJS as the error below occurs. This error does not occur in IE/Chrome/Firefox.
How do I go about fixing this error?
Error:
Error: [$injector:modulerr] Failed to instantiate module SpaceForAfrica due to:
Error: [$injector:modulerr] Failed to instantiate module dialogs due to:
Error: [$injector:modulerr] Failed to instantiate module ngSanitize due to:
Error: [$injector:nomod] Module 'ngSanitize' 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.2.1/$injector/nomod?p0=ngSanitize
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:1507
at ensure (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:1435)
at module (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:1717)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:3527
Module config
var SpaceForAfrica = angular.module('SpaceForAfrica', ['ngRoute', 'HashBangURLs', 'ui.bootstrap', 'ui.bootstrap.tpls', 'google-maps', 'ui.growl', 'dialogs', 'ngSanitize', 'angularSpinner','angulartics', 'angulartics.google.analytics']).config(spaceForAfricaConfig);
It looks like you might be missing a reference to the ngSanitize code. ngSanitize is part of the AngularJS framework (https://docs.angularjs.org/api/ngSanitize), however, you have to include a separate reference before your PhantomJS reference in order to utilize it.
It appears you are using version 1.2.1 of AngularJS, so you could easily just add one of these tags (or grab the code to include in your own app.)
Non-minified:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.js"></script>
Minified:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>