我正在尝试为该项目添加依赖项,是一个用于 AngularJS 的简单画廊灯箱。
我按照步骤操作,尝试使用 npm,最终将文件复制到根项目中的文件夹中。
我正在使用加载一些CSS和项目脚本的index.html,我正在使用该文件加载灯箱的文件。
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)
链接到角度误差 -->
我找不到为什么不注入 bootstraplightbox 模块。这一定是兼容性问题吗?
我没有发现您的 DI 和代码有任何问题。
可能是由于 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>