Uncaught Typeerror:.. Das $ lightbox.css (...) fadeIn ist keine Funktion

Question

So versuche ich Lightbox2 in meinem Eckige 4 App im Anschluss an diesem Documentation

Ersten Schritt

npm i --save lightbox2 

zu implementieren

Zweiter Schritt: Hinzufügen des CSS und JS meiner .angular-cli.json wie 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" 
    ], 

wie Sie die lightbox.js sehen können, nach dem jQuery ein aufgeführt ist.

Dritter Schritt Meine Testbilder sehen so aus, dass jeder seinen eigenen eindeutigen Namen hat, um sie nicht zu gruppieren.

<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 produziert keine fehlermeldungen, also stelle ich mir vor, ich habe den dritten schritt nicht vermasselt. Dennoch, wenn ich auf ein Bild klicken i auf einer separaten Registerkarte während Chrom Protokolle gerichtet bekommen

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)

ich diesen question in Bezug auf eine ähnliche Sache mit Winkel 2 fanden, aber es hat mir nicht geholfen.

Answer 1

Zahmoulovic Antwort- funktioniert hat in der Tat zu setzen und es brachte mich für Probleme Winkel-cli und jquery in Bezug auf suchen. Wie sich herausstellte, von

Schalt

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

zu

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

alle war es dauerte.

Answer 2

versuchen, dies zu Ihrer index.html Hinzufügen innen ** head-Tag **:

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

und löschen Sie die jquery.slim.min.js in Winkel cli.json importieren. Offenbar jquery ist in Ihrem Winkel cli.json nicht erkannt. Sie müssen das Skript in index.html importieren.

in einem Beispielprojekt versucht und funktioniert nur mit dem Import.

EDIT

Ich denke j4g0 Lösung ein sauberer ist. Es ist besser, Skript und CSS-Importe innerhalb Winkel cli.json