I'm not using ngRoute or any Angular service that needs to be injected. And I'm injecting my own module and controller as, I think, needed. But still getting the following error in the console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.7/$injector/modulerr?p0=try&p1=Error%3A%20%…2015%2520experiments%2Fangulartrial%2Fjs%2Flib%2Fangular.min.js%3A21%3A163)
at angular.min.js:6
at angular.min.js:40
at r (angular.min.js:7)
at g (angular.min.js:39)
at db (angular.min.js:43)
at c (angular.min.js:20)
at Bc (angular.min.js:21)
at ge (angular.min.js:19)
at angular.min.js:315
at HTMLDocument.b (angular.min.js:189)
Code:
Index.html:
<html ng-app="try" lang="En">
<head>
<title>Learn Angular 1.5</title>
<!-- <script src="./js/lib/jquery-3.1.0.min.js" charset="utf-8"></script> -->
<script src='./js/lib/angular.min.js'></script>
<script src='app.js'></script>
<script src='./js/app/blog-list.module.js'></script>
<script src='./js/app/blog-list.component.js'></script>
</head>
<body>
<div class='' ng-controller = 'BlogListController'>
</div>
</body>
</html>
app.js:
angular.module ('try', ['blogList'])
//This works when I declare the controller right here
// .controller('BlogListController', function(){
// console.log("Hello");
// })
blog-list.module.js
'use strict';
//simply declare the module here
angular.module('blogList', [
//inject dependencies
'BlogListController'
]);
blog-list.component.js
//declare the controllers, components etc on the module here
angular.module('blogList')
.controller('BlogListController', function(){
console.log("Hello");
});
Issue is here BlogListController as a depdendency,
angular.module('blogList', [
//inject dependencies
'BlogListController'
]);
Change it as,
angular.module('blogList', []);
Remove the BlogListController from the dependencies
It's because you're HTML is not using the 'blogList' module. Change it to:
<html ng-app="blogList" lang="En">
...
</html>
Also you don't inject your 'BlogListController' when declaring the module. The array is meant for dependency injection of external modules that your newly created module would require to run
(ex: ngRoute is a popular module that doesn't come 'out of box' and has to be included via dependency injection)
Related
I have declared my module :
var module = angular.module("app", ["agGrid", "ngAnimate", "ngSanitize", "ui.bootstrap", "ngDialog"]);
Then my controller :
angular.module("app").controller("boxLadderCtrl", ["$scope", function ($scope) {
//stuff
}]);
The corresponding HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../Scripts/angular.js"></script>
<script src="../assets/controller/applicationModule.js"></script>
<script src="../assets/controller/Box_Ladder_controller.js"> </script>
<script src="../node_modules/ag-grid-2.2.0/dist/ag-grid.js"></script>
</head>
<body ng-app="app">
<div ng-controller="boxLadderCtrl">
</div>
</body>
</html>
I get the following error :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ngAnimate due to:
Error: [$injector:nomod] Module 'ngAnimate' 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 don't understand why, when my controller is loaded, it is asking for all the dependencies in my module to be included along with it. This is not the case for my other controllers :
angular.module("app").controller("modalCtrl", ["$scope", "shareDataService", "ngDialog", "getDataService", function ($scope, shareDataService, ngDialog, getDataService) {
//stuff
}]);
for example.
The problem controller represents a popup window, could this be the issue? Or have I missed something glaringly obvious?
You did not include the ng-animate lib (change X.Y.Z to the version you'd like to use).
<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js">
If you don't need it, just remove the "ngAnimate" from the module definition.
I have the following main.js that configures my requirejs framework:
require.config({
baseUrl: 'lib',
shim: {
angular: {
exports: 'angular',
deps: ['jquery']
}
}
});
require(['angular'], function (angular) {
console.log('Creating module');
angular.module('myApp', []);
console.log('Module created');
});
My index.html looks like the following:
<html data-ng-app="myApp">
<head>
<script data-main="main" src="lib/require.js" type="text/javascript"></script>
</head>
<body>
Hello, world!
</body>
</html>
RequireJS is loading my dependencies just fine:
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="./main.js">
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="lib/jquery.js">
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="angular" src="lib/angular.js">
The problem is that angular is throwing an error. These are my console logs:
> Creating module
> Module created
> Error: [$injector:modulerr] Failed to instantiate module myApp due to:
[$injector:nomod] Module 'myApp' 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.
Why is myApp not available and why is it being instantiated? Nowhere else in my code I am loading my created myApp module.
Nevertheless, it should not throw any error, as this error happens after my module has been created, so it should instantiate it just fine.
What may be going on here?
Please help to understand what is the problem. I'm very new to AngularJS and maybe I missed something.
Here is my simple HTML:
<!DOCTYPE html>
<html>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp">
</body>
</html>
JS
(function(){
var app = angular.module('myApp',[]);
});
and all time error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' 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 think you might want to call that immediate function:
(function(){
var app = angular.module('myApp',[]);
})();
Otherwise, the JavaScript inside is never run.
I'm getting that Uncaught Error: [$injector:modulerr] error related to 1.2 and needing ngRoute installed. I read about that here and found this stack answer here.
However I followed all the steps, and am still getting this error.
I downloaded angular-route.min.js and added angular.module('app', ['ngRoute']); to my app.js file and am still getting the error :(
Not sure what gives, here is my test link: http://bitalicious.co/angular/
HTML:
<html ng-app="store">
<div>
<p>{{"hello" + " you"}}</p>
</div>
<!-- JavaScript
================================================== -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/libs/angular.min.js"></script>
<script src="src/js/libs/angular-route.min.js"></script>
<script src="src/js/vendors/modernizr.min.js"></script>
<script src="src/js/vendors/bootstrap.min.js"></script>
<script src="src/js/modules/app.js"></script>
And my app.js:
$(document).ready(function () {
var app = angular.modules('store', ['']);
angular.module('app', ['ngRoute']);
});
Ok Update: I am using the Google hosted AngularJs instead of the files from AngularJS.org and I also remove document ready, I just have var app = angular.modules('store', []); in my app.js file. Now getting different errors:
Ok apparently you can't have an angular.module named 'store' for some strange reason.
Once I changed this:
var app = angular.modules('store', []);
<html ng-app="store">
To:
var app = angular.module('gemStore', []);
<html ng-app="gemStore">
Now everytthing works :(
I'll leave this unchecked to give time for someone to leave and answer and comment as to why this is the case.
The problem was caused by missing inclusion of ngRoute module. Since version 1.1.6 it's a separate part:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
var app = angular.module('myapp', ['ngRoute']);
This is getting reference from: AngularJS 1.2 $injector:modulerr David answer
I am trying to lazy load files by reading this POST.
But not able to implement it. I am getting a 'module error' Error in the firebug.
Here is my project structure:
root
|----app
|----script.js
|----app.js
|----appBootstrap.js
|----login
|----login.html
|----login.js
|----vendor
|----angular.min.js
|----angular-route.min.js
|----index.html
index.html code:
<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
</head>
<body ng-view="">
<!-- javascript files-->
<script type="text/javascript" rel="javascript" src="app/vendor/angular.min.js"></script>
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.min.js"></script>
<script type="text/javascript" rel="javascript" src="app/script.js"></script>
<script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script>
</body>
</html>
app.js code :
(function()
{
var myApp = angular.module('myApp',[]);
myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide)
{
myApp.controllerProvider = $controllerProvider;
myApp.compileProvider = $compileProvider;
myApp.routeProvider = $routeProvider;
myApp.filterProvider = $filterProvider;
myApp.provide = $provide;
$routeProvider.when('/', {templateUrl:'login/login.html', resolve:{ deps: function($q, $rootScope)
{
var deferred = $q.defer();
// Add dependencies here
var dependencies =
[
'login/login.js'
];
$script(dependencies, function()
{
// all dependencies have now been loaded by $script.js so resolve the promise
$rootScope.$apply(function()
{
deferred.resolve();
});
});
return deferred.promise;
}}});
});
})();
appBootstrap.js code:
$script(['app.js'], function()
{
angular.bootstrap(document, ['myApp'])
});
When I try to load the root folder in the browser, I get the following error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.13/$injector/modulerr?p0=myApp&p1=Error%3A%…calsearch_new%2Fbranches%2Fb1.0%2Fapp%2Fvendor%2Fangular.min.js%3A32%3A232)
Could someone please explain what am I doing wrong?
Update 1: As suggested by #kartikluke added the ngRoute file (angular-route.min.js) but still showing same error but twice now
Well I followed the link in the error
Module Error
error
Description
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.
Add ngRoute
Alright so it doesn't seem to be ngRoute.
If you are not sure which module is missing, use the not minified angular.js which gives a readable error message: "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."
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script type="text/javascript" rel="javascript" src="app/vendor/angular-route.js"></script>
<script type="text/javascript" rel="javascript" src="app/app.js"></script>
<script type="text/javascript" rel="javascript" src="app/script.js"></script>
<script type="text/javascript" rel="javascript" src="app/appBootstrap.js"></script>`
Alright I looked through your code and I found that after replacing with the unminified code and adding app.js to the scripts I found that the module $compileProvider was not injected.
myApp.config(function($routeProvider, $controllerProvider, $filterProvider, $provide, $compileProvider)
Pretty simple in the end. Use the cdn and the unminified code will give you the correct errors.