I am biulding a MEAN application. I started from this template: https://github.com/linnovate/mean
I want to add a module (called cloudinary) so I followed this: http://cloudinary.com/documentation/node_integration#getting_started_guide
(ie: did a npm install and add the config in my server.js)
I also added this in my bower.json:
"dependencies": {
"cloudinary": "latest",
BTW, is this necessary? I did it to have access to cloudinary js file in my public/lib repo. Is this a good practice?
I am not sure, but anyway it did create a public/lib/cloudinary rep.
Then I added this in my app.js:
angular.module('mean.mycars', ['cloudinary']);
I fllowed this for direct html upload: http://cloudinary.com/documentation/node_image_upload#direct_uploading_from_the_browser
So I added this to my assets.json file (wich add it to all my pages in the footer:
"public/lib/cloudinary/js/jquery.min.js",
"public/lib/cloudinary/js/jquery.ui.widget.js",
"public/lib/cloudinary/js/jquery.iframe-transport.js",
"public/lib/cloudinary/js/jquery.fileupload.js",
"public/lib/cloudinary/js/jquery.cloudinary.js",
When I go to my app I get this js error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to:
Error: [$injector:modulerr] Failed to instantiate module mean.mycars due to:
Error: [$injector:modulerr] Failed to instantiate module cloudinary due to:
Error: [$injecto...<omitted>...1) angular.js:78
(anonymous function) angular.js:78
(anonymous function) angular.js:3745
forEach angular.js:323
loadModules angular.js:3711
createInjector angular.js:3651
doBootstrap angular.js:1379
bootstrap angular.js:1394
(anonymous function) init.js:8
trigger angular.js:2445
(anonymous function) angular.js:2716
forEach angular.js:330
eventHandler
I probably forgot to declare something somewhere, but don't know where too look...
If find the solution. The problem wad that I declared 'cloudinary' as an angular module here:
angular.module('mean.mycars', ['cloudinary']);
But it seems that it's not an angular module. So I put this:
angular.module('mean.mycars', ['']);
and the error disapears.
Now I am not sure how to use cloudinary in my app, to upload an image via brower. It looks a bit complicated.
I know this response is several months removed from your original question, but maybe it can help someone else if you've already found a solution.
I am currently working through getting Cloudinary to work in my Angular.js application as well. From what I can tell, you will need to inject 'cloudinary' as a module in your application in order for it to work.
There are two Cloudinary libs that you will need to include, and load order is important. It looks like you're already including 'jquery.cloudinary.js'; you will also need to include 'angular.cloudinary.js' (found here). Make sure that 'jquery.cloudinary.js' is called before 'angular.js', and that 'angular.cloudinary.js' is called after 'angular.js'. The cloudinary_angular project has a helpful example on Github.
Related
I am enough familiar with Javascript as I use it in ajax for PHP but new to AngularJS.
During my first angularJs assignment from "tutorialspoint" I got following error in console:
Error: [$injector:modulerr]
http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=mainApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.14%2F%24injector%2Fnomod%3Fp0%3DmainApp%0AM%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A6%3A417%0AOd%2F%3C%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A412%0Aa%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A53%0AOd%2F%3C%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A21%3A1%0Ag%2F%3C%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A35%3A46%0As%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A7%3A300%0Ag%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A34%3A399%0Aab%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A38%3A135%0Atc%2Fd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381%0Atc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A18%3A179%0AJd%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A1%0A%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A249%3A428%0Aa%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A163%3A399%0Alf%2Fc%40https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A32%3A384%0A
Which is not readable at all.
I tried try{} catch(){} but, didn't work.
I couldn't use alert() as angularJS doesn't execute in line.
So I checked line by line and I found out that I had written:
var firstApp = angular.module("mainAp", []);
where I had misspelled data-ng-app which should have been mainApp.
But I couldn't have figured it out if there was 300 lines of code.
so, I wanted to know if there is any simple way to show error very specifically like in php.
"[...] which is not readable at all."
You are using the minified angular.min.js version of Angular. That is a good thing for production (as the file is really smaller), but you can use angular.js during development if you want more readable errors.
To illustrate, this is what you get with the minified version:
Error: $injector:modulerr Module Error Failed to instantiate module
mainApp due to: Error: [$injector:modulerr]
http://errors.angularjs.org/1.4.7/$injector/modulerr?p0=e...)
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:6:416
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:38:184
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:7:322)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:275)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:444
at m (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:7:322)
at h (http://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js:37:275)
...
And with the unminified version:
Error: $injector:nomod
Module Unavailable
Module 'ui.bootstrap' 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.
Examples source
This question already has answers here:
Angularjs minify best practice
(7 answers)
Closed 6 years ago.
I have a webapp that I'm developing that uses a front-end of HTML + Javascript (Angular 1.5.0) + CSS. The website performs fine when I run it on my localhost. I have an /index.html file. This file imports my javascript code like this: <script src="/app/app.js"></script>
But now I have just implemented automated linting, uglifying etc. using Grunt. Grunt very nicely converts my single Javascript file (/app/app.cs) to a minnified one (/dist/js/app.min.js). I changed my /index.html to include the minnified Javascript instead: <script src="/dist/js/app.min.js"></script>. But now the application stops working. And in the Browser's dev console, I see the following error:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: a
http://errors.angularjs.org/1.5.0/$injector/unpr?p0=a
at http://127.0.0.1:8080/bower_components/angular/angular.js:68:12
at http://127.0.0.1:8080/bower_components/angular/angular.js:4397:19
at getService (http://127.0.0.1:8080/bower_components/angular/angular.js:4550:39)
at injectionArgs (http://127.0.0.1:8080/bower_components/angular/angular.js:4574:58)
at Object.invoke (http://127.0.0.1:8080/bower_components/angular/angular.js:4596:18)
at runInvokeQueue (http://127.0.0.1:8080/bower_components/angular/angular.js:4497:35)
at http://127.0.0.1:8080/bower_components/angular/angular.js:4506:11
at forEach (http://127.0.0.1:8080/bower_components/angular/angular.js:321:20)
at loadModules (http://127.0.0.1:8080/bower_components/angular/angular.js:4487:5)
at createInjector (http://127.0.0.1:8080/bower_components/angular/angular.js:4409:19)
http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=raptorApp&p1=Error%…F%2F127.0.0.1%3A8080%2Fbower_components%2Fangular%2Fangular.js%3A4409%3A19)
Why will the normal Javascript file work fine, but the one minified by Grunt won't? How can I fix it?
Your angular component is being minified and there is no way to know what service to inject. You should decorate your controllers and other pieces to allow Angular to work properly. Read up on it here: Angularjs minify best practice
I am trying to get started with a smart-table. I am following the instructions available here: http://lorenzofox3.github.io/smart-table-website/
So according to those instructions all I need to do is run, bower install angular-smart-table and then add then add the module angular.module('myApp',['smart-table'] to your angular application. Here's my angular application:
# pwd
/var/www/html
# cat meanVoyApp.js
var app = angular.module("meanVoyApp", ['smart-table']);
But now when I load my markup I get these errors in my browsers console:
Uncaught Error: [$injector:modulerr] Failed to instantiate module meanVoyApp due to:
Error: [$injector:modulerr] Failed to instantiate module smart-table due to:
Error: [$injector:nomod] Module 'smart-table' 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.14/$injector/nomod?p0=smart-table
I didn't misspell so I guess I "forgot" to load it. So how do I load it? How can I tell if it is already loaded and something else is the problem?
Thanks!
Did you remember to add a reference to the script in your index.html?
<script src="[directoryOfModule]/smart-table.js"></script>
Smart-table comes with some js file. I think you are not loading that before to your meanVoyApp.js load. Use chrome developer tool network panel to identify the java-script are properly loaded nor not.
Use the following code before your app.js load
<script src="http://lorenzofox3.github.io/smart-table-website/bower_components/angular-smart-table/dist/smart-table.js"></script>
Use
bower install angular-smart-table --save
and some good gulp or grunt build tool configuration (e.g. yeoman) will automatically add it to your index.html.
Take a look at your build process.
In case you use ngBoilerplate kickstarter, you need to add the following line:
'vendor/angular-smart-table/dist/smart-table.min.js'
inside vendor_files section of build.config.js file.
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>
I encountered the following error with a root cause of Module 'ngRoute' is not available
Uncaught Error: [$injector:modulerr] Failed to instantiate module
Amail 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."
Javascript code :
var amailServices = angular.module('Amail',['ngRoute']);
function emailRouteConfig($routeProvider) {
$routeProvider.
when('/', {
controller: ListController,
templateUrl : 'list.html'}).
when('/view/:id',{
controller : DetailsController,
templateUrl:'detail.html'}).
otherwise({
redirectTo:'/'
});
}
amailServices.config(emailRouteConfig);
How to fix this
You need to include angular-route.js in your HTML:
<script src="angular-route.js">
http://docs.angularjs.org/api/ngRoute
Or the minified version of the file...
<script src="angular-route.min.js"></script>
More information about this here:
"This error occurs when a module fails to load due to some exception. The error message above should provide additional context."
"In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute."
Listed under section Error: $injector:modulerr Module Error in the Angularjs docs.
For me the solution was fixing a syntax error:
removing a unwanted semi colon in the angular.module function
I got this error due to not pointing the script to the correct path. So make absolutely sure that you are pointing to the correct path in you html file.
For me the error occurred due to my browser using a cached version of the js file containing the module. Clearing the cache and reloading the page solved the problem.
Such error happens when,
1. You misspell module name which you injected.
2. If you missed to include js file of that module.
Sometimes people write js file name instead of the module name which we are injecting.
In these cases what happens is angular tries to look for the module provided in the square bracket []. If it doesn't find the module, it throws error.