2

Tengo un problema con mis scripts personalizados, ya que no son leídos por los módulos o el componente de layout el cual me sirve de plantilla, el menú y algunos componentes de las paginas que hacen uso de los archivos JS.

Este es mi archivo Angular.json:

"styles": [
  "src/styles.css",
  "src/assets/css/noscript.css",
  "src/assets/css/mycss.css",
  "src/assets/css/main.css"
],
"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "src/assets/js/jquery.min.js",
  "src/assets/js/jquery.dropotron.min.js",
  "src/assets/js/jquery.scrolly.min.js",
  "src/assets/js/jquery.scrollex.min.js",
  "src/assets/js/browser.min.js",
  "src/assets/js/breakpoints.min.js",
  "src/assets/js/util.js",
  "src/assets/js/main.js"
]

El apartado de estilos funciona correctamente en cada componente y modulo de la aplicación pero los archivos JS no funcionan correctamente, haciendo pruebas, si coloco el contenido HTML que hace uso del JS en app.component.html funciona correctamente pero si el HTML esta en un modulo o componente diferente este no funciona.

Edit

Tengo un modulo layout y el componente Menú de nombre navigation que hace uso de JS con el siguiente código:

<!-- Nav -->
<nav id="nav">
  <ul>
    <li><a href="./Inicio">Inicio</a></li>
    <li>
      <a href="./EnConstruccion">San Roque En Cifras</a>
      <ul>
        <li><a href="">Lorem ipsum dolor</a></li>
        <li><a href="">Magna phasellus</a></li>
        <li><a href="">Etiam dolore nisl</a></li>
        <li>
          <a href="">And a submenu &hellip;</a>
          <ul>
            <li><a href="">Lorem ipsum dolor</a></li>
            <li><a href="">Phasellus consequat</a></li>
            <li><a href="">Magna phasellus</a></li>
            <li><a href="">Etiam dolore nisl</a></li>
          </ul>
        </li>
        <li><a href="">Veroeros feugiat</a></li>
      </ul>
    </li>
    <li><a href="./EnConstruccion">Acerca del Proyecto</a></li>
    <li><a href="./NuestroEquipo">Nuestro Equipo</a></li>
    <li><a href="./NuestraComunidad">Nuestra Comunidad</a></li>
    <li><a href="./EnConstruccion">Contactos</a></li>
  </ul>
</nav>

El cual se vincula a una platilla cuyo nombre es skeleton este es el código:

<app-navigation></app-navigation>
  <router-outlet></router-outlet>
<app-footer-pag></app-footer-pag>

Este componente llama a el menú y pie de pagina, luego uso un sistema de rutas hijas para llamar a otros modelos y usar mi plantilla de diseño esto en el app.routing.module aquí el código:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SkeletonComponent } from './layout/skeleton/skeleton.component';

const routes: Routes = [
  {
    path:'',
    component: SkeletonComponent,
    children:[
      {
        path:'Inicio',
        loadChildren:()=> import('./modules/inicio/inicio.module').then( (m) => m.InicioModule)
      },
      {
        path:'NuestroEquipo',
        loadChildren:()=> import('./modules/nuestroequipo/nuestroequipo.module').then( (m) => m.NuestroEquipoModule)
      },
      {
        path:'NuestraComunidad',
        loadChildren:()=> import('./modules/comunidad/comunidad.module').then( (m) => m.InicioModule)
      },
      {
        path:'EnConstruccion',
        loadChildren:()=> import('./modules/construccion/construccion.module').then( (m) => m.ConstruccionModule)
      },
      {
        path:'',
        loadChildren:()=> import('./modules/inicio/inicio.module').then( (m) => m.InicioModule)
      },
      {
        path:'**',
        loadChildren:()=> import('./modules/error/error.module').then( (m) => m.ErrorModule)
      }
    ]
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

En mi app.component.html tengo el siguiente codigo:

<router-outlet></router-outlet>

Y en mi index.html tengo lo siguiente:

<!doctype html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Tsm San Roque</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body class="left-sidebar is-preload">
    <div id="page-wrapper">
      <app-root></app-root>
    </div>
  </body>
</html>

Cabe resaltar que el menú que tengo en componente no funciona su JS si esta el código HTML en el componente pero si funciona el menú de manera correcta si esta en el index.html.

Como funciona actualmente:

https://psbveredasanroque.social/

Como debería Funcionar:

https://html5up.net/helios

(En mi pagina no funciona el despliegue de los submenus y la galeria.)

Repositorio Git:

https://github.com/miguelEdCl/root.git

4
  • ¿Puedes poner un ejemplo de código? Me parece que lo único que pasa es que Angular se lleva muy mal con librerías como jQuery. O dicho de otro modo: jQuery espera encontrar HTML cuando se carga, mientras que Angular genera ese HTML cuando considera que debe hacerlo. Commented el 14 oct. 2020 a las 8:05
  • Mi recomendacion es q publiques el codigo minimo necesario para que se reproduzca el problema. Así será más facil apoyarte.
    – corlaez
    Commented el 18 oct. 2020 a las 4:23
  • Puede ser el motivo que estés declarando el jquery.min.js dos veces, uno por el archivo que has grabado en assets y otro por el que has instalado mediante npm? Es posible que se estén pegando las dos versiones. Prueba a desinstalar la de npm y quitarla del script o no utilizar la declarada en assets.
    – Antonio U.
    Commented el 19 oct. 2020 a las 8:15
  • no como tal ya verifique, y ya instalado mediante npm. Commented el 20 oct. 2020 a las 14:33

3 respuestas 3

3
+50

Para que los scripts funcionen primero debe existir el elemento html y luego se debe aplicar el script que lo hace funcionar. Por ejemplo, si dentro de main.js existe una función que se llama iniciarBoton con este código:

function iniciarBoton(){
 
 $("#boton").click(()=>{
    alert();
  })

}

Si el elemento con id boton no ha sido creado antes de llamar ese método entonces no se le asignará el evento click.

Entonces, sabiendo eso, si el elemento botón se encuentra dentro de algún componente, por ejemplo ComponenteX. Dentro de ese componente se debe llamar la función que se encargará de agregar el evento click al botón.

Cómo se hace? globalmente la función ya fue cargada en el index.html así que para usarla en el componente se debe declarar una constante con el mismo nombre de la función y de tipo any:

declare const iniciarBoton : any

Luego en el ngAfterViewInit se debe ejecutar esa función:

ngAfterViewInit() {
   iniciarBoton();
}

Quedando así:

import { Component } from "@angular/core";
    
    declare const iniciarBoton: any;
    
    @Component({
      selector: "my-app",
      template: `
      <button id="boton" value="boton"></button>
      
      `
    })
    export class ComponenteX {
    
    
      ngAfterViewInit() {
        iniciarBoton();
      }
    }

Lo anterior es la base para resolver el problema del uso de scripts externos para ser usados en Angular.

Actualización

Realicé dos cambios:

Coloqué todo el código del archivo main.js dentro de una función llamada main() quedando el archivo main.js con la siguiente forma:

function main() {
  // todo el código del archivo main.js
}

Luego en el navigation.component declaré una constante que sirve para ejecutar la función main(), quedando así:

import { Component, OnInit } from '@angular/core';
declare const main : any;
@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {

  constructor() { }

  ngAfterViewInit(): void {
   main();
  }
}

Y con eso ya funciona.

Por qué funciona?

En una página web normal, cada vez que se navega la página se recarga totalmente, eso hace que todos los scripts se ejecuten para iniciar los componentes de la plantilla que están presentes.

En Angular eso es diferente, los scripts se cargan en el index.html cuando se carga la aplicación y luego cuando se navega por la app los nuevos componentes son agregados al DOM pero los scripts no se vuelven a ejecutar como en una web tradicional. Por eso es necesario implementar una forma de ejecutar los scripts cuando un componente se agrega.

En la plantilla que usas, en el archivo main.js están todos los scripts que se encargan de iniciar los componentes de la plantilla: menús, botones, panels etc. Así que una solución rápida es ejecutar todos esos scripts cuando el componente Angular se inicia.

9
  • Tengo un problema, los cuales es que esos scripts son ajenos y como tal funcionan como una librería, y no podría invocarlos como un método o función. Commented el 20 oct. 2020 a las 14:14
  • En ese caso puedes envolver todo el código que está en el archivo dentro de una función llamada por ejemplo cargarMain() y aplicar el mismo proceso.
    – Lobos
    Commented el 20 oct. 2020 a las 14:19
  • Al parecer puede que sea lo correcto, pero me genera un conflicto a el envolver la librería de Jquery o no me lee correctamente el import * as jQuery from 'jquery'; ya que me dice que no reconoce $ o Jquery Commented el 20 oct. 2020 a las 15:58
  • 1
    Removí la llamada a la función main() en el archivo main.js y funcionó el modo móvil.
    – Lobos
    Commented el 20 oct. 2020 a las 17:38
  • 1
    Creo que sería mejor lanzar la función en ngAfterViewInit en lugar de en ngOnInit, en caso de que los componentes pudieran tenerr componentes anidados. Commented el 21 oct. 2020 a las 12:34
1

Según entiendo el problema que has planteado y el código que has publicado, esto no tiene nada que ver con jQuery sino con la forma en que estás usando las rutas. Aquí te enlisto algunas sugerencias que, según el codigo que has compartido en tu pregunta, deberán ser de utilidad:

  1. Utiliza la directiva routerLink en vez de href.
  2. Utiliza sólo un router-outlet. Tu tienes dos en total, uno en skeleton y otro en app.component.html.
  3. Utiliza rutas absolutas en los routerLinks. Tus hrefs estan utilizando rutas relativas, lo cual puede crear diferentes resultados dependiendo desde qué ruta las estás invocando. Creo yo que éste es el mayor problema de todos y el cual está interfiriendo directamente con el resultado que buscas. En concreto, tu código nav debe verse como el siguiente:
<!-- Nav -->
<nav id="nav">
  <ul>
    <li><a routerLink="/Inicio">Inicio</a></li>
    <li>
      <a routerLink="/EnConstruccion">San Roque En Cifras</a>
      <ul>
        <li><a routerLink="">Lorem ipsum dolor</a></li>
        <li><a routerLink="">Magna phasellus</a></li>
        <li><a routerLink="">Etiam dolore nisl</a></li>
        <li>
          <a routerLink="">And a submenu &hellip;</a>
          <ul>
            <li><a routerLink="">Lorem ipsum dolor</a></li>
            <li><a routerLink="">Phasellus consequat</a></li>
            <li><a routerLink="">Magna phasellus</a></li>
            <li><a routerLink="">Etiam dolore nisl</a></li>
          </ul>
        </li>
        <li><a routerLink="">Veroeros feugiat</a></li>
      </ul>
    </li>
    <li><a routerLink="/EnConstruccion">Acerca del Proyecto</a></li>
    <li><a routerLink="/NuestroEquipo">Nuestro Equipo</a></li>
    <li><a routerLink="/NuestraComunidad">Nuestra Comunidad</a></li>
    <li><a routerLink="/EnConstruccion">Contactos</a></li>
  </ul>
</nav>

Independientemente en cuál de todos tus componentes pongas el código que menciono arriba, las rutas deberán de funcionar. El observar que una ruta funciona desde el componente raíz y no desde un componente hijo es un síntoma del uso de rutas relativas.

1
  • Si quito router-outlet. en cualquiera de los dos archivos, la pagina no carga debidamente ninguna ruta. Commented el 20 oct. 2020 a las 14:18
0

Imagina que tienes un componente que usa jQuery internamente y que, por tanto, añade una etiqueta script en su plantilla. El componente es instanciado, su ciclo de vida se completa ejecutando ngOnChanges, ngOnInit... etc. Pero mientras eso ocurre el código de la librería de jQuery aún no se ha terminado de descargar e interpretar, por lo que jQuery no existe todavía como librería usable.

Por tanto estamos ante una condición de carrera: por un lado estás cargando de manera asíncrona una librería y por otro tienes el ciclo de vida natural de los componentes de Angular, que no esperarán a ningún evento externo.

Pero imagina que es al revés, que tienes código jQuery para añadir cierto comportamiento a elementos de tu página y se ejecuta antes de que el elemento sea añadido por Angular: entonces seguramente todo te fallará igualmente porque algo como

$(".main-menu").click(...)

No encontrará el elemento con la clase main-menu y por tanto no añadirá ninguna respuesta a un click en tu menú. Deberás cargar jQuery en el index, pero añadir el código que quieras ejectuar sobre tu componente dentro del método ngAfterViewInit(), que se ejecuta una vez el componente se ha inicializado y la vista está "presente".

Otro problema que te puedes encontrar es que el componente detecte cambios en sus inputs y Angular lo recargue, eliminando el DOM actual, con lo que todos los event listener que añadiste se habrán perdido.

En general no es una buena idea usar jQuery junto con Angular, pero si por alguna necesidad no puedes evitarlo, añádelo en tu fichero index.html para que pueda ser usado por la aplicación (en cada componente, en los métodos que sea necesario y no acabes insertándolo varias veces por distintos componentes, además de evitar el problema que comento más arriba.

1
  • Ya lo he añadido pero no funcionan los componentes, pero si pego el menú y otros elementos que hacen usos de las librerías, en el index.html funcionan correctamente. Commented el 20 oct. 2020 a las 14:34

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.