I am testing browserify with angular. I have installed ng-resource to my project:
npm install --save ng-resource
I am loading it like this:
require('angular');
require('ng-resource');
require('angular-ui-router');
var app = angular.module('app.module', ['ngResource']
but receive the following error:
Failed to instantiate module app.module due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to..
As far as I know I do not have to load ng-resource explicitly when I am using browserify... What am I doing wrong here?
Are you sure you are requiring the correct library? Do you probably mean the official angular-resource?
Please compare https://www.npmjs.com/package/ng-resource and https://www.npmjs.com/package/angular-resource
I think the latter is the one to go with. The ng-resource package somehow seems to be a private port which is no longer maintained...
Try installing the angular-resource module
npm install angular-resource --save
and adapt your code as follows:
require('angular-resource');
angular.module('app.module', ['ngResource']);
Related
this sound like a simple question but i am a newbie with angular, basicly i want to use AngularFileUpload to upload images on my website, so i did this when i initialize my app:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
before i installed the angularFileUpload module trough npm, so my module is inside node_modules, but i get an error evertyme i start my app
error:
Failled to instantiate module due to:
'fn' is not a function, got string.
someone know what is happening?
That happens because you are injecting the modules in a wrong way.
You are inserting two arrays:
var app = angular.module('myApp',['ui.router'],['angularFileUpload']);
Instead you should insert just one array with all modules:
var app = angular.module('myApp',['ui.router','angularFileUpload']);
You should use bower instead of npm for loading your client side dependencies in AngularJs. There are following steps required to correctly load your module:
Download using following bower command
bower install angular-file-upload
Then include this library in the script tag, by providing correct location to minified js.
Last inject modules in correct way
var app = angular.module('myApp',['ui.router','angularFileUpload']);
And that's it. Please let me know if it helped you!
In Jhipster v3.9.1,
i tried add module to my projet, but i can't .
For example, i want to add this module http://hakib.github.io/MassAutocomplete/
so i run bower install angular-mass-autocomplete --save
after i run gulp inject:vendor and gulp inject:dep
So the index.html is refreshed now and the module is there 👍
So when i want to use it, i tried to add the .$inject=[] array , it didn't work, i tried use it next to module, it didn't work too ! .module('moduleName', ['mass-autocomplete'])
It gives me always this error :
angular.js:13920 Error: [$injector:unpr] Unknown provider: mass-autocompleteProvider <- mass-autocomplete <- ControllerName
Can't we use a bower module or NPM module ??
Thank you
The first javascript example on linked page shows the injection
var app = angular.module('app', ['ngSanitize', 'MassAutoComplete']);
when in your question you do it like
.module('moduleName', ['mass-autocomplete'])
change 'mass-autocomplete' to 'MassAutoComplete' and it should work - unless you didn't included the JS library in your output JS
Every time I try to inject a dependency, I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module marbleApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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 started with this, and my code ran fine:
var app = angular.module("marbleApp", []);
But then when I try to inject a dependency like this, I get the above error...
var app = angular.module("marbleApp", ["ngRoute"]);
Any thoughts on why this could be happening?
remember that you have to check two things when you want to inject some dependencies:
First:
var myModule = angular.module('myModule', [
'myDependency',
'mySecondDependency'
]);
Second:
myModule.config(['myDependency', 'mySecondDependency',
function(myDependency, mySecondDependency) {
//here you can use injected stuff
}
]);
Cheers!
Did you install angular-route, to start with?
$ bower install angular-route
If you want to update your bower.json, too:
$ bower install angular-route --save
More, as the comment from #ddepablo suggests, double check you have it added in your index.html file:
<script src="angular-route.js">
(see https://docs.angularjs.org/api/ngRoute)
I'm attempting to get a brand new Ionic project working with angular-local-storage with no luck. I'm somehow referencing angular-local-storage incorrectly, but I don't know how.
https://github.com/grevory/angular-local-storage
ionic start myApp tabs
cd myApp
ionic platform add ios
ionic build ios
bower install angular-local-storage
// app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'LocalStorageModule'])
Then
ionic serve
Error
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [$injector:nomod] Module 'LocalStorageModule' 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.
What simple thing am I missing?
I'm not familiar with ionic, but it looks to me like you're missing the script.
Are you sure that you have the script included on the page? I'd confirm that bower did indeed install the script where you think it should be and then make sure its actually referenced before this error is thrown.
Guy should need to check that have you added link to it's script
src="https://rawgit.com/grevory/angular-local-storage/master/dist/angular-local-storage.min.js"
using <script></script> tag in your index file. It might be the issue. For the guys who will see this in future.
I'm currently using the mean.io stack for a personal project and everything runs smoothly locally. I tried to deploy to Heroku and I'm having problems with one module not instantiating properly! I found similar questions here on Stack Overflow, but none of the answers worked for me.
Here's my error:
Error: [$injector:modulerr] Failed to instantiate module mean due to:
[$injector:modulerr] Failed to instantiate module angularFileUpload due to:
[$injector:nomod] Module 'angularFileUpload' 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. (dist.min.js)
It seems like my module is not loading. But according to the logs, it installed properly:
mean#0.3.3 postinstall /tmp/build_5d155aeb-14b5-4414-af19-986a68df3b19
node node_modules/bower/bin/bower install
bower ng-file-upload-shim#* not-cached git://github.com/danialfarid/angular-file-upload-shim-bower.git#*
bower ng-file-upload-shim#* resolve git://github.com/danialfarid/angular-file-upload-shim-bower.git#*
bower angular#* not-cached git://github.com/angular/bower-angular.git#*
bower angular#* resolve git://github.com/angular/bower-angular.git#*
...
bower ng-file-upload#* not-cached git://github.com/danialfarid/angular-file->upload-bower.git#*
bower ng-file-upload#* resolve git://github.com/danialfarid/angular-file->upload-bower.git#*
...
bower ng-file-upload-shim#* install ng-file-upload-shim#1.4.0
bower ng-file-upload#* install ng-file-upload#1.4.0
...
bower angular#1.2.19 install angular#1.2.19
...
Done, without errors.
Note: angularFileUpload by Danial Farid requires that the shim.js file is loaded before angular, which in turn gets loaded before angularFileUpload. Seems like angular got installed afterwards, would that be a problem?
Here's my module, where I declare dependency:
angular.module('mean.thingy', ['angularFileUpload','ngAnimate']).controller(...
and finally, my assets.json:
"js": {
"public/build/js/dist.min.js": [
"public/system/lib/jquery/dist/jquery.min.js",
"public/system/lib/angular-file-upload-master/dist/angular-file-upload-shim.js",
"public/system/lib/angular/angular.js",
...
"public/system/lib/angular-file-upload-master/dist/angular-file-upload.js",
"public/init.js",
"public/*/*.js",
"public/*/{controllers,routes,services}/*.js"
]
}
I'd appreciate any help or hunches that you may have! Thanks!
I got the same error and it got fixed by adding the file path to karma.conf.js
I had this same problem, I am using mean.js rather that mean.io so might be slightly different.
You were on the right track when you asked "Seems like angular got installed afterwards, would that be a problem?" I believe so.
To fix this, make sure that in your production.js config you put the scripts in the right order as well as in all.js e.g.
'public/lib/ng-file-upload/FileAPI.min.js',
'public/lib/ng-file-upload/angular-file-upload-shim.min.js',
'public/lib/angular/angular.js',
'public/lib/ng-file-upload/angular-file-upload.min.js',
Change your upload dependency declaration to:
angular.module('mean.thingy', ['ngFileUpload','ngAnimate'])...
In my case it was because my local copies of angular-file-upload-shim.min.js and angular-file-upload.min.js were corrupted (I did not fetch them using bower).
Try downloading the raw .js files from the author's github page: https://github.com/danialfarid/angular-file-upload/tree/master/dist , click on the file, click on "Raw", then point your JS file to the local copies of these files.