Tengo una aplicación angular y un componente tiene que cargar algunos archivos javascript de los activos. Estos scripts están cargando algunos datos en algunos gráficos en mi página de componentes. Cuando hago clic en un punto del gráfico, se me redirige a otro componente.
Así es como estoy cargando los scripts:
loadAPI: Promise<any>; constructor(private router: Router, private route: ActivatedRoute, private communicationService: ComunicationService ) { this.route.params.subscribe(params => { this.name = params["name"]; communicationService.emitToolbarNameChange("myPage"); }); this.loadAPI = new Promise((resolve) => { this.loadScript1(); resolve(true); }); } public loadScript1() { var isFound = false; var scripts = document.getElementsByTagName("script") for (var i = 0; i < scripts.length; ++i) { if (scripts[i].getAttribute('src') != null && scripts[i].getAttribute('src').includes("loader")) { isFound = true; } } if (!isFound) { var dynamicScripts = ["../../../../assets/js/main.js","../../../../assets/js/1.js","../../../../assets/js/2.js", "../../../../assets/js/3.js","../../../../assets/js/4.js","../../../../assets/js/5.js", "../../../../assets/js/6.js","../../../../assets/js/7.js","../../../../assets/js/8.js","../../../../assets/js/9.js"]; for (var i = 0; i < dynamicScripts.length; i++) { let node = document.createElement('script'); node.src = dynamicScripts [i]; node.type = 'text/javascript'; node.async = false; node.charset = 'utf-8'; document.getElementsByTagName('head')[0].appendChild(node); } } }El problema es que tengo que definir las variables como var en los archivos js, creo que se sobrescriben cada vez que accedo a la página del componente. Si los tengo permitidos, funcionan una vez y luego aparece un error en la consola que indica que ya se usaron.
Si cargo los scripts en index.html o en build {..., scripts []} no se muestran datos en la página. Estoy redirigiendo desde mi página de componentes y desde esa página de regreso a la página de componentes.
¿Alguna sugerencia sobre cómo cargar los scripts?