I am having an issue trying to add a module (angular-google-maps) to Mean.js
I ran:
bower install angular-google-maps --save
Then added 'google-maps' to public/config.js in the applicationModuleVendorDependencies array:
var applicationModuleVendorDependencies = ['ngResource', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils', 'google-maps'];
But when I try to run (using grunt) I get an error:
Error: [$injector:nomod] Module 'google-maps' 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.
Is there some other step I need to do? On https://angular-ui.github.io/angular-google-maps/#!/use it says angular-google-maps depends on Lodash, do I have to add this in the module vendor dependencies also?
Angular-google-maps does not include the google-maps js api. You need to add it manually to your js-libs in config/env/all.js. This is also the place where you can add the lodash and angular-google-maps js files:
assets: {
lib: {
js: [
'//maps.googleapis.com/maps/api/js?sensor=false',
'public/lib/lodash/dist/lodash.underscore.js',
'public/lib/angular-google-maps/dist/angular-google-maps.js']
}
}
Related
I try to use angular-google-analytics for tracking traffic. I'm using angular 1.4.8.
Version of angular-google-analytics is 1.1.9. I included it in my bower.json file and linked script in my template.razr file as a showed below:
<script src='bower_components/angular-google-analytics/dist/angular-google-analytics.min.js'></script>
In main module of the app I did dependency injection as below in my .coffee file:
app = angular.module('speedUpApp', [
'angular-google-analytics',
'ngAnimate'
'ngCookies'
'ngSanitize'
'ngTouch'
'pascalprecht.translate'
'ui.router'
'ngMaterial'
'ngMap'
'slick'
'nl2br'
'lodash'
'angular-images-loaded'
'ui.select2'
'angular-iscroll'
'smoothScroll'
'angular-inview',
'dibari.angular-ellipsis'
'ngFileUpload'
])
First dependency is just angular-google-analytics. In spite of those steps after running my local server in my browser console I receive an error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module speedUpApp due to:
Error: [$injector:modulerr] Failed to instantiate module angular-google-analytics due to:
Error: [$injector:nomod] Module 'angular-google-analytics' 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.
Now I cannot recognize the problem, because I declared the angular-google-analytics module dependency and dependency injection too, despite of it, I still encounter this error. Any help?
I am trying to implement show more show less functionality in my project using angular. Following are the versions of angular, bootstrap and jQuery in my project.
"angular": "^1.6.0",
"bootstrap": "^3.3.7",
"jquery": "2.2.4"
I have added the bower component to add this functionality. I ran following command:
bower install angular-read-more --save
I have also included the JS files.
Then I added module to the app:
angular.module("app", ["hm.readmore"]);
When I am running the project, I am getting error in browser console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module regulationLibraryApp due to: Error: [$injector:modulerr] Failed to
instantiate module hm.readmore due to: Error: [$injector:nomod] Module
'hm.readmore' 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.
Where I had mistaken? Is there any other easy way to implement this functionality?
Looks like your bower dependencies are not loaded before angular application is bootstrapped.
Load your bower dependencies before you load angular app.
For example
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-read-more/readmore.min.js"> </script>
<script src="/my_angular_app/app.js"></script>
You're probability missing ngAnimate dependency.
To get it work 'hm.readmore' uses: ngSanitize, ngAnimate both plugins.
So, you can download it from npm repository https://www.npmjs.com/package/angular-animate
I am working on a project with specific authentification that is already working in Ionic. I have to implement the same for the admin panel that will be available only for web devices, so I already installed all the dependencies, configured the app and did already the HTML/CSS stuff in ZURB Foundation for Apps 1.1.
Now I am stuck on the implementation of the controllers and services.
I read the official documentation and there is not much explanation for the custom controllers and services, so I found few texts on the web that explain the structure of the Foundation for Apps. I found also a sample app with the structure that is explained here: ORGANIZING ANGULAR FILES IN ZURB FOUNDATION FOR APPS and copied the sample files for each page from here: Foundation for Apps Template
So I put inside my app the About, Contact, Home and Shared folders inside the assets/js folder.
So the Shared folder for example contains controllers.js file with the following code:
(function () {
'use strict';
var controllers;
AppCtrl.$inject = ['$scope'];
function AppCtrl($scope) {
// This is a shared controller because its the application parent controller
}
controllers = {
AppCtrl: AppCtrl
};
angular.module('SharedModule').controller(controllers);
})
The module.js file contains this:
(function () {
'use strict';
angular.module('SharedModule', [ /* Dependencies to be shared everywhere */ ]);
})
The app.js file has the almost the same code as the generated file, except the custom modules are specified:
(function() {
'use strict';
angular.module('application', [
'ui.router',
'ngAnimate',
//foundation
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations',
// My modules
'SharedModule',
'ContactModule',
'AboutModule',
'HomeModule'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
$locationProvider.hashPrefix('!');
}
function run() {
FastClick.attach(document.body);
}
})();
So now, when I run the application I get the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module
application due to: Error: [$injector:modulerr] Failed to instantiate
module HomeModule due to: Error: [$injector:nomod] Module 'HomeModule'
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 help would be appreciated, thanks.
I fixed the problem.
I tried to remove the modules one by one to test if there is a problem with individual modules, but the same error was thrown, so I checked the individual files as well, but the files look the same as in the sample app. Then, I checked if the dependencies are called, but since they are not called inside the index file like in a regular AngularJS app, I compared the gulpfile.js and came with the solution:
Inside the appJS array I had to include the paths for the .js files, so that part of the gulpfile.js looks like this now:
appJS: [
'client/assets/js/app.js',
// Load my modules
'client/assets/js/*/module.js',
'client/assets/js/*/controllers.js',
'client/assets/js/*/factories.js',
'client/assets/js/*/services.js',
'client/assets/js/*/directives.js'
]
I'm trying to use Breeze with my AngularJs application.
I added breeze to my bower dependencies using:
bower install --save-dev breeze-client
This command added the dependency to my bower.json file as follows:
"dependencies": {
//Other dependencies here
"breeze-client": "~1.5.4"
}
The thing is that I'm using wiredep with gulp to automate my build process, but when wiredep adds my dependencies it only injects the breeze.debug.js file as follows:
<script src="/bower_components/breeze-client/breeze.debug.js"></script>
Therefore, when I add this dependency to my core module in Angular it doesn't find the 'breeze.angular' module dependency
(function () {
'use strict';
angular
.module('app.core', ['breeze.angular']);
})();
// This is the thrown error
// Error: [$injector:modulerr] Failed to instantiate module breeze.angular due to:
// Error: [$injector:nomod] Module 'breeze.angular' 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 know this is the error because when I add this reference manually, it works perfectly.
So my final question is: how can I add (after the breeze.debug.js dependency) the breeze.bridge.angular.js dependency located in the build/adapters folder using wiredep?
I managed to achieve this by editing my bower.json file. Overriding my breeze angular main dependency as follows:
bower.json file
"overrides": {
"breeze-client": {
"main": ["breeze.debug.js", "build/adapters/breeze.bridge.angular.js"],
}
}
This way I am referencing the main file and then the breeze.bridge.angular.js file. Now my bower dependencies are added as I need:
<!-- bower:js -->
// Previous dependencies
<script src="/bower_components/breeze-client/breeze.debug.js"></script>
<script src="/bower_components/breeze-client/build/adapters/breeze.bridge.angular.js"></script>
<!-- endbower -->
Now everything is working perfectly
I've installed angular-formly-templates-bootstrap via bower on a project that I've been working on. But when I try to inject it in angular, I receive the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module bandar due to:
Error: [$injector:modulerr] Failed to instantiate module formlyBootstrap due to:
Error: [$injector:nomod] Module 'formlyBootstrap' 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.4.1/$injector/nomod?p0=formlyBootstrap
at http://localhost:3000/bower_components/angular/angular.js:68:12
at http://localhost:3000/bower_components/angular/angular.js:1949:17
at ensure (http://localhost:3000/bower_components/angular/angular.js:1873:38)
at module (http://localhost:3000/bower_components/angular/angular.js:1947:14)
at http://localhost:3000/bower_components/angular/angular.js:4355:22
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
at http://localhost:3000/bower_components/angular/angular.js:4356:40
at forEach (http://localhost:3000/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:4339:5)
The problem is, bower doesn't load angular-formly-templates-bootstrap in the browser. There are some other packages which are being loaded to the browser with bower. But I don't know what the problem is with formlyBootstrap.
Are you using gulp for inject bower dependencies? If so, find in gulp config something like that
exports.wiredep = {
exclude: [/bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
So all files ended with 'bootstrap.js' not injected. You can chage it with something like that
exports.wiredep = {
exclude: [/[^-]bootstrap.js$/, /bootstrap-sass-official\/.*\.js/, /bootstrap\.css/],
directory: 'bower_components'
};
Got the same error. I was working with gulp angular generator which seems to be ignoring formly bootstrap. I changed the main file in bower_components for angular-formly-bootstrap-template to dist/...bootstrap.min.js. Started working after that. Seems like the generator was ignoring files having bootstrap.js at the end