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

So i was trying to implement lightbox2 in my Angular 4 App following this Documentation

First Step

npm i --save lightbox2

Second Step: Adding the css and js to my .angular-cli.json like so

  "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"
  ],

As you can see, the lightbox.js is listed after the jQuery one.

Third Step My test images look like this, where each one has it's own unique name as to not to group them together.

<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 produces no error messages so i imagine i did not mess up the third step. Still, when i click on an image i get directed to a separate tab while chrome logs

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)

I did find this question regarding a similar matter with angular 2 but it did not help me either.

Solution

Zahmoulovic's Answer did indeed work and it brought me to look for problems regarding angular-cli and jquery. As it turned out, switching from

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

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

was all it took.