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 útilizará el script en aquellos componente que lo necesiten realmente, obteniendo un tiempo de respuesta más bajo y una mejor puntuación SEO en tu proyecto Angular.

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=Y_YvFB8tR08:

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

ng generate service service/youtube

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

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class YoutubescriptService {

  constructor() { }

  public loadScript() {
    console.log('preparing to load...')
    let node = document.createElement('script');
    node.src = 'assets/js/iframe_api.js';
    node.type = 'text/javascript';
    node.async = true;
    document.getElementsByTagName('head')[0].appendChild(node);
  }
}

Este código es lo importante. Su función, 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), le indicamos que lo queremos cargar de forma asíncrona para mejorar el tiempo de respuesta del servidor y, por último, lo añadimos a la zona del html que queramos (en nuestro caso, la parte que corresponde al head)

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

import { Component, OnInit } from '@angular/core';
import {YoutubescriptService} from '../../../../service/youtubescript.service';

@Component({
  selector: 'ejemplo',
  templateUrl: './enjemplo.component.html',
  styleUrls: ['./ejemplo.component.css']
})
export class  EjemploComponent implements OnInit {

  constructor(private youtubeservice: YoutubescriptService) {
    this.youtubeservice.loadScript();
  }

}