title: How to remove appended 3rd party script Angular
body: <p>I am loading/appending a 3rd party CDN script (using JQuery) on Component load. The Script is successfully appended into the DOM. But, unfortunately, if I go to other routes and come back to this component, the script is not executing anymore. Anyone has any clue how to solve this or what's possibly going wrong? Or how can I remove this Script everytime when I come to this route and load the Script again?</p>
  <p>This is a Snippet of how I am appending the Script to DOM</p>
  <pre><code>  loadScript(name: string) {
  return new Promise((resolve, reject) =&gt; {
    if (!this.scripts[name].loaded) {
      //load script
      let script = document.createElement(&quot;script&quot;);
      script.type = &quot;text/javascript&quot;;
      script.id = this.scripts[name];
      script.src = this.scripts[name].src;
      script.charset = &quot;UTF-8&quot;;
      if (script.readyState) {
        //IE
        script.onreadystatechange = () =&gt; {
          if (
            script.readyState === &quot;loaded&quot; ||
            script.readyState === &quot;complete&quot;
          ) {
            script.onreadystatechange = null;
            this.scripts[name].loaded = true;
            resolve({ script: name, loaded: true, status: &quot;Loaded&quot; });
          }
        };
      } else {
        //Others
        script.onload = () =&gt; {
          this.scripts[name].loaded = true;
          resolve({ script: name, loaded: true, status: &quot;Loaded&quot; });
        };
      }
      script.onerror = (error: any) =&gt;
        resolve({ script: name, loaded: false, status: &quot;Loaded&quot; });
      document.getElementsByTagName(&quot;head&quot;)[0].appendChild(script);
    } else {
      resolve({ script: name, loaded: true, status: &quot;Already Loaded&quot; });
    }
  });
  </code></pre>
  <p>}
  }</p>