부트 스트랩 모달 : 함수가 아닙니다.

내 페이지에 모달이 있습니다. Windows가로드 될 때 호출하려고하면 다음과 같은 오류가 콘솔에 인쇄됩니다.

$(...).modal is not a function

이것은 내 모달 HTML입니다.

<div class="modal fade" id="prizePopup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
                This Modal title
            </h4>
        </div>
        <div class="modal-body">
            Add some text here
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">
                Submit changes
            </button>
        </div>
    </div>
</div>

<script type="text/javascript" src="js/bootstrap.js"></script>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

그리고 이것은 창이로드 될 때 함께 실행할 JavaScript입니다.

<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

이 문제를 어떻게 해결할 수 있습니까?

스크립트 순서에 문제가 있습니다. 다음 순서로로드하십시오.

<!-- jQuery -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- BS JavaScript -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- Have fun using Bootstrap JS -->
<script type="text/javascript">
$(window).load(function() {
    $('#prizePopup').modal('show');
});
</script>

왜 이래? Bootstrap JS는 jQuery에 의존 하기 때문에 :

플러그인 종속성

일부 플러그인 및 CSS 구성 요소는 다른 플러그인에 의존합니다. 플러그인을 개별적으로 포함하는 경우 문서에서 이러한 종속성을 확인해야합니다. 또한 모든 플러그인은 jQuery에 의존합니다 (즉 , 플러그인 파일 앞에 jQuery가 포함되어야 함 ).

코드에서 jQuery가 두 번 이상 선언 된 경우에도이 경고가 표시 될 수 있습니다. 두 번째 jQuery 선언은 bootstrap.js가 올바르게 작동하지 못하게합니다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
...
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

문제는 jQuery 인스턴스가 두 번 이상 있기 때문입니다. jQuery의 다중 인스턴스로 많은 파일을 사용하는 경우주의하십시오. jQuery 인스턴스 하나만 남겨두면 코드가 작동합니다.

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

jQuery가 첫 번째 여야합니다.

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

TypeError의 원인 : $ (…) .modal은 함수가 아닙니다 :

1. 스크립트가 잘못된 순서로로드됩니다.
2. 여러 jQuery 인스턴스

해결책 :

1. 스크립트가 아직 도달하지 않은 요소에 액세스하려고하면 오류가 발생합니다. 부트 스트랩은 jQuery에 의존하므로 먼저 jQuery를 참조해야합니다. 따라서 jquery.min.js를 호출 한 다음 bootstrap.min.js를 호출해야합니다. 또한 부트 스트랩 모달 오류는 실제로 모달 함수를 호출하기 전에 부트 스트랩의 javascript를 포함하지 않은 결과입니다. 모달은 jQuery가 아닌 bootstrap.js에 정의되어 있습니다. 따라서 스크립트는 이러한 방식으로 포함되어야합니다.

      <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
      <script type="text/javascript" src="js/bootstrap.js"></script>
   

2. jQuery의 여러 인스턴스가있는 경우 두 번째 jQuery 선언은 bootstrap.js가 올바르게 작동하지 못하게합니다. 따라서 jQuery.noConflict();모달 팝업을 호출하기 전에 사용 하십시오.

   jQuery.noConflict();
   $('#prizePopup').modal('show');
   

   jQuery를 이벤트 별칭처럼 .load, .unload또는 .errorjQuery를 1.8부터 사용되지 않습니다.

   $(window).on('load', function(){ 
         $('#prizePopup').modal('show');
   });
   

   또는 모달 팝업을 직접 열어보십시오.

   $('#prizePopup').on('shown.bs.modal', function () {
         ...
   });
   

스크립트 순서 변경

부트 스트랩은 jquery 플러그인이므로 실행하려면 Jquery가 필요합니다.

import 문을 변경했습니다. 에서

import * as $ from 'jquery';

에:

declare var $ : any;

운영

npm i @types/jquery
npm install -D @types/bootstrap

프로젝트에서 Angular 프로젝트에 jquery 유형을 추가합니다. 그 후 포함

import * as $ from "jquery";
import * as bootstrap from "bootstrap";

app.module.ts에서

더하다

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

index.html에서 본문 닫는 태그 바로 앞에 있습니다.

Angular 2-7을 실행하는 경우 tsconfig.app.json 파일의 types 필드에 " jquery "를 포함 합니다.

그러면 Angular 프로젝트에서 '모달'과 '$'의 모든 오류가 제거됩니다.

모달 부트 스트랩을 각도로 통합 할 때이 오류가 발생합니다.

이것이이 문제를 해결하기위한 나의 해결책입니다.

나는 누구의 관심사를 공유합니다.

첫 번째 단계는 설치 필요 jquery와 bootstrap에 의한 npm명령.

두 번째로 추가 declare var $ : any;구성 요소 가 필요합니다 .

$('#myModal').modal('hide');onSave () 메서드에서 사용할 수 있습니다 .

데모 https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

사용하다:

jQuery.noConflict();
$('#prizePopup').modal('toggle');

HTTPS가 아닌 HTTP로 jquery를 가져 왔기 때문에 프로덕션에서 문제가 발생했습니다 (그리고 프로덕션은 HTTPS입니다)

파티에 조금 늦었지만 중요한 메모가 있습니다.

스크립트는 올바른 순서 일 수 있지만 async스크립트 태그 (예 :이) 에있는 모든를주의하십시오.

<script type="text/javascript" src="js/bootstrap.js" async></script>

이로 인해 문제가 발생할 수 있습니다. 특히 async프로덕션 환경에 대해서만 이 세트 가있는 경우 추론하기가 매우 어려울 수 있습니다.

이 문제를 해결하기 위해 고군분투하고로드 순서를 확인하고 jQuery가 번들링을 통해 두 번 포함되었는지 확인했지만 그 원인이 아닌 것 같습니다.

마지막으로 다음과 같이 변경하여 수정했습니다.

(전에):

$('#myModal').modal('hide');

(후):

window.$('#myModal').modal('hide');

여기에서 답을 찾았습니다 : https://github.com/ColorlibHQ/AdminLTE/issues/685

다음을 포함해야합니다.

bootstrap.min.css
jquery.min.js
bootstrap.min.js