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.
Related
How to right add angular-file-saver in AngularJS project?
I trying to implement: angular-file-saver (FileSaver.js version for Angularjs) But it's not working.
1) installing filesaver file upload via bower with the command:
bower install angular-file-saver --save
2) I am trying to addition FileSaver.js module in app.js , but in browser console after starting have error:
window.mmvvtApp = angular.module('mmvvt', ['ngBootstrap', 'ngFileSaver',...
Failed to instantiate module mmvvt due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=...)
If i remove the 'ngFileSaver' from function then I am not facing the issue but when I put it in the function legislator and try to call it I get the issue.
May be non compatible versions: AngularJS#1.2.26 and angular-file-saver#1.1.3 don’t work together ?
Can someone help me please?
Thank you.
Earned after include in file "WEB-INF/jsp/main.jsp" next code:
<script src="bower_components/angular-file-saver/dist/angular-file-saver.bundle.js"></script>
AngularJS#1.2.26 and angular-file-saver#1.1.3 work together correctly.
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
I am attempting to load breeze using browserify. I used npm to install the breeze-client library. If I run browserify without including breeze everything runs fine, but when I include breeze I get the following error:
Error: Cannot find module 'breeze' from 'C:\...\node_modules\breeze-client'
I've tried doing the require every way I can think of
require("breeze-client");
require("breeze-client/breeze.debug");
require("breeze-client/breeze.debug.js");
require("../node_modules/breeze-client");
// etc...
Only thing I can think of now is that there is an issue with the module that's causing a problem with browserify.
Does anyone know of a change that can be made to the module to get this to work or is there some setting in browserify that I need to use?
Complete error message when trying to run browserify directly on the breeze module:
C:\...>browserify "node_modules/breeze-client" -o "scripts/dist/breeze.js"
Error: Cannot find module 'breeze' from 'C:\...\node_modules\breeze-client'
at C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:46:17
at process (C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:173:43)
at ondir (C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:188:17)
at load (C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:69:43)
at onex (C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:92:31)
at C:\...\node_modules\browserify\node_modules\resolve\lib\async.js:22:47
at FSReqWrap.oncomplete (fs.js:95:15)
need to make sure all references to require("breeze") were updated to require("breeze-client") inside the breeze.debug.js file as well as any adapters you might include from the build/adapters directory.
There is a pull-request in to fix this so hopefully it won't be a problem in future versions.
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.
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.