0

Estoy trabajando en un proyecto de Angular que tienen estos archivos:

introducir la descripción de la imagen aquí

En mi index.html tengo las librerias css y js:

<head>
  <meta charset="utf-8">
  <title>Pedidos WEB GT</title>
  <base href="/">
  <!-- <base href="/P3W/"> -->


  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  
  <script src="assets/js/bootstrap.min.js"></script>
  
  <link rel='stylesheet' href='assets/css/bootstrap.min.css'/>
  
  <link rel='stylesheet' href='assets/css/sweetalert2.min.css'/>

  <link rel='stylesheet' href='assets/css/style.css'/>
  <link rel='stylesheet' href='assets/css/fontsIcon.css'/> 
  <script src="assets/js/sweetalert2.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9pnDdHXxMf0sI1sBQs-pLSvT5r2uAu7c&libraries=places&language=fr" async defer></script>
</head>

Voy a nombrar 2 componentes que tengo de ejemplo, newPassword.component y Pedidos-Control.component, cuando la pagina carga en el primer componente (cliente), me debe este llamo a desplegar un modal donde previamente evaluo (en newPassword) si el usuario debe cambiar la contraseña o no:

ngOnInit(){
        this.setNewPasswordForm = new FormGroup({
            newPassword: new FormControl(null, Validators.required),
            newPasswordConfirmation: new FormControl(null, Validators.required)
        });

        let cambioClave = this.authService.getLoggedUser().cambioClave;
        console.log('cambio clave', cambioClave);

        //el usuario tiene la posibilidad de cambiar de contraseña
        if (cambioClave){        
            console.log('inside if')    
            $('#setNewPasswordModal').modal('show');
        }
    }

Cuando carga la pagina me sale lo siguiente:

introducir la descripción de la imagen aquí

Leyendo por internet veo que se debe al orden en el que las librerías están acomodadas y que jquery.js debi ir antes de bootstrap.js.

Lo extraño es que la librerías están en orden que deberían:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

En el componente pedido-control tengo un botón que al hacer click muestra un modal:

introducir la descripción de la imagen aquí

Mis dudas, si el orden de "esta malo" este modal no se deberia mostrar entonces?

El modal de pedidos-control se llama mediante data-target:

 <button type="button" class="btn btn-success verDetallePedido modalUsuarios" data-id={{item.IdPedido}} data-toggle="modal" data-target="#modal-verDetalle" (click)="showDetalle(item.IdPedido)">Ver Detalle</button>

Mientras que newPassword es con modal(show), cual es realmente el problema?

4
  • ¿Intentaste colocar los scripts de jquery y bootstrap (en ese orden) al final del body?
    – padaleiana
    Commented el 26 ene. 2022 a las 14:11
  • No uses Jquery con Angular, puede ocasionarte muchos problemas. En su lugar usa Angular Material, puedes usar el SASS de Bootstrap. import * as $ from 'jquery' Commented el 26 ene. 2022 a las 17:26
  • @Legna esta información es incorrecta. Ambos scripts contienes las mismas funciones. Tal vez te refieres a jquery.slim.js, la cual si es reducida. Commented el 26 ene. 2022 a las 23:15
  • @JheymanMejia Para no causar confusión, elimino mi comentario. Gracias por apuntarlo.
    – Legna
    Commented el 26 ene. 2022 a las 23:54

1 respuesta 1

0

Primero tienes que tener bootsrap y jquery en tu proyecto luego en tu componente en la parte superior de importaciones agrega para incluir jquery y poder usarlo en todo el componente:

declare var $:any;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.