I have the following HTML:
<!DOCTYPE html>
<html lang="en" >
<head>
<title>Title</title>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
Hello World
</body>
</html>
and is giving me the following exception:
0x800a139e - JavaScript runtime error: [$injector:nomod]
http://errors.angularjs.org/1.2.26/$injector/nomod?p0=ngLocale
If I switch to the non-minified angular.js, the error goes away
It is hard to say without looking at your javascript file.
Usually the problem is that angular's dependency system uses function arguments with the default syntax.
for example:
app.controller('mainController', function($scope) {
$scope.data= 'data';
});
becomes:
app.controller("mainController",function(e){e.data="data"});
In order to avoid this situations you have to use the following syntax
app.controller('mainController', ['$scope', function($scope) {
$scope.data= 'data!';
}]);
So the minification script will not change the dependencies name.
You can read more at https://docs.angularjs.org/tutorial/step_05 scroll down to A note on minification
Related
The following angular piece doesn't work, it seems that in the immediately invoked function the code breaks where I create my module because angular syntax is not recognised.
<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<script data-require="angular.js#*" data-semver="4.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2.min.js"></script>
</head>
<body ng-controller="MyCtrller">
<h1>Hello!</h1>
{{ cousin }}
</body>
</html>
<script type="text/javascript">
(function() {
var app = angular.module("MyModule", []);
var MyCtrller = function($scope) ///typo here in "MyCtrller"
{
$scope.cousin = "Karen";
}
app.controller("MyCtrller", ["$scope", MyCtrller]);
}());
</script>
I expect the result to be Karen.
Instead, I see {{ cousin }}
The error I get in console is:
Uncaught ReferenceError: angular is not defined
on the line where I create my module:
var app = angular.module("MyModule", []);
Your problem is that you are including the v2.0 version of angular (a.k.a. Angular), instead of 1.x version (a.k.a. AngularJS) while using the latter syntax. :)
Simply change your script to use the correct version and you should be good to go.
https://angularjs.org/
Just use the AngularJs script instead of Angular Script in your script like this
<script src="https://code.angularjs.org/1.6.7/angular.js"></script>
When I try to run angular code , it always gives this generic error message though it is nor problem with module api or name. For example, in this case, I put name value pairs separated in object with semi colon in config method. After changing to comma, it is fine now. But it does not tell exact cause is in config not in module name. How do I find exact cause?
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.
It's a common error. It occurs when the ng-app name declared in your template differs from the one used in your script, for example :
index.html
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body>
</body>
</html>
script.js
angular.module('app', []);
angular.module('myApp') // <-- ERROR OCCURS HERE, it should be 'app'
.controller('ExampleController', ['$scope', '$http', function($scope, $http) {
// controller code here
}]);
I am making a simple program in Angular.js to print a name. Alas, still it shows an error.
HTML:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.0/angular2.min.js"></script>
<script src="angularScript.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
{{name}}
</body>
</html>
AngularScript.js
// Defining Module
var app = angular.module('myApp',[]);
// Defining Controller
app.controller('myCtrl', function ($scope) {
$scope.name = "Peter";
});
Error:
-> Uncaught ReferenceError: System is not defined
-> Uncaught ReferenceError: angular is not defined
Can someone help me out, with where is the problem?
Use the correct version of AngularJS script file.
You are writing AngularJS script of 1.4 but including 2.0.
Just replace your script tag with:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
We're trying to get Angular set up for a fairly simple project using Gulp, but we're somehow failing at the first hurdle. Here's what we have set up, more or less:
index.html:
<!doctype html>
<html ng-app="testModule">
<head>
<meta charset="utf-8">
<title>Test Module</title>
<meta name="description" content="">
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<div ng-view></div>
<!-- inject:js -->
<script src="/angular-route.js"></script>
<script src="/angular.js"></script>
<!-- endinject -->
<!-- inject:bundle:js -->
<script src="/bundle.js"></script>
<!-- endinject -->
</body>
</html>
bundle.js:
// A bunch of stuff inserted by Gulp.
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
'use strict';
var angular;
(function () {
angular.module('testModule', ['ngRoute']);
angular.module('testModule').config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo', {
template: '<p>Hi.</p>'
}).otherwise({
redirectTo: '/foo'
});
}]);
})();
},{}]},{},[1])
//# sourceMappingURL=bundle.js.map
This seems simple enough to be foolproof, yet here are the errors we're getting:
angular-route.js:24: Uncaught TypeError: Cannot read property 'module' of undefined
bundle.js:8: Uncaught TypeError: Cannot read property 'module' of undefined
angular.js:4458: Uncaught Error: [$injector:modulerr] Failed to instantiate module testModule due to:
Error: [$injector:nomod] Module 'testModule' 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.
It almost seems like the browser doesn't know angular exists when processing angular-route and bundle, and only figures it out later. How can we get the browser to detect the presence of angular earlier so everything works?
You don't need to initialize the variable angular manually.
Here's a plunker, and you'll note we're brought right to the view for /foo: http://plnkr.co/edit/dxo3ZUJIWLeFw9HXF80w?p=info
angular.module('testModule', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/foo', {
template: '<p>Hi.</p>'
}).otherwise({
redirectTo: '/foo'
});
}]);
I've read through the other related threads on the subject and tried their recommended solutions but I can't figure it out. As far as I can tell, ngRoute is being correctly linked to the project via the tag and then injected as a dependency. I've tried many different things (like using ui-router instead) and nothing seems to be working. Any help would be much appreciated!
The full error reads:
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24stateProvider
at REGEX_STRING_REGEXP (http://localhost:8000/static/bower_components/angular/angular.js:68:12)
at http://localhost:8000/static/bower_components/angular/angular.js:4284:19
at getService (http://localhost:8000/static/bower_components/angular/angular.js:4432:39)
at Object.invoke (http://localhost:8000/static/bower_components/angular/angular.js:4464:13)
at runInvokeQueue (http://localhost:8000/static/bower_components/angular/angular.js:4379:35)
at http://localhost:8000/static/bower_components/angular/angular.js:4388:11
at forEach (http://localhost:8000/static/bower_components/angular/angular.js:336:20)
at loadModules (http://localhost:8000/static/bower_components/angular/angular.js:4369:5)
at createInjector (http://localhost:8000/static/bower_components/angular/angular.js:4294:11)
at doBootstrap (http://localhost:8000/static/bower_components/angular/angular.js:1655:20)
http://errors.angularjs.org/1.4.5/$injector/modulerr?p0=myApp&p1=Error%3A%2…host%3A8000%2Fstatic%2Fbower_components%2Fangular%2Fangular.js%3A1655%3A20)
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body ng-app="myApp">
<div ng-controller="MainCtrl">
{{ test }}
</div>
<script src="static/bower_components/angular/angular.js"></script>
<script src="static/bower_components/angular-route/angular-route.min.js"></script>
<script src="static/components/app.js"></script>
</body>
</html>
app.js:
'use strict';
function() {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
It's not a routing problem. You have missing parenthesis in your app.js, your code should be like this.
'use strict';
(function () {
angular.module('myApp', ['ngRoute'])
.controller('MainCtrl', function ($scope) {
$scope.test = 'hello world';
});
})();
I think that ngRoute (angular-route.js) uses the provider $routeProvider, and ui-router (angular-ui-router.js) uses the provider $stateProvider.
Check out this answer.
What is the difference between angular-route and angular-ui-router?
If this is the case.
Solution 1. change the script from angular-route.js to angular-ui-router.js
Solution 2. change the provider to $routeProvider
Hope it helps
If all the above answers fail, Just try this one.
I think the problem is with the included script...
Solution 1: Copy the angular.min.js as well as angular-route.min.js to the current folder and include it as
<script src="angular.min.js"></script>
If it doesn't work,
Solution 2:
Try adding the above script, on your head tag just after the end of the title tag.