Uncaught TypeError:.. Ce lightbox.css de $ (...) fadeIn est pas une fonction

Question

donc je tente de mettre en œuvre lightbox2 dans mon angulaire 4 App suite à cette Documentation

Première étape

npm i --save lightbox2 

Deuxième étape: Ajout de la comme vous pouvez le voir et js css à mon .angular-cli.json comme si

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

, les lightbox.js est répertorié après une jQuery.

Troisième étape Mes images de test ressemblent à ceci, où chacune a son propre nom unique pour ne pas les regrouper. Npm start ne produit aucun message d'erreur, donc j'imagine que je n'ai pas gâché la troisième étape. Pourtant, quand je clique sur une image que je reçois dirigé vers un onglet séparé tandis que les journaux de 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)

Je ne trouve cette question au sujet d'une affaire similaire avec angulaire 2, mais il ne m'a pas aidé non plus.

Answer 1

La réponse de Zahmoulovic a effectivement fonctionné et m'a amené à chercher des problèmes concernant angular-cli et jquery. En fin de compte, le passage de

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

à

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

était tout ce qu'il fallait.

Answer 2

Essayez d'ajouter ceci à votre index.html intérieur ** balise head **:

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

et supprimer les jquery.slim.min.js importer en cli.json angulaire. Apparemment, jquery n'est pas reconnu dans votre angular-cli.json. Vous devez importer le script dans index.html.

Essayé dans un exemple de projet et ne fonctionne qu'avec cette importation.

EDIT

Je pense que solution j4g0 est un nettoyant. Il est préférable de mettre les scripts et les importations css à l'intérieur de angular-cli.json