Uncaught TypeError: this.$lightbox.css(...).fadeIn is not a function

Question

所以我试图在我的 Angular 4 应用程序中实现 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 is not a function at b.start (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (VM19984 scripts.bundle.js:60), :12:4058) at HTMLAnchorElement.eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (VM19984 scripts.bundle.js:60), :12:987) at HTMLBodyElement.dispatch (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (VM19984 scripts.bundle.js:60), :3:10551) at HTMLBodyElement.q.handle (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (VM19984 scripts.bundle.js:60), :3:8578) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (VM19983 polyfills.bundle.js:2970) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (VM19983 polyfills.bundle.js:2737) at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (VM19983 polyfills.bundle.js:3044) at invokeTask (VM19983 polyfills.bundle.js:4085) at HTMLBodyElement.globalZoneAwareCallback (VM19983 polyfills.bundle.js:4111)

我确实找到了这个关于 angular 2 的类似问题，但它也没有帮助我。

Answer 1

尝试将此添加到您的 index.html 内 ** head 标签**：

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

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

中导入脚本

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

编辑

我认为 j4g0 解决方案更清洁。最好将脚本和 css 导入放在 angular-cli.json

中

Answer 2

Zahmoulovic 的回答确实有效，它让我寻找有关 angular-cli 和 jquery 的问题。事实证明，从

切换

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

至

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

就这样了。

Uncaught TypeError: this.$lightbox.css(...).fadeIn is not a function

Uncaught TypeError: this.$lightbox.css(...).fadeIn is not a function

lightbox2

fadein

angular