Injecting dependency in AngularJS app gets $injector:modulerr error

Question

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">
    <a href="#/first-msg">first</a>
    <div ui-view></div>
</body>

</html>

but I'm getting an this error - any help is appreciated.

enter image description here

It is unclear what you are asking ...

dmcgrandle
– dmcgrandle

2019-01-13 06:02:08 +00:00
Commented Jan 13, 2019 at 6:02 — dmcgrandle
– dmcgrandle, Commented Jan 13, 2019 at 6:02

Andrew Lahikainen · Accepted Answer · 2019-01-13 05:20:03Z

1

The module name for ui router is 'ui.router', not 'ui-router'.

Try changing your code to:

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

answered Jan 13, 2019 at 5:20

Andrew Lahikainen

3701 silver badge9 bronze badges

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

Comments

georgeawg · Accepted Answer · 2019-01-13 07:39:05Z

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

thanks for the tip next time i will consider non minified version for devlopment..

Collectives™ on Stack Overflow

Injecting dependency in AngularJS app gets $injector:modulerr error

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related