Uncaught Error: [$injector:modulerr] in angular js - angularjs

I am getting error Uncaught Error: [$injector:modulerr]
I have included below js files
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="lib/jquery-1.12.1.min.js"></script>
and my js code is
angular.module('website',['ngRoute','ngResource']).
config(function($routerProvider){
$routerProvider.
when('/about',{template:'templates/about.html'}),
when('/careers',{template:'templates/careers.html'}),
when('/signup',{template:'templates/signup.html'}),
otherwise({redirectTo : '/home', template:'/home.html'})
})
function mainController($scope){
}
Somebody please help me, where i am missing.
EDITED:
Error log is
Failed to instantiate module website due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24ro...
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:40:307
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:38:308)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:39:64)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:279)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:403
at n (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:37:180)
at eb (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js:40:435

Working Plnkr
Change $routerProvider to $routeProvider. Replace , with . in config. For example:
when('/about',{template:'templates/about.html'}),
when('/careers',{template:'templates/careers.html'})
to
when('/about',{template:'templates/about.html'})
.when('/careers',{template:'templates/careers.html'})
Your JavaScript code should look like this:
var website = angular.module('website',['ngRoute','ngResource']);
website.config(function($routeProvider){
$routeProvider.
when('/about',{template:'templates/about.html'})
.when('/careers',{template:'templates/careers.html'})
.when('/signup',{template:'templates/signup.html'})
.otherwise({redirectTo : '/home', template:'/home.html'})
})
website.controller('mainController', function($scope){
});
For more information, please have a look at this example.
Hope that solve your problem.

Related

Routeprovider Angular JS Update

I have this piece of code from a mobile website that used to work perfectly.
document.addEventListener('deviceready', function() {
// launch
}, false);
var app = angular.module('app', []);
app.config(function($routeProvider){
$routeProvider
when('/home', {templateUrl: 'views/home.html'})
.when('/about', {templateUrl: 'views/about.html'})
.otherwhise({redirectTo: '/home'})
});
I updated to a newer version of angular, and I got a error.
I found out on other threads that ngRoute is now separate from angular.js so I've added it.
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
Now my error is :
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
I don't understand why $routeProvider is still unknow now that I've added the angular route script.
I tried couple fix that I've found here but can't make it work. Any ideas of what I missed ?
Thank you.
ngRoute is now separate from angular.js so to use it you have to inject it as a dependency, like this:
var app = angular.module('app', ['ngRoute']);
as for the following error
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to: Error: [$injector:unpr] Unknown provider: $routeProvider
Usually, this error appears when angular-route.js is not loaded for some reason.
The said project has mismatched versions for angular and its module, for example:
<script src="https://code.angularjs.org/1.4.0-beta.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
so Make these versions match. They should likely be .../1.6.4/angular.js and .../1.6.4/angular-route.js

Angular route implementation fails

trying to learn angluar route constructs but I fail on implementing ngRoute
The Definition of my app
var app= angular.module('app', ['ngMaterial', 'ngRoute']);
The configuration
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
My directive to use the router
app.directive("applicationDirective", function($router) {
return {
restrict : "E",
templateUrl: 'app/templates/application.html',
controller: 'applicationController'
};
});
And my implemention in HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
<script src="app/app.js"></script>
Seems to be OK; but Fails... With:
angular.js:14525 Error: [$injector:unpr] Unknown provider: $routerProvider <- $router <- applicationDirectiveDirective
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24routerProvider%20%3C-%20%24router%20%3C-%20applicationDirectiveDirective
at angular.js:66
at angular.js:4789
at Object.getService [as get] (angular.js:4944)
at angular.js:4794
at getService (angular.js:4944)
at injectionArgs (angular.js:4969)
at Object.invoke (angular.js:4995)
at angular.js:8110
at forEach (angular.js:403)
at Object.<anonymous> (angular.js:8108)
Has anybody got a hint how to solve it. ​
regards
n00n
You need to set routing in your config function. This directive is not needed and it doesn't work like this.
Check this out:
https://www.w3schools.com/angular/angular_routing.asp

Angular route error

i trying to do routing for two days but it i can't. I have reviewed the other questions on stackoverflow and i did everything they said in the answers but it wansn't.
I call route script in to index.php
<script src="js/angular-route.js"></script>
I wrote that code in to app.js;
var app = angular.module("app",['ngRoute']);
app.config(function($routeProvider){
$routeProvider.
when('/', {
templateUrl:'pages/home.php'
}).
when('/notificastions', {
templateUrl:'pages/notifications.php'
}).
when('/messages', {
templateUrl:'pages/messages.php'
}).
when('/search', {
templateUrl:'pages/search.php'
}).
otherwise({
rediectTo: '/'
})
})
I wrote that codes in to a page with i connect ng-include:
<div id="ifmenu">
<div class="ifmitem" href="#/home">Home</div>
<div class="ifmitem" href="#/notifications">Notifications</div>
<div class="ifmitem" href="#/messages">Messages</div>
</div>
<div ng-view></div>
But i get an error like this;
Uncaught Error: [$injector:unpr]
http://errors.angularjs.org/1.2.32/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route
at angular.min.js:6
at angular.min.js:36
at Object.c [as get] (angular.min.js:34)
at angular.min.js:36
at c (angular.min.js:34)
at Object.d [as invoke] (angular.min.js:35)
at angular.min.js:36
at Object.c [as get] (angular.min.js:34)
at instantiateRoute (angular-route.js:886)
at Object.d [as invoke] (angular.min.js:35)
How do i resolve this error?
I resolve 'Uncaught Error: [$injector:unpr]' error, but have exclamation mark beside hashtag. Like this: (localhost/app/#!). And none of link doesn't working except the otherwise function.
I called solution of this problem in internet and i saw that i need to attach and i added;
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
But none of them doesn't working this time. What should I do to solve this problem?
Your notifications spelling is wrong.see the routeProvider section
when('/notificastions', {
templateUrl:'pages/notifications.php'
})
notificastions should be notifications

Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService?

I'm testing an ionic app created using creator.
I put the following code in services.js.
angular.module('app.services', [])
.factory('BlankFactory', [function(){
}])
.factory('EventService', ['$resource', function ($resource) {
return $resource('https://.....net/api/events/:id');
}])
.service('BlankService', [function(){
}]);
And the following code in controllers.js.
angular.module('app.controllers', [])
......
.controller('nightlifeCtrl', function ($scope, EventService) {
$scope.events = EventsService.query({category: "Nightlife"});
})
Hoever I got the following error in js console?
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- EventService
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24resourceProvider%20%3C-%20%24resource%20%3C-%20EventService
at ionic.bundle.js:13380
at ionic.bundle.js:17574
at Object.getService [as get] (ionic.bundle.js:17721)
at ionic.bundle.js:17579
at getService (ionic.bundle.js:17721)
at Object.invoke (ionic.bundle.js:17753)
at Object.enforcedReturnValue [as $get] (ionic.bundle.js:17615)
at Object.invoke (ionic.bundle.js:17762)
at ionic.bundle.js:17580
at getService (ionic.bundle.js:17721)
I tried to add the dependency by angular.module('...', ['ngResource']) but it got the following error.
ionic.bundle.js:17697 Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module app.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module ngResource due to:
And I didn't find the file angular-resource.js in the js files. Should I avoid ngResource and use plain ajax call?
In index.html
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
Its not working because you have not loaded the angular-resource dependency. If you want to use an external module in angular, you need to load it as a dependency in your module definition by passing name of the module in the second array parameter to angular.module. In your case name of the module is ngResource. Load the script file for angular-resource.js and then add it as dependency as below:
angular.module('app.services', ['ngResource'])
Also I see that you have not loaded app.services as dependency in app.controller. You need to either load that dependency or load both these dependencies in your app definition module as:
angular.module('app', [
'app.services',
'app.controllers'
]);
Updated JSBIN with fix for console error
Your code also had one typo. You were referring to EventsService in your controller while the name was EventService. I have fixed that as well in the jsbin

routeProvider angularJS 1.3.x Error: $injector:modulerr

I am a bit issue with angularjs, this issue have taken many answer and but I can't resolve this issues in my case.
Here this is my import in html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular-resource.min.js"></script>
App.js
angular.module('ngApp',['ngRoute'])
.config(['$routeProvider'],
function($routeProvider){ // Error here !
}).controller('ngAppHome',function ($scope){
$scope.title = "";
});
Error (in chrome)
Failed to instantiate module ngApp due to:
Error: [ng:areq] http://errors.angularjs.org/1.3.16/ng/areq?p0=fn&p1=not%2...
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:6:417
at Sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:19:510)
at La (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:20:78)
at Function.bb.$$annotate (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:175:178)
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:36:147)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:34:498)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:35:117
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js:34:399
Thanks for your help
config() expects a single argument, not 2. Either it's the callback function itself, or it's an array containing provider names, followed by the callback function:
angular.module('ngApp',['ngRoute']).config(function($routeProvider){
...
})
or
angular.module('ngApp',['ngRoute']).config(['$routeProvider', function($routeProvider) {
...
}])
Given that your code won't resist to minification anyway, since you don't use the array syntax for your controller, I would use the first, simple one. Use ngAnnotate in your build to make your code minifiable.

Resources