Получение ошибки: $injector:modulerr Ошибка модуля при добавлении зависимости angular-bootstrap-lightbox

Я пытаюсь добавить зависимость для проекта, это простой лайтбокс галереи для angularjs.

https://github.com/compact/angular-bootstrap-lightbox

Я выполнил шаги, попытался использовать npm, в итоге я скопировал файлы в папку в корневом проекте.

Я использую index.html, который загружает некоторые css и скрипты проекта, я использую этот файл для загрузки файлов для лайтбокса.

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<meta charset="utf-8">
<!-- styles -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<!-- favicon -->
<link rel="shortcut icon" href="/R/favicon/favicon.ico">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../scripts/jquery.cycle2.min.js"></script>

    <!-- lightbox CSS -->
    <link rel="stylesheet" href="plugins/angular-lightbox/angular-bootstrap-lightbox.css">


 </head>

<body>

<div ng-view></div>

  <!-- scripts -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

  <script src="plugins/angular-lightbox/angular-bootstrap-lightbox.js"></script>

 <script src="./controllersJS/main.js"></script>
 <script src="./controllersJS/controllerTaniguchi.js"></script>
 <script src="./controllersJS/services.js"></script>
 <script src="./controllersJS/articleServices.js"></script>
 <script src="./controllersJS/actionServices.js"></script>
 <script src="./controllersJS/smoothScrollService.js"></script>

</body>

</html>

пока без включения зависимости в модуль проект загружается хорошо, в консоли проблем нет. Но при добавлении зависимости происходит сбой:

main.js

var myApp = angular.module('myApp', ['ngRoute','bootstrapLightbox']);

журнал ошибок консоли

jquery.min.js:2 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.6/$injector/modulerr?p0=myApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.6.6%2F%24injector%2Fmodulerr%3Fp0%3DbootstrapLightbox%26p1%3DError%253A%2520%255B%2524injector%253Amodulerr%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.6.6%252F%2524injector%252Fmodulerr%253Fp0%253Dui.bootstrap%2526p1%253DError%25253A%252520%25255B%252524injector%25253Anomod%25255D%252520http%25253A%25252F%25252Ferrors.angularjs.org%25252F1.6.6%25252F%252524injector%25252Fnomod%25253Fp0%25253Dui.bootstrap%25250A%252520%252520%252520%252520at%252520https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A7%25253A76%25250A%252520%252520%252520%252520at%252520https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A26%25253A408%25250A%252520%252520%252520%252520at%252520b%252520(https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A25%25253A439)%25250A%252520%252520%252520%252520at%252520https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A26%25253A182%25250A%252520%252520%252520%252520at%252520https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A42%25253A290%25250A%252520%252520%252520%252520at%252520p%252520(https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A8%25253A7)%25250A%252520%252520%252520%252520at%252520g%252520(https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A42%25253A138)%25250A%252520%252520%252520%252520at%252520https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A42%25253A322%25250A%252520%252520%252520%252520at%252520p%252520(https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A8%25253A7)%25250A%252520%252520%252520%252520at%252520g%252520(https%25253A%25252F%25252Fajax.googleapis.com%25252Fajax%25252Flibs%25252Fangularjs%25252F1.6.6%25252Fangular.min.js%25253A42%25253A138)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A7%253A76%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A43%253A70%250A%2520%2520%2520%2520at%2520p%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A42%253A138)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A42%253A322%250A%2520%2520%2520%2520at%2520p%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A42%253A138)%250A%2520%2520%2520%2520at%2520https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A42%253A322%250A%2520%2520%2520%2520at%2520p%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A8%253A7)%250A%2520%2520%2520%2520at%2520g%2520(https%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.6.6%252Fangular.min.js%253A42%253A138)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A7%3A76%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A43%3A70%0A%20%20%20%20at%20p%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A42%3A322%0A%20%20%20%20at%20p%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A8%3A7)%0A%20%20%20%20at%20g%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A42%3A138)%0A%20%20%20%20at%20hb%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A46%3A250)%0A%20%20%20%20at%20c%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A22%3A19)%0A%20%20%20%20at%20Uc%20(https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.6.6%2Fangular.min.js%3A22%3A332)
    at angular.js:88
    at angular.js:4957
    at p (angular.js:410)
    at g (angular.js:4917)
    at hb (angular.js:4839)
    at c (angular.js:1949)
    at Uc (angular.js:1970)
    at we (angular.js:1855)
    at HTMLDocument.<anonymous> (angular.js:33884)
    at j (jquery.min.js:2)

ссылка на ошибку angular -->

Я не могу найти, почему не внедряется модуль bootstraplightbox. Это должно быть связано с проблемой совместимости?

Я не вижу никакой ошибки в вашем DI и коде.


angularjs twitter-bootstrap angular-module
person Juanca    schedule 10.07.2018    source источник
comment
Потому что я пробовал так много вещей...   -  person Vikasdeep Singh    schedule 10.07.2018
comment
Удалите это, чтобы избежать путаницы   -  person Juanca    schedule 10.07.2018
comment
хорошо сделано я отредактировал   -  person Vikasdeep Singh    schedule 10.07.2018
comment
Могут быть некоторые проблемы с контроллером, который вы подключили к модулю. Нужно больше кода...   -  person Juanca    schedule 10.07.2018
comment
я понимаю это _1_   -  person Rakesh Burbure    schedule 10.07.2018

Ответы (1)


arrow_upward
0
arrow_downward

Это может быть связано с несоответствием версий angular и bootstrap, пожалуйста, обновите следующие скрипты,

ДЕМО

<script data-require="angular.js@*" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="angular-bootstrap-lightbox.js"></script>

Почему вы загружаете дважды, то есть 

<script data-require="angular.js@*" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
<script src="angular-bootstrap-lightbox.js"></script>
и _2_ и то же самое для CSS?

person Sajeetharan    schedule 10.07.2018
comment
в проекте я не вижу, чтобы он работал правильно в плункере - person Juanca; 10.07.2018
comment
можно ли воспроизвести в плункере - person Juanca; 10.07.2018
comment
ошибка angular - person Sajeetharan; 10.07.2018