Bootstrap modal: no es una función

Tengo un modal en mi página. Cuando intento llamarlo cuando se cargan las ventanas, imprime un error en la consola que dice:

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

Este es mi HTML modal:

<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>

Y este es mi JavaScript para ejecutarlo cuando se carga una ventana:

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

¿Como puedo solucionar este problema?

Tiene un problema en el orden de los scripts. Cárguelos en este orden:

<!-- 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>

¿Por qué esto? Porque Bootstrap JS depende de jQuery :

Dependencias de complementos

Algunos complementos y componentes CSS dependen de otros complementos. Si incluye plugins individualmente, asegúrese de comprobar si existen estas dependencias en los documentos. También tenga en cuenta que todos los complementos dependen de jQuery (esto significa que jQuery debe incluirse antes de los archivos del complemento ).

Esta advertencia también puede mostrarse si jQuery se declara más de una vez en su código. La segunda declaración de jQuery evita que bootstrap.js funcione correctamente.

<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>

El problema se debe a tener instancias de jQuery más de una vez. Tenga cuidado si está utilizando muchos archivos con múltiples instancias de jQuery. Simplemente deje 1 instancia de jQuery y su código funcionará.

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

jQuery debería ser el primero:

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

Causas de TypeError: $ (…) .modal no es una función:

1. Los scripts se cargan en el orden incorrecto.
2. Varias instancias de jQuery

Soluciones:

1. En caso de que, si un script intenta acceder a un elemento que aún no se ha alcanzado, obtendrá un error. Bootstrap depende de jQuery, por lo que se debe hacer referencia a jQuery primero. Por lo tanto, debe llamarse jquery.min.js y luego bootstrap.min.js y, además, el error modal de bootstrap es en realidad el resultado de que no incluye javascript de bootstrap antes de llamar a la función modal. Modal se define en bootstrap.js y no en jQuery. Entonces, el script debe incluirse de esta manera

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

2. En caso de que haya varias instancias de jQuery, la segunda declaración de jQuery evita que bootstrap.js funcione correctamente. así que utilícelo jQuery.noConflict();antes de llamar a la ventana emergente modal

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

   Alias ​​de eventos de jQuery como .load, .unloado en .errordesuso desde jQuery 1.8.

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

   O intente abrir la ventana emergente modal directamente

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

cambiar el orden del script

Debido a que bootstrap es un complemento de jquery, requiere que Jquery se ejecute

El cambio de declaración de importación funcionó. De

import * as $ from 'jquery';

a:

declare var $ : any;

correr

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

en el proyecto para agregar los tipos de jquery en su Proyecto Angular. Después de eso incluye

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

en su app.module.ts

Añadir

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

en su index.html justo antes de la etiqueta de cierre del cuerpo.

Y si está ejecutando Angular 2-7, incluya " jquery " en el campo de tipos del archivo tsconfig.app.json.

Esto eliminará todos los errores de 'modal' y '$' en su proyecto Angular.

Encuentro este error cuando integro bootstrap modal en angular.

Esta es mi solución para resolver este problema.

Comparto por quien preocuparse.

Primer paso que necesita instalar jqueryy bootstrappornpm comando.

Segundo, necesitas agregar declare var $ : any; componente

Y el uso puede usar $('#myModal').modal('hide'); el método onSave ()

Demostración https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts

Utilizar:

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

El problema me sucedió solo en producción solo porque importé jquery con HTTP y no HTTPS (y la producción es HTTPS)

Llego un poco tarde a la fiesta, sin embargo, hay una nota importante:

Es posible que sus scripts estén en el orden correcto, pero tenga cuidado con los asyncs en su etiqueta de script (como este)

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

Esto podría estar causando el problema. Especialmente si tiene este asyncconjunto solo para entornos de producción, esto puede ser realmente frustrante para razonar.

Tuve problemas para resolver este, verifiqué el orden de carga y si jQuery se incluyó dos veces a través de la agrupación, pero esa no parecía ser la causa.

Finalmente lo arreglé haciendo el siguiente cambio:

(antes de):

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

(después):

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

Encontré la respuesta aquí: https://github.com/ColorlibHQ/AdminLTE/issues/685

Debes incluir:

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