catch되지 않은 형식 오류 :..이 $의 lightbox.css를 (...) fadeIn는

그래서 내가이 Documentation

첫 번째 단계

npm i --save lightbox2

다음 내 코너 4 App에서 lightbox2을 구현하려고 한 함수가 아닙니다

두 번째 단계 : 당신이 볼 수 있듯이 그래서

"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 한 후 나열처럼 내 .angular - cli.json에 CSS와 JS를 추가.

세 번째 단계 내 테스트 이미지는 다음과 같습니다. 각 테스트 이미지는 각기 고유 한 이름으로되어있어 그룹화하지 않습니다.

<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는 오류 메시지를 생성하지 않으므로 세 번째 단계를 망쳐 놓지 않았습니다. 그럼에도 불구하고, 나는이 이미지를 클릭 할 때 나는 2 각도와 비슷한 문제에 관한이 question을 찾았어요

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)

크롬 로그 동안 별도의 탭으로 직접 얻을하지만 중 하나를 나에게 도움이되지 않았다.

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

그리고 jquery.slim.min.js는 각-cli.json에 가져 삭제 : ** head 태그 ** 내부에 index.html을이 추가

출처

2017-09-30 j4g0

Zahmoulovic의 답변이 실제로 작동했기 때문에 angle-cli 및 jquery와 관련된 문제를 찾아 왔습니다. 이

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

에

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

로 전환, 알고 보니 그것은했다 전부였다.

출처

2017-10-01 07:03:57 j4g0

보십시오. 분명히, jquery는 angular-cli.json에서 인식되지 않습니다. index.html에서 스크립트를 가져와야합니다.

샘플 프로젝트에서 시도한 결과 해당 가져 오기에서만 작동합니다.

편집

나는 j4g0 솔루션은 청소기라고 생각합니다. angular-cli.json 안에 스크립트와 CSS 가져 오기를 넣는 것이 더 좋습니다.

출처

2017-10-01 00:19:39 Zahmoulovic

catch되지 않은 형식 오류 :..이 $의 lightbox.css를 (...) fadeIn는

답변

관련 문제