En ocasiones requerimos de cierto código javascript para usarlo en un componente específicamente, por X ó Y razón no es óptimo que lo coloquemos desde nuestro archivo angular.json o en su defecto desde el index.html. Para esas situaciones podemos hacer que nuestro script se cargue al momento de la creación de nuestro componente, y a su vez removerlo cuando se destruya.
Para agregar un script es necesario generar un elemento y agregarlo al body, como se muestra a continuación:
let body = document.body;
let script = document.createElement('script');
script.innerHTML = '';
script.src = 'url';
script.async = true;
script.defer = true;
body.appendChild(script);
Si es el único script que se agregará de forma dinámica, se puede colocar dentro del método ngOnInit, caso contrarío lo ideal es separar esta funcionalidad dentro un servicio para poder realizar la invocación desde cualquier componente que requiera cargar un script de forma dinámica.
import {Injectable} from "@angular/core";
@Injectable()
export class ScriptService {
constructor() {
}
public loadScript({id, url}) {
return new Promise((resolve, reject) => {
if(id && document.getElementById(id)) {
resolve({id: id, loaded: true, status: 'Already Loaded'});
}
let body = document.body;
let script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML = '';
script.src = url;
script.id = id;
script.onload =() => {
resolve({id: id, loaded: true, status: 'Loaded'});
};
script.onerror = (error: any) => resolve({id: id, loaded: false, status: 'Loaded'});
script.async = true;
script.defer = true;
body.appendChild(script);
});
}
public removeScript(id: string) {
let script = document.getElementById(id);
if(script) {
script.remove();
}
}
}
Con un servicio como el anterior, ya podemos cargar un script en cualquier componente de una forma más sencilla, por ejemplo:
this.scriptService.loadScript({id: 'my-script', url : 'assets/js/main.js'})
.then(data => {
console.log('script loaded ', data);
}).catch(error => console.log(error));
Para el caso de remover el script basta con ejecutar la siguiente línea en el método ngOnDestroy:
this.scriptService.removeScript('my-script');