代码之家  ›  专栏  ›  技术社区  ›  Jhonycage

获取错误:$injector:moduler添加角度引导灯箱依赖项时模块错误

angular-module twitter-bootstrap angularjs
  •  0
  • Jhonycage  · 技术社区  · 8 年前

    我试图为这个项目添加一个依赖项,它是angularjs的一个简单的画廊灯箱。

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

    我遵循这些步骤,尝试使用npm,最后将文件复制到根项目的一个文件夹中。

    我使用的是索引。加载一些css和项目脚本的html,我正在使用该文件加载lightbox的文件。

    指数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>

    到目前为止,没有在模块中包含依赖项,该项目在控制台中加载良好,没有问题。但添加依赖项时失败:

    主要的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 回复  |  直到 8 年前
        1
  •  0
  •   Sajeetharan    8 年前

    我看不出你的DI和代码有任何问题。

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

    <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>

    DEMO

    推荐文章
    learner  ·  如果超出限制,AngularJS ui select multiple应显示警报
    4 年前
    Onyx  ·  外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?
    4 年前
    Michlut  ·  Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送
    4 年前
    jieunbi  ·  按日期排序数组(最新优先)
    4 年前
    StackoverflowNinja  ·  当数字框的值在AngularJS中更改时更改下拉列表的值
    4 年前
    Stradosphere  ·  如何防止ng bind html添加结束标记?
    8 年前
    Celestialchippy  ·  如果事情是真的,如何创建一个“<a>”链接?
    8 年前
    a4aravind  ·  Angulari如何使用java驱动程序访问元素?
    8 年前
    Nicoleta Wilskon  ·  DecodeURIComponent不支持%uxxx编码的组件
    8 年前
    Nishant Florentin  ·  在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?
    8 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号