Realizar llamadas a ficheros JavaScript desde Angular

Este proyecto consiste en un ejemplo de ejecución de una fichero JavaScript desde un componente de Angular. Puede funcionar también si realizas una invocación a una URL.

¿Por qué es útil? La opción normal es añadirlo en el index.html. El problema, lo necesites o no, se invocará y consumirá tiempo de respuesta. Con esta solución únicamente se utilizará el script en aquellos componentes que lo necesiten realmente, obteniendo un tiempo de respuesta más bajo y una mejor puntuación SEO.

Pueden consultar el repositorio https://github.com/al118345/Angular_con_javascript dónde está almacenado el ejemplo citado en esta web. Además, tenéis el siguiente video ejemplo para su consulta https://www.youtube.com/watch?v=yO-_SE5gUfQ:

Implementación

El primer paso es crear un servicio nuevo encargado de invocar el JavaScript deseado. Si lo creas como un servicio el beneficio que obtienes es que puedes utilizarlo en multiples componentes.

En nuestro ejemplo, este evento se encarga de invocar el JavaScript para añadir videos de Youtube a tu vista.

Una vez creado, le añadimos el siguiente código:

Este código es lo importante. Su función es añadir a la etiqueta head el script seleccionado con los parámetros que le indiquemos.

En el campo src indicas la ruta, puede ser una URL o un fichero JavaScript local, lo cargamos de forma asíncrona para mejorar el tiempo de respuesta y lo añadimos a la parte del HTML que queramos, en este caso al head.

Por último, donde lo necesitemos, invocamos el servicio para poder añadir en el momento preciso el script tal y como se muestra en el siguiente código.

Cuándo tiene sentido este patrón

Usa esta técnica cuando un script solo sea necesario en una página o funcionalidad concreta: mapas, vídeos, pasarelas de pago, analítica, editores o visualizaciones. Si lo cargas globalmente en index.html, todos los usuarios pagan ese coste aunque nunca abran esa sección.

Si el script es imprescindible para toda la aplicación, index.html sigue siendo una opción válida. La decisión clave es si la dependencia pertenece a toda la web o solo a una ruta concreta.

Detalle importante con SSR

En Angular Universal o SSR, document y window no existen en el servidor. La implementación más segura comprueba la plataforma antes de tocar el DOM y evita ejecutar código de navegador durante el renderizado en servidor.

Evitar cargar el mismo script dos veces

Antes de añadir un script conviene comprobar si ya existe. Así se evitan listeners duplicados, widgets repetidos y comportamientos difíciles de depurar al navegar entre rutas.

Lista práctica

Carga el script solo en el componente que lo necesita.
Usa async o defer cuando sea posible.
Comprueba SSR antes de usar document o window.
Reutiliza el script si ya está cargado.
Prefiere un paquete npm oficial cuando el proveedor lo mantenga.

Impacto SEO y rendimiento

Los scripts externos pueden retrasar el renderizado, insertar marcado inesperado o fallar cuando el crawler recibe el HTML de servidor. Cargarlos solo en la ruta que los necesita reduce JavaScript innecesario y deja el documento inicial más fácil de indexar.

Para contenido crítico, no conviene depender de un script de terceros para escribir el único texto visible de la página. Renderiza la explicación, headings y enlaces con Angular/SSR, y deja que el script mejore la experiencia después.