Angularjs: [$injector:modulerr] Failed to instantiate module ui-router

Question

I'm a relative newbie in Angular and after following the tutorial I now want to build something from scratch on my own. So I'm trying to set up a basic app in which I want to use the $stateProvider (since I read that it is better than the $routeProvider). So this is my html:

<html ng-app="formApp">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/app.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>

and my app.js looks like this:

'use strict';

var formApp = angular.module('formApp', ['ui-router']);

formApp.config(function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('main', {
            url: '/main',
            templateUrl: 'templates/main.html',
            controller: 'MainCtrl'
        });

    $urlRouterProvider.otherwise('/main')
});

But I get a massive error in the console, saying:

Error: [$injector:modulerr] Failed to instantiate module formApp due to:
[$injector:modulerr] Failed to instantiate module ui-router due to:
[$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.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=ui-router
minErr/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:68:12
etc. etc.

I understand that 'ui-router' in my app declaration is obviously wrong, but without it I get the even bigger error below.

Any idea how I can solve this? All tips are welcome!

Error: [$injector:modulerr] Failed to instantiate module formApp due to:
[$injector:unpr] Unknown provider: $stateProvider
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=%24stateProvider
minErr/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:68:12
createInjector/providerCache.$injector<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:4262:19
getService@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:4409:39
invoke@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:4441:1
runInvokeQueue@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:4356:11
loadModules/<@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:4365:11
forEach@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:336:11
loadModules@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:4346:5
createInjector@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:4272:11
bootstrap/doBootstrap@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:1630:20
bootstrap@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:1651:1
angularInit@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:1545:5
@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:28359:5
trigger@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:2996:7
createEventHandler/eventHandler@https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js:3271:9

http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=formApp&p1=%5B%24injector%3Aunpr%5D%20Unknown%20provider%3A%20%24stateProvider%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Funpr%3Fp0%3D%2524stateProvider%0AminErr%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A68%3A12%0AcreateInjector%2FproviderCache.%24injector%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4262%3A19%0AgetService%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4409%3A39%0Ainvoke%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4441%3A1%0ArunInvokeQueue%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4356%3A11%0AloadModules%2F%3C%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4365%3A11%0AforEach%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A336%3A11%0AloadModules%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4346%3A5%0AcreateInjector%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A4272%3A11%0Abootstrap%2FdoBootstrap%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1630%3A20%0Abootstrap%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1651%3A1%0AangularInit%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A1545%3A5%0A%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A28359%3A5%0Atrigger%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A2996%3A7%0AcreateEventHandler%2FeventHandler%40https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.4.3%2Fangular.js%3A3271%3A9%0A

may be you are missing to add ui-router js file to project.. — Shubham Nigam
– Shubham Nigam, Commented Jul 29, 2015 at 7:13

exiadbq · Accepted Answer · 2017-06-17 02:55:12Z

12

You are trying to use $stateProvider and $urlRouterProvider which are coming from "ui.router", and you didn't inject the dependency "ui.router".

var formApp = angular.module('formApp', ['ui.router']);

That's the error you got, please have a read of https://docs.angularjs.org/guide/di .

edited Jun 17, 2017 at 2:55

answered Jul 29, 2015 at 7:22

exiadbq

1,6392 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2136053 Over a year ago

does not help .

exiadbq Over a year ago

@ritesh angular.module('formApp', ['ui.router']); now?

user2136053 Over a year ago

Thanks exiadbq for the help.

SSG Over a year ago

Not a helpful answer... Please put some code or point to specific location in the existing code. Author has already made changes according to your suggestion, so you need to respond on that as well.

Stephane Janicaud · Accepted Answer · 2017-04-11 08:38:12Z

6

You've got this error because you're injecting ui-router instead of ui.router

Replace this line in your code :

var formApp = angular.module('formApp', ['ui-router']);

With this one :

var formApp = angular.module('formApp', ['ui.router']);

And this will work flawlessly

This is a common mistake with this library as its name is ui-router but you have to inject ui.router instead ;)

answered Apr 11, 2017 at 8:38

Stephane Janicaud

3,7051 gold badge16 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angularjs: [$injector:modulerr] Failed to instantiate module ui-router

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related