jQuery를 사용하는 사용자 정의 자바 스크립트 코드가 작동하지 않습니다. 각도 5 (angular-cli)

각도 -cli를 사용하여 각도 5를 사용하여 응용 프로그램을 작성합니다. jquery를 사용하여 사용자 지정 함수를 작성했으며 이러한 함수가 작동하지 않습니다. 내가 한 일을 말해 줄께.jQuery를 사용하는 사용자 정의 자바 스크립트 코드가 작동하지 않습니다. 각도 5 (angular-cli)

단계 :

(나는이 타이프에서 IntelliSense를위한 알고) 유형/JQuery와 --save @ 설치 --save JQuery와에게
NPM을

NPM 설치 명령 아래 사용하여 jQuery를 설치 했
내가 내 사용자 지정 기능을 모두 유지 파일 main.js을 만든
는
스크립트 아래와 같이 .angular-cli.json에 jQuery를 지칭 [
"../node_modules/jquery/dist/jquery.js"
"자산/JS의/main.js" ]

main.js의 아래 함수 (내가 함수 중 하나를 선택했습니다)가 작동하지 않습니다.

$('.search__open').on('click', function() { 
    $('body').toggleClass('search__box__show__hide'); 
    return false; 
    });

클래스 .search__box__show__hide는 문제가되지 않는 본문에 추가되어야합니다. 내가 봤 거든, stackoverflow에 많은 기사를 통해왔다 및 앵글리 cli하지만 행운에 jquery와 같은 외부 라이브러리를 사용하는 가장 좋은 제안을 따랐다.

내 구성 요소 중 하나에서 위의 코드 조각 (위 코드 조각 중 일부)을 사용하면 정상적으로 작동합니다.

$('body').toggleClass('search__box__show__hide');

이는 $가 jquery로부터 인식되지만 main.js 파일에서 작동하지 않음을 의미합니다.

내가 뭘 잘못했는지 알려 주시기 바랍니다. 귀하의 도움은 높이 평가됩니다.

출처

2017-11-25 Hanumantha Techie

당신은 [여기]에 설명 된 단계를 (따랐다 https://github.com/angular/angular-cli/wiki/stories-third-party-lib)? 후반부에는 입력이없는 라이브러리를 사용하는 방법이 나와 있습니다. 그것은 당신을 위해 작동 할지도 모른다. –

리차드에 감사드립니다. typings.d.ts 파일에 유형을 추가 할 때까지 제공된 링크에 설명 된 단계를 수행 한 다음 단계에서 .ts 파일 중 하나에서 라이브러리를 사용하는 방법을 설명했습니다. 하지만 내 문제는 내 메인 코드입니다.js (타이프 스크립트가 아님) 파일이 작동하지 않습니다. –

main.js 파일을 Typescript로 변환하는 아이디어에 대해 생각해 보셨습니까? 그게 어려운 일인지 나는 모른다. –

-1

해결책을 찾았습니다.

구성 요소의 templateUrls라고하는 모든 html이 나중에 스크립트 태그를 사용하여 참조 된 스크립트가 평가된다는 문제가있었습니다. 해결책은 스크립트 태그에 'defer'를 사용하여 페이지가로드 된 후 스크립트가 평가되는지 확인하는 것입니다.

전 :

<html> 
    ...... 
    <body> 
     <app-root></app-root> 
     <script src="main.js"></script> 
    </body> 
<html>

후 :

<html> 
    ...... 
    <body> 
     <app-root></app-root> 
     <script src="main.js" defer></script> 
    </body> 
<html>

출처

2017-11-28 15:33:07

ES 모듈 도구 (SystemJS/Webpack 등)를 사용하여 종속성을로드/스크립트 모듈의 순서와 전역 변수에 의존하는 대신 ES 모듈의 모든 목적은 경험 한 문제를 피하는 것이지만 가능한 가장 복잡한 세계에서 최악의 상황입니다. –

jQuery를 사용하는 사용자 정의 자바 스크립트 코드가 작동하지 않습니다. 각도 5 (angular-cli)

답변

관련 문제