2016-11-08 2 views
2

angular-cli로 만든 내 angular2 앱에서 일부 jQuery 플러그인을 사용하려고합니다.Angular-cli 및 jQuery 플러그인

doc에서 설명한대로 npm과 사용 가능한 유형을 사용할 때 필요한 라이브러리를 설치했습니다. 그런 다음 angular-cli.json에 스타일과 스크립트를 추가했으며 크롬 디버거를 열면 라이브러리가 올바르게로드되었음을 알 수 있습니다.

문제는 모든 jQuery 플러그인을 사용하려고 할 때마다 항상 "메소드가 함수가 아닙니다"라는 콘솔에 js 오류가 발생한다는 것입니다.

저는 jQuery와 fullcalendar를 사용하여 작은 예제를 만들었으며이 GitHub 레포에서 포크 가능합니다.

https://github.com/vmilitello/jquery-plugin

: 문제는 ($("#myItem").fullcalendar() 또는 $(".foo").steps() 등)을 실행하는 선택이 필요 JQuery와 플러그인으로 존재한다. Sweetalert와 같은 라이브러리를 사용하는 경우 문제가 나타나지 않습니다.

나는 뭔가를 놓치고 있다고 확신하지만, 실제로 무엇인지 알아낼 수 없다!

감사합니다.

npm install @types/jquery --save-dev 

을 (당신은하지 않았다 경우)

답변

1

당신은 당신의 플러그인 수동 입력의를 작성해야합니다 설치합니다. 없이 하나 개의 작은 세부 사항 외에

"typeRoots": [ 
    "../node_modules/@types", 
    "../custom_typings" 
] 
+0

제 문제는 유형과 관련이 없습니다. 타이프 스크립트 파일을 쓰는 동안 jQuery 선택기를 캐스팅하지 말라고 제안하는 것. 기본적으로 ( $ ("# calendar")). fullcalendar(); 대신 $ ("# calendar"). fullcalendar();를 쓸 수 있습니다. 하지만 이것은 내 질문과 거의 관련이 없습니다. 이 솔루션이 작동하지 않는다는 것을 입증하기 위해 GitHub의 브랜치를 업데이트했습니다. 어쨌든 고맙습니다. – MilitelloVinx

+0

입력 파일의 이름을 index.d.ts가 아니고 index.ts가 아니고 jQuery 함수가 fullcalendar가 아닌 경우 fullCalendar이며 repo에서 시도한 결과 작동합니다. –

+0

감사합니다! 나는 실제로 낄낄 거려서 녀석들과 놀고 있었어. 우리도 그 문제를 발견했다. 지점을 업데이트 해 주셔서 감사합니다! 고맙습니다. 다른 사람을 도울 수 있기를 바란다. 감사! – MilitelloVinx

0

모든 올바른 tsconfig.json에서보다

interface JQuery { 
    fullCalendar(options?: any): JQuery; 
} 

: 같은 index.d.ts 뭔가에보다

/custom_typings 
/fullcalendar 
    /index.d.ts 

:

구조를 만듭니다 그것은 작동하지 않습니다. 으로는 마지막 부분에 here 언급, 그렇지 않으면 나를 위해 작동하지 않았다, 구성 요소

declare var $:any 

그런 다음 $ 글로벌되고 fullCalendar() 기능을 볼 수에 있어야합니다.

관련 문제