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.
Related
I'm developing a web app with angular-meteor (Angular1). This uses webpack as a module bundler. Ever since I started I have found it impossible to inject npm/bower modules to my app module.
I constantly get errors such as:
Error: [$injector:nomod] Module xxx 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 usually follow official docs which consist of:
Downloading the npm module
Including the scripts in my index.html
Adding the module to my app module
But this always gives the error above.
I then try different techniques such as importing the module at the top of the page using:
import exampleModule from 'angular-example-module';
and adding exampleModule to my list of modules but nothing seems to work.
I used angular without webpack before and never had this problem. Am I missing something? Is there a particular procedure I don't know about?
Found the answer in case anyone else had the same question.
You must import the module in the main javascript file like so:
import moduleVariable from '<path-to-module>';
and then include the moduleVariable in the dependencies of your application module.
I'm currently in the process of migrating an AngularJS (1.5.8) from a Gulp pipeline to a webpack pipeline.
One of the dependencies we have is angular-permission.
We're relying on the commonjs style (require) and as documented here I added a require('angular-permission') before the declaration of my angular module.
I also added the angular dependencies permission and permission.ui right after ui.router.
The bundling process goes through, however every time we try to load the app we have this error message in the console: Unknown provider: PermissionStoreProvider <- PermissionStore(…)
I guess the problem is because angular-permission is not injecting the services properly but even playing with the require statement, adding provide plugin or few other attempts didn't solve the issue.
So the question is: how can I properly integrate angular-permission with webpack?
Finally found out what it was with the help of a friend. During my transition from bower to npm for client side deps I unintentionally changed the version of angular permission to the latest. And they changed the name of the service to PermPermissionStore (same thing for Role Store)
Related: https://github.com/Narzerus/angular-permission/issues/310
I have used velocity.js in my own personal web sites but never within an angular application. I'm not an angular developer (yet) so please bear with me.
I am following the README file on the angular-velocity github page. But when I run my application, I am getting an error that I am missing the module.
Here is what my module declaration looks like:
var appModule = angular.module('app.module', ['module-one', 'module-two', 'angular-velocity']);
...
The error I get now is:
Module 'angular-velocity' is not available! You either misspelled the module name or forgot to load it.
Further reading I see this:
When installing from npm, it is assumed that VelocityJS will be installed and loaded before Angular Velocity.
Ok, so I installed (via npm) the velocity library. How do I include that in my list of dependancies?
Also this:
angular-velocity assumes that the Angular core and the additional ngAnimate module is loaded
So does that mean I need something like this?
var appModule = angular.module('app.module', ['module-one', 'module-two', 'ngAnimate', 'angular-velocity']);
But in the example, all that is listed is angular-velocity.
Nowhere in my project do I see individual script tags. I am assuming the project just reads the dependancies and grabs them from the package.json file? (Completely guessing).
This does not happen:
<script src="bower_components/velocity/velocity.min.js"></script>
<script src="bower_components/velocity/velocity.ui.min.js"></script
<script src="bower_components/angular-velocity/angular-velocity.min.js"></script>
Thank you for any suggestions!
You can include velocity using CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.3/velocity.min.js"></script>
or using bower
bower install velocity
and add its references in the header from default folder bower_components.
If instead you use npm you can use:
npm install velocity-animate
and add its references in the header from default folder node_modules.
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']);
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.