Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: Beginner Web en 16 Marzo 2022, 00:09 am


Título: scripts en angular json, owl-carousel-o jquery problems
Publicado por: Beginner Web en 16 Marzo 2022, 00:09 am
Por alguna razon no me anda el jquery porque ni los botones de next prev andan y con owl-carousel menos

Código
  1. import { Component, OnInit } from '@angular/core';
  2.  
  3. import {  OwlOptions } from 'ngx-owl-carousel-o';
  4.  
  5. declare var $: any;
  6.  
  7. @Component({
  8.   selector: 'app-clientes',
  9.   templateUrl: './clientes.component.html',
  10.   styleUrls: ['./clientes.component.css']
  11. })
  12. export class ClientesComponent implements OnInit {
  13.  
  14.  
  15.   constructor() { }
  16.  
  17.   declare isDragging: boolean;
  18.  
  19.   ngOnInit(): void {
  20.  
  21.   }
  22.  
  23.   customOptions: OwlOptions  =  {
  24.     loop: true,
  25.     mouseDrag: true,
  26.     touchDrag: true,
  27.     pullDrag: true,
  28.     margin: 10,
  29.     nav: true,
  30.     dots: false,
  31.     autoplay: true,
  32.     smartSpeed: 2000,
  33.     navText: ['<i class="fas fa-caret-left"></i>',
  34.     '<i class="fas fa-caret-right"></i>' ],
  35.     responsive: {
  36.       0: {
  37.         items: 1
  38.       },
  39.       600: {
  40.         items: 1
  41.       },
  42.       1000: {
  43.         items: 2
  44.       }
  45.     }
  46.   }
  47.  
  48.  
  49. }
  50.  

y no hay forma de hacer que corra jquery desde angular.json

Código
  1. "scripts": [
  2.                             "node_modules/jquery/dist/jquery.min.js",
  3.                             "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
  4.                             "node_modules/popper.js/dist/popper.min.js",
  5.                             /* "./node_modules/jquery/dist/jquery.min.js",
  6.                              "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js", */
  7.                             //"./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
  8.                             "src/assets/js/main.js",
  9.                             "src/assets/js/top-buttom.js"
  10.                         ]

hay cosas que andan con estos dos cdn en el index.html pero no todo...
Código
  1. <body data-spy="scroll" data-target=".navbar" data-offset="50">
  2.     <app-root></app-root>
  3.     <!--<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
  4.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
  5. -->
  6.  
  7.     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  8.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
  9.  
  10.     <script src="assets/js/main.js"></script>
  11.     <script src="assets/js/top-buttom.js"></script>
  12.     <script src="assets/js/parallax.js"></script>
  13. </body>

para añadir separé en varios componentes, será tambien por eso?

tengo como 8 en el app.component.html

Ya casi estoy cerca, veo que el tal owl-carousel-o solo funciona bien en el index o app.component pero cuando quiero usarlo en un componente no funciona al 100%, eso me falta,


2 dias sin formir estoy con esto  ;D

Título: Re: scripts en angular json, owl-carousel-o jquery problems
Publicado por: [u]nsigned en 29 Marzo 2022, 04:26 am
Porque no instalas jQuery con NPM?


Código:
npm install jquery
npm install @types/jquery -D

Luego deberias agregarlos a tu archivos tsconfig.json

Y en tus scripts/componentes solo tenes que importarlo como cualquier librería, es mejor que traerlo desde un CDN y ponerlo en el scope global de JS.

Código
  1. import $ from "jquery";

Es la forma mas correcta de trabajar en angular.



Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines