2017-12-30 21 views
1

Popper.Js의 기능이 필요한 교육 프로젝트를 시작하려고합니다. 그러나 포퍼를 사용하기 시작한 것 같지 않습니다 .Js.Angular 5 + Popper.JS

는 부트 스트랩의 문서에 따르면 나는 ngOnInit의 주요 구성 요소에서 사용

$(function() { 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 

에 의해 Popper.Js를 시작합니다. 그러나 작동하지 않습니다. 오류가 발생합니다. "'툴팁'속성이 'JQuery'"유형에 없습니다. 내가 jquery 및 부트 스트랩 번들 파일을 가져 왔습니다. 모든 라이브러리 유형이 설치됩니다.

또한 bootstrap.bundle.js 대신 순수한 "popper.js"를 사용해 보았습니다. 그러나 같은 오류가 발생합니다. Bootstrap.bundle.js (bootstrap 및 popper.js가 올바른 순서로 포함됨) 및 jquery는 angular-cli.json에서 가져옵니다.

답변

3

부트 스트랩 JQuery와 & popper.js 설치하려면 다음 명령을 실행하여 page.ts에서

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ], 
    "scripts": [ 
    "../node_modules/jquery/dist/jquery.min.js", 
    "../node_modules/popper.js/dist/popper.min.js", 
    "../node_modules/bootstrap/dist/js/bootstrap.min.js" 
    ], 

추가 :

이 줄을 추가 각도-cli.json에서

npm install [email protected] popper.js jquery --save 

declare var $; 

편집 :

모든 JavaScript 라이브러리/프레임 워크에는 TypeScript 선언 파일이 없습니다. 반면에 컴파일 오류없이 TypeScript 파일에서 라이브러리/프레임 워크를 사용하고자 할 수 있습니다. 한 가지 해결책은 declare 키워드를 사용하는 것입니다. declare 키워드는 TypeScript 파일에서 생성되지 않은 변수를 정의하려는 앰비언트 선언에 사용됩니다.

+1

정말 고마워요! 이 '선언'에 대해 나에게 설명해 주시겠습니까? jquery 가져 오기를 시도했지만 지금은 간단한 선언으로 작동합니다. – Sergey

+1

편집에서 질문에 답변했습니다. – Melchia

관련 문제