Внедрение зависимости в приложении AngularJS приводит к ошибке $ injector: modulerr - PullRequest
Новая
       23

Внедрение зависимости в приложении AngularJS приводит к ошибке $ injector: modulerr

0 голосов
/ 13 января 2019

Я пытаюсь внедрить зависимость в очень простое веб-приложение AngularJ, 

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>

но я получаю эту ошибку - любая помощь приветствуется.

введите описание изображения здесь

Ответы [ 2 ]

0 голосов
/ 13 января 2019

Вы получите гораздо лучшие сообщения об ошибках, если будете использовать незавершенные версии библиотек.

Использование: 

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

Тогда ваше сообщение об ошибке будет:

Uncaught Ошибка: [$ injector: modulerr] Не удалось создать экземпляр приложения модуля из-за:

Ошибка: [$ инжектор: modulerr] Не удалось создать экземпляр модуля ui-router из-за:

Ошибка: [$ инжектор: nomod] Модуль 'ui-router' недоступен! Вы либо неправильно написали имя модуля, либо забыли загрузить его. При регистрации модуля убедитесь, что в качестве второго аргумента указаны зависимости. 

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)

Ошибка становится очевидной, используйте ui.router вместо 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']);

См. Справочник по AngularJS Error - $ инжектор modulerr

0 голосов
/ 13 января 2019

Имя модуля для маршрутизатора пользовательского интерфейса: 'ui.router', а не 'ui-router'.

Попробуйте изменить код на: 

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