获取错误：$ injector：modulerr添加angular-bootstrap-lightbox依赖项时模块错误

时间：2018-07-10 01:43:59

标签： angularjs twitter-bootstrap angular-module

我正在尝试为项目添加一个依赖项，它是一个用于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 error

我找不到为什么不注入bootstraplightbox模块的原因。这一定有兼容性问题吗？

1 个答案:

答案 0 :(得分：0)

我看不到您的DI和代码有任何错误。

这可能是由于角度版本和引导版本不匹配所致，请更新以下脚本，

async myAsyncFunction() {
    do {
      const parcialList = await this.getMyDataPart(i);
      list = list.concat(parcialList);
      i++;             
   } while(cool);
}   

getMyData(idofPackege: number): Observable<DataObject> {
   return this.http.get<DataObject>(this.apiURL + idofPackege);
}

DEMO

相关问题
最新问题