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".
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 la aplicación y no acabes insertándolo varias veces por distintos componentes, además de evitar el problema que comento más arriba.