Angular with External JavaScript doesn't run after Component change

Question

So I created a script.service.ts file that I inject my JavaScript files into different components when needed in my project. However I am still facing a issue I had before I created that when I simply just included the script links in the index.html file. That issue is that say you load up a page say called "localhost:4200/user and that uses a component that is using a external JavaScript file to activate the users web cam for example. Everything will work great however if you load up say "localhost:4200/login" and then click a button that routes you to "localhost:4200/user" the camera functionality will not work. I'm just using this functionality as a example of course.

But the main issue is if you load one component first then route to a component that has java script functionality from a external file that functionality will not work unless you start on that component. So how can I force angular to reload functionality for external JavaScript files on route change?

I am using the latest version of Angular. Thank you for the help in advance!

Are you able to create a StackBlitz that demonstrates your issues? Doesn't need to be the actual / full code, just the minimal amount necessary to reproduce the issue — user184994
– user184994, Commented Nov 20, 2018 at 19:57
The issue is pretty simple but perhaps I explained it too complex. It is simply the fact that if you switch between components external javascript file link functions do not work. But if you load up on that exact component they do. Or if you leave the component and come back the functionality stops working as well. — Robert
– Robert, Commented Nov 20, 2018 at 20:01
The reason I ask is because then it removes any ambiguity. At the moment, I'm not sure how you're referencing the external JS file, nor how you've configured your routing — user184994
– user184994, Commented Nov 20, 2018 at 20:05
I can't really paste it. All I'm saying is if your referencing external javascript files it does not maintain any degree of the functionality from those files if you switch components using a routerlink. — Robert
– Robert, Commented Nov 20, 2018 at 20:13
I've tried calling them two different ways thus far. One way right in the index.html.. The second way is I created a load script which appends the scripts at the bottom of the head tag injected into the component directly. In both cases if you switch components through routerlinks loading in a new component and going back or going to that component from a different one the functionality called stops. — Robert
– Robert, Commented Nov 20, 2018 at 20:22

Mohammed Rishad · Accepted Answer · 2018-12-07 07:07:54Z

Instead of loading scripts in angular-cli.json change app.component.ts to :

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
    constructor(
        private router: Router,
        private authenticationService: AuthenticationService
    ) {

    }

    ngOnInit() {
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                if (document.getElementById('custom_js') !=null) {
                    document.getElementById('custom_js').remove();
                }
                const node = document.createElement('script');
                node.src = 'assets/js/custom_scripts.js';
                node.type = 'text/javascript';
                node.async = false;
                node.id = 'custom_js';
                node.charset = 'utf-8';
                document.getElementsByTagName('head')[0].appendChild(node);
            }
        });
    }
}

This will reinsert js file after every routing. No need to load the script in every component. This will do the magic!!!

Collectives™ on Stack Overflow

Angular with External JavaScript doesn't run after Component change

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related