Angular app fails to instastiate due to Error: [$injector:modulerr] - javascript

I am currently working in setting up the structure for an angular app and can't get around this error. Below is the complete error message:
Failed to instantiate module app due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.3/$injector/modulerr?p0=a...)
at Error (native)
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:6:416
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:40:60
at q (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:7:355)
at g (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:135)
at http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:304
at q (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:7:355)
at g (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:39:135)
at eb (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:43:164)
at c (http://127.0.0.1:8080/assets/libs/angular/angular.min.js:20:463
My setup is as follows:
index.html
<body ng-app="app">
<header>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
</div>
<footer>
</footer>
<script type="text/javascript" src="assets/libs/angular/angular.min.js"></script>
<script type="text/javascript" src="assets/libs/angular-route/angular-route.min.js"></script>
<!-- Modules -->
<script type="text/javascript" src="app/app.routes.js"></script>
<script type="text/javascript" src="app/app.core.js"></script>
<script type="text/javascript" src="app/app.module.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="app/components/homepage/homepageController.js"></script>
app.module.js
angular.module('app', [
'ngRoute',
'app.routes',
'app.core'
]);
app.routes.js
angular
.module('app.routes', ['ngRoutes'])
.config(function($routeProvider) {
$routeProvider
//root route
.when('/', {
templateUrl: 'app/components/homepage/homepageView.html',
controller: 'homepageCtrl'
});
});
app.core.js
angular
.module('app.core', []);
I'm using core for all the controllers, but the issue seems to be with what I am loading in app.module.js...
Can anyone give an idea of what's going wrong?
Here is a plunkr
https://plnkr.co/edit/Uv5fEvVZzmWguu32t4a9

The correct name for ['ngRoutes'] should be ['ngRoute'].
Updated Plunker: https://plnkr.co/edit/8W7QFndiTvtqfHCy6UWt?p=preview

Related

ui-router - ui view and link not working

I'm trying out ui-router for angular. I added this line of code to my app module in my app.js:
angular
.module("ngClassifieds", ['ngMaterial', 'ui.router'])
.config(function($mdThemingProvider, $stateProvider){
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
$stateProvider
.state('stateone', {
url:'/stateone',
template: '<h1>State one</h1>'
})
.state('statetwo', {
url: '/statetwo',
template: '<h1>State two</h1>'
});
});
On my html I just put an empty ui-view to test whether or not i'm getting those two headers but with no luck:
<ui-view></ui-view>
Testing it out on my localhost link by putting in:
localhost:8080/#/stateone
localhost:8080/#/statetwo
But for some reasons it's not loading/showing any of the headers on any of those links but just showing my page without the headers.
I have already included angular-ui-router.js into my index.html
If anyone could point out what I did wrong, that would great.
In case anyone is wondering : this is the order of my scripts:
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="scripts/app.js"></script>
<script src="components/classifieds.ctr.js"></script>
<script src="components/classifieds.fac.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
Since you did not get any error it is difficult to understand what went wrong but you can have a look at my plunkr and figure it out. I removed angular-material.
https://plnkr.co/edit/WGjzY6flSx5Ces1moSPk?p=preview
<script>
angular
.module("ngClassifieds", ['ui.router'])
.config(function( $stateProvider){
$stateProvider
.state('stateone', {
url:'/stateone',
template: '<h1>State one</h1>'
})
.state('statetwo', {
url: '/statetwo',
template: '<h1>State two</h1>'
});
});
</script>
</head>
<body>
<h1>Hello Plunker!</h1>
Link1
Link2
<ui-view></ui-view>
</body>

using ngRoute breaks any controller-driven page

I have an application that uses a Router to load pages across a shared template, and other pages that are organized by Controllers, Services, and templates that run within the context of those controllers. It's a simple process to get the various entries of the Controllers and application to run within the same context, but when I have a set of ngRoute defined rules in place, the router stops working.
The routes I have in place are set in js/core/app.js and look like this:
var app = angular.module('ApplicationSystem', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: 'js/login/templates/login.html',
controller: 'LoginController'
})
.when('/application', {
templateUrl: 'js/application/templates/application.html',
controller: 'ApplicationController'
})
.otherwise({
redirectTo: '/login'
});
}
]);
And as an example, the Login application itself does not load. Only a blank page loads. The Actual application in reference is loaded via an ng-controller directive (ng-app is used in the parent template).
<div class="container" ng-controller="LoginController">
<h2>Login</h2>
<!-- Contents -->
</div>
The parent template (index.html by reference)
<!doctype html>
<html>
<head>
<title>Application</title>
<script type="text/javascript" src="settings.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-animate/angular-animate.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="lib/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="lib/angular-ui-grid/ui-grid.min.js"></script>
<script type="text/javascript" src="lib/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="lib/ng-file-upload/ng-file-upload.min.js"></script>
<script type="text/javascript" src="lib/spin.js/spin.min.js"></script>
<script type="text/javascript" src="js/core/app.js"></script>
<script type="text/javascript" src="js/login/LoginController.js"></script>
</head>
<body>
<div class="masterwrapper" ng-app="ApplicationSystem">
<div ng-view></div>
</div>
</body>
</html>
And the aforementioned controller
var app = angular.module('ApplicationSystem', []);
app.controller('LoginController', function ($scope, $cookies, $location, $ngStorage) {
console.log("Init LoginController");
$scope.LogIn = function (username, password) {
//Login service and factory calls here
};
});
I'm not really clear on what the culprit could be here. If I can get the template to render again, that would at least get me back on track. Any suggestions?

Error: [$injector:unpr] Unknown provider: $stateProvider?

I'm trying to build a single page blogging site using AngularJS and I have encountered the following error message:
"Uncaught Error: [$injector:modulerr] Failed to instantiate module spBlogger due to:
Error: [$injector:modulerr] Failed to instantiate module spBlogger.posts due to:
Error: [$injector:unpr] Unknown provider: $stateProvider"
I'm not sure why this is happening although the $stateProvider service is already injected. Can you please help me identify why I'm getting this error message?
postModule.js contents:
'use strict'
angular.module('spBlogger.posts', ['spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
angular.module('spBlogger.posts')
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
$stateProvider.state('allPosts', {
url: '/posts',
templateUrl: 'modules/posts/views/posts.html',
controller: 'PostController'
});
$stateProvider.state('singlePost', {
url: '/posts/:id/:permalink',
templateUrl: 'modules/posts/views/singlePost.html',
controller: 'PostDetailsController'
});
}]);
index.html contents:
<!doctype html>
<html lang="en" ng-app="spBlogger">
<head>
<meta charset="utf-8">
<base href="/">
<title>The Single Page Blogger</title>
<link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="modules/posts/css/posts.css">
</head>
<body>
<div class="container">
<br/>
<div class="jumbotron text-center">
<h1>The Single Page Blogger</h1>
<p>One stop blogging solution</p>
</div>
<div ui-view> The angular ui-view should be displayed here!</div>
<div class="row footer">
<div class="col-xs-12 text-center">
<p>The Single Page Blogger
<app-version/>
</p>
</div>
</div>
</div>
</body>
<!-- build:js app/built/app.min.js -->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-cookies.js"></script>
<script src="lib/angular/angular-translate.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>
<script src="modules/posts/postModule.js"></script>
<script src="modules/posts/js/controllers.js"></script>
<script src="modules/posts/js/filters.js"></script>
<script src="modules/posts/js/directives.js"></script>
<script src="modules/posts/js/services.js"></script>
<!-- endbuild -->
</html>
This is the app.js
'use strict'
angular.module('spBlogger', ['ui.router', 'spBlogger.posts', 'spBlogger.controllers', 'spBlogger.directives', 'spBlogger.filters', 'spBlogger.services']);
angular.module('spBlogger').value('version', 'V1.0');
angular.module('spBlogger').run(['state', function (state) {
$state.go('allPosts');
}]);
controllers.js
'use strict'
angular.module('spBlogger.posts.controllers', [])
.controller('PostController', ['$scope', 'postService', function ($scope, postService) {
$scope.getAllPosts = function () {
return postService.getAll();
};
$scope.posts = $scope.getAllPosts();
}])
.controller('PostDetailsConstroller', ['$stateParams', '$state', '$scope', 'postService', function ($stateParams, $state, $scope, postService) {
$scope.getPostById = function (id) {
return postService.getPostById(id);
};
$scope.closePost = function () {
$state.go('allPosts');
};
$scope.singlePost = $scope.getPostById($stateParams.id);
}])
;
You missed to add a dependency to ui.router in your application module:
angular.module('spBlogger.posts', ['ui.router', 'spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);
Angular UI Router isn't part of official Angular's distribution but it's an optional module developed by a third-party dev team.

ng-app making the script run to infinity

I'm working on an angular application using asp.net web application empty template and i have a problem with using ng-app, when i use it and lave it blank i the $routeProvider doesn't get instantiated, but when i specify ng-app="myApp" to my module name, the content of the body starts to repeat to infinite loop.
I'm sure i'm missing something basic, but this problem is driving me crazy
thanks
here's my html code
this is main
view1
<div>
<div ng-view></div>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
and here's myApp code
(function () {
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config([
'$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'index.html',
controller: 'main'
}).when('/view1', {
templateUrl: 'view1.html',
controller: 'main'
}).otherwise({
redirectTo: '/'
});
}
]);
app.controller('main', function ($scope) {
setTimeout(function() {
alert("from set");
},10000);
});
})();
the problem here is that index.html is not the template that should be loaded into the ng-app, it is the outer shell page. You are loading the entire app inside itself over and over, producing something like the following:
view1
<div>
view1
<div>
view1
<div>
view1
<div>
//... more and more loaded here
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
</div>
<script src="Scripts/angular.js"></script>
<script src="Scripts/angular-route.js"></script>
<script src="app.js"></script>
... essentially forever.
You should instead be loading only templates in your routes.
Is your default route loading the page into itself?
$routeProvider.when('/', {
templateUrl: 'index.html', <----- ???
controller: 'main'
})

AngularJS : Uncaught Error: [$injector:modulerr] when using updated version of angularJS

I used older version of angularJS (1.1.4) for my test project (I want to learn angularJS). When I change angularJS script version to latest I got this error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.8/$injector/modulerr?p0=contactsManager&p1=…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.8%2Fangular.min.js%3A38%3A435)
I don't know what is causing this error... Does someone knows where's the problem?
UPDATE:
After removing .min from angularJS.js I got cleaner error message so here is it:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=%24routeProvide
Here is code:
JS:
//application.js
var app = angular.module('contactsManager', []);
app.config(function ($routeProvider) {
$routeProvider
.when('/contacts',
{
controller: 'ContactsController',
templateUrl: './application/templates/contacts.html'
})
.when('/add-contact',
{
controller: 'ContactAddController',
templateUrl: './application/templates/addContact.html'
})
.when('/edit-contact/:contactId',
{
controller: 'ContactEditController',
templateUrl: './application/templates/editContact.html'
})
.when('/display-contact/:contactId',
{
controller: 'ContactDetailsController',
templateUrl: './application/templates/displayContact.html'
})
.otherwise({ redirectTo: '/contacts' });
});
HTML:
<!DOCTYPE html>
<html data-ng-app="contactsManager">
<head>
<title>Contacts</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-top">
<div class="navbar-inner">
<div class="container">
<h2>Contacts</h2>
</div>
</div>
</div>
<div ng-view class="example-animate-container"
ng-animate="{enter: 'example-enter', leave: 'example-leave'}"></div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-resource.min.js"></script>
<script src="application/application.js"></script>
<script src="application/controllers/controllers.js"></script>
<script src="application/services/contactsService.js"></script>
</body>
</html>
Newer versions of Angular have ngRoute as a separate module that you have to include in your project.
<script src="//code.angularjs.org/X.Y.Z/angular-route.js"></script>
https://docs.angularjs.org/api/ngRoute
And update your app initialization with an injection of ngRoute
var app = angular.module('contactsManager', ["ngRoute"]);

Categories