Estoy trabajando en un proyecto de Angular que tienen estos archivos:
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:
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:
En el componente pedido-control
tengo un botón que al hacer click muestra un modal:
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?
body
?import * as $ from 'jquery'
jquery.slim.js
, la cual si es reducida.