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'
});
}]);
Related
I am trying to inject a dependency in a very basic AngularJs web app,
var app = angular.module('app', ['ui-router']);
app.config(['$stateProvider','$controllerProvider', ($stateProvider, $controllerProvider) => {
$controllerProvider.allowGlobals();
$stateProvider.state('firstMessage', {
url: '/first-msg',
template: '<strong>hi this is irst msg</strong>'
});
}]);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Grid-Pract</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="./app.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.21/angular-ui-router.min.js"></script>
</head>
<body ng-app="app">
first
<div ui-view></div>
</body>
</html>
but I'm getting an this error - any help is appreciated.
enter image description here
The module name for ui router is 'ui.router', not 'ui-router'.
Try changing your code to:
var app = angular.module('app', ['ui.router']);
You will get much better error messages if you use the unminified versions of the libraries.
Use:
https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js
https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.21 /angular-ui-router.js
Then your error message will be:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module ui-router due to:
Error: [$injector:nomod] Module 'ui-router' 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.
https://errors.angularjs.org/1.7.5/$injector/modulerr?p0=app&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20ui-router%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'ui-router'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0A%0Ahttps%3A%2F%2Ferrors.angularjs.org%2F1.7.5%2F%24injector%2Fmodulerr%3Fp0%3Dui-router%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'ui-router'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttps%253A%252F%252Ferrors.angularjs.org%252F1.7.5%252F%2524injector%252Fnomod%253Fp0%253Dui-router%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A138%253A12%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2290%253A17%250A%2520%2520%2520%2520at%2520ensure%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2211%253A38)%250A%2520%2520%2520%2520at%2520module%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A2288%253A14)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5017%253A22%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A387%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5001%253A5)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5019%253A40%250A%2520%2520%2520%2520at%2520forEach%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A387%253A20)%250A%2520%2520%2520%2520at%2520loadModules%2520(https%253A%252F%252Fcdnjs.cloudflare.com%252Fajax%252Flibs%252Fangular.js%252F1.7.5%252Fangular.js%253A5001%253A5)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A138%3A12%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5041%3A15%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5001%3A5)%0A%20%20%20%20at%20https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5019%3A40%0A%20%20%20%20at%20forEach%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A387%3A20)%0A%20%20%20%20at%20loadModules%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A5001%3A5)%0A%20%20%20%20at%20createInjector%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A4918%3A19)%0A%20%20%20%20at%20doBootstrap%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A1942%3A20)%0A%20%20%20%20at%20bootstrap%20(https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.7.5%2Fangular.js%3A1963%3A12)
at angular.js:138
at angular.js:5041
at forEach (angular.js:387)
at loadModules (angular.js:5001)
at createInjector (angular.js:4918)
at doBootstrap (angular.js:1942)
at bootstrap (angular.js:1963)
at angularInit (angular.js:1848)
at angular.js:36216
at HTMLDocument.trigger (angular.js:3501)
The error becomes obvious, use ui.router instead of ui-router.
̶v̶a̶r̶ ̶a̶p̶p̶ ̶=̶ ̶a̶n̶g̶u̶l̶a̶r̶.̶m̶o̶d̶u̶l̶e̶(̶'̶a̶p̶p̶'̶,̶ ̶[̶'̶u̶i̶-̶r̶o̶u̶t̶e̶r̶'̶]̶)̶;̶
var app = angular.module('app', ['ui.router']);
See AngularJS Error Reference - $injector modulerr
I have a SPA based AngularJS which contains several components as follow:
app
|_components
|_home
|_home.component.js
|_home.html
...
|_app.js
|_app.config.js
|_app.module.js
|_app.routes.js
|_app.run.js
index.html
app.js
(function() {
'use strict';
angular.module('myApp').controller('appCtrl', AppController);
function AppController() {
// code here
}
})();
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorem ipsum</title>
<!-- inject:css -->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
</head>
<body ng-app="myApp" ng-controller="appCtrl as vm" ng-strict-di>
<app-home></app-home>
<!-- ... -->
</body>
</html>
home.component.js
(function() {
'use strict';
angular.module('myApp').component('appHome', {
templateUrl: 'components/home/home.html',
controller: HomeCtrl,
controllerAs: 'vm',
bindings: {}
});
function HomeCtrl() {
// code here
}
})();
home.html
<div>
<h3>Lorem Ipsum</h3>
</div>
With usage of Gulp all scripts will be packed into single js file (libraries into another js file) and then it will be injected into index.html. The script will be packed in the following order: app.module.js, app.js, app.routes.js, app.config.js, app.run.js
Running of the app throws following errors in browser console:
Error: [$controller:ctrlreg] The controller with the name 'appCtrl' is not registered.
and
Error: [$compile:tpload] Failed to load template: components/home/home.html (HTTP status: 404 Not Found)
I checked my codes several times (typo etc.) but I could not find where exactly I am doing wrong. So, any help would be appreciated.
Hello I have few questions with using components in state. So i have tried doing ui-routing using templates and it works fine. but instead when i try to route it to a component, i get this error.
in my app.js
angular.module('app', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/home',
component: 'home'
});
}]);
and in my index.html
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script>
<script src="Content/lib/angularjs/Chart.js"></script>
<script src="Content/lib/angularjs/angular-chart.js"></script>
<script src="Content/app/components/home.js"></script>
<script src="Content/app/app.js"></script>
<link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="Content/lib/bootstrap/bootstrap.css">
<link rel="stylesheet" href="Content/app/components/redditAnalyzer.css">
</head>
<body>
<a ui-sref="home">click me</a>
<div ui-view></div>
</body>
</html>
and in my home.html
<body>
"some stuffs"
</body>
and in my home.js
angular.module('app', ['chart.js'])
.component('home', {
templateUrl: 'Content/app/components/home.html',
bindings: {},
controller: ['$http',
function ($http) {
var vm = this;
"some more stuffs"
}]
});
but when i click on click me in my index.html, i get this error
Error: [$injector:unpr] http://errors.angularjs.org/1.6.6/$injector/unpr?p0=homeDirectiveProvider%20%3C-%20homeDirective
at angular.js:88
at angular.js:4826
at Object.d [as get] (angular.js:4981)
at angular.js:4831
at Object.d [as get] (angular.js:4981)
at getComponentBindings (angular-ui-router.js:sourcemap:8144)
at TemplateFactory.makeComponentTemplate (angular-ui-router.js:sourcemap:8135)
at Ng1ViewConfig.getTemplate (angular-ui-router.js:sourcemap:7938)
at Object.<anonymous> (angular-ui-router.js:sourcemap:9719)
at angular.js:1385 "<div ui-view="" class="ng-scope">"
what am i doing wrong?
thank you!
You are registering the module named "app" twice. A second module with same name will overwrite the first
Only use the dependency injection array on one of them when they have the same name. When there is no dependency array argument it acts as a getter not setter
Change:
// register new module with dependencies
angular.module('app', ['ui.router']).config...
// register new module with dependencies ... but will overwrite the first due to same name
angular.module('app', ['chart.js']).component...
To:
// register new module with dependencies
angular.module('app', ['ui.router','chart.js']).config...
// references an existing module to add component to
angular.module('app').component...
Also switch order of <script> so the module exists before you try to add component to it
<!-- Module created in this file -->
<script src="Content/app/app.js"></script>
<!-- subsequent files can then access existing module -->
<script src="Content/app/components/home.js"></script>
I have installed phantomjs (coz i'm trying to get the system to make my website in angular crawlable), and i'm stuck on a "nomod" error which occurs only on phantomjs server (the live version works perfectly fine).
<html lang="{{lang}}" itemscope itemtype="http://schema.org/WebPage" ng-app="myApp" class="no-js">
<base href="/">
<head>
<meta name="fragment" content="!">
</head>
<body>
....
<!-- build:js(.) scripts/vendor.js -->
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
........
<!-- endbower -->
<script></script>
....
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
loading controllers
....
<!-- endbuild -->
</body>
</html>
For the app.js
'use strict';
angular
.module('myApp', [
'ngAnimate',
'ngAria',
....
])
.filter()....
.config(function ($routeProvider, $stateProvider, $urlRouterProvider, $authProvider, UIRouterMetatagsProvider) {....})
.config(function($locationProvider) {
// use the HTML5 History API
$locationProvider.html5Mode(true);
requireBase: false;
$locationProvider.hashPrefix('!')
});
When i access from phantomjs ng-app is called before myApp being initialized and i tried to start the app with manual bootstrapping without success.
If i try to load the controllers without calling ng-app I still get the error because myApp module is somehow created after all controllers have been loaded.
Hope someone can help...
Thank you very much.
I was also getting the nomod error. In my case it was because my controller had the "const" declaration in it.
Changing "const" to "var" resolved the problem.
My error was:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myAppName&p1=[$injector:nomod] http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myAppName
Here is a related post explaining the problem with PhantomJS (via Karma) and "const".
https://github.com/karma-runner/karma/issues/1621
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