Question

所以我试图在我的Angular 4 App中实现lightbox2 Documentation

第一步

npm i --save lightbox2

第二步：将css和js添加到我的.angular-cli.json中，如此

  "styles": [
    ...,
    "../node_modules/lightbox2/dist/css/lightbox.min.css",
    ...
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    ...
    "../node_modules/lightbox2/dist/js/lightbox.min.js"
  ],

如您所见，lightbox.js列在jQuery之后。

第三步我的测试图像看起来像这样，每个人都有自己独特的名称，不将它们组合在一起。

<a href="http://lorempixel.com/560/560/business/1" data-lightbox="image-1" data-title="My caption">
      <img src="http://lorempixel.com/600/600/business/1" class="img-fluid">
    </a>

npm start没有产生任何错误消息所以我想我没有弄乱第三步。不过，当我点击图像时，我会在Chrome日志时指向单独的标签

Uncaught TypeError：this。$ lightbox.css（...）。fadeIn不是一个函数在b.start（eval at webpackJsonp ... / .. / .. / .. / script-loader / addScript.js.module.exports（VM19984 scripts.bundle.js：60），：12：4058）在HTMLAnchorElement.eval（eval at webpackJsonp ... / .. / .. / .. / script-loader / addScript.js.module.exports（VM19984 scripts.bundle.js：60），：12：987）在HTMLBodyElement.dispatch（eval at webpackJsonp ... / .. / .. / .. / script-loader / addScript.js.module.exports（VM19984 scripts.bundle.js：60），：3：10551）在HTMLBodyElement.q.handle（eval at webpackJsonp ... / .. / .. / .. / script-loader / addScript.js.module.exports（VM19984 scripts.bundle.js：60），：3：8578）在ZoneDelegate.webpackJsonp ... / .. / .. / .. / zone.js / dist / zone.js.ZoneDelegate.invokeTask（VM19983 polyfills.bundle.js：2970）在Zone.webpackJsonp ... / .. / .. / .. / zone.js / dist / zone.js.Zone.runTask（VM19983 polyfills.bundle.js：2737）在ZoneTask.webpackJsonp ... / .. / .. / .. / zone.js / dist / zone.js.ZoneTask.invokeTask [as invoke]（VM19983 polyfills.bundle.js：3044）在invokeTask（VM19983 polyfills.bundle.js：4085）在HTMLBodyElement.globalZoneAwareCallback（VM19983 polyfills.bundle.js：4111）

我确实找到了question关于角度2的类似问题，但它也没有帮助我。

Answer 1

Zahmoulovic的答案确实有效，它让我去寻找有关角度cli和jquery的问题。事实证明，从

切换

verify_password

到

"../node_modules/jquery/dist/jquery.slim.min.js",

就这么做了。

Answer 2

尝试将此添加到** head tag **中的 index.html ：

 <script 
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
 </script>

并删除angular-cli.json中的jquery.slim.min.js导入。显然，你的angular-cli.json中没有识别jquery。您必须在index.html中导入脚本。

在示例项目中尝试，仅适用于该导入。

修改

我认为 j4g0 解决方案更清洁。最好将script和css导入到angular-cli.json
中

未捕获的TypeError：this。$ lightbox.css（...）。fadeIn不是函数

2 个答案: