StacksJar
Made with π by Arif Shaikh with all Passion.
Adding a script to an Angular Library
Adding a script to an Angular Library
Solution:
let scriptTap = document.createElement('script');
scriptTag.src = '<route to your scripts>';
document.body.appendChild(scriptTag);
Explanation:
The above shown method is the Basic method in Javascript to inject any scripts into you application. In Below example you can checkout the same injection method using angular provided methods.
Solution 2:
// Import Renderer2
import { Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
// Inject in constructor
constructor(private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {}
// Create Function to Inject Script
insertScript() {
const js = this.renderer.createElement('script');
js.type = 'text/javascript';
js.src = 'https://somejavscriptfile.js';
this.renderer.appendChild(document.body, js);
}
Explanation:
You can use above method and inject script in your code. This method uses a angular's inbuilt library known as Renderer2. You will also have to inject the Document via your constructor provided by Angular. This is required because Angular suggests you to not use Document and Window objects directly in Angular.
The reason for this is Angular is an Universal framework its can be used as an single app, it can be converted into a desktop app or even a native mobile application just by adding some additional libraries. And Document and Window objects are only available in browser, so it may occur that depending on environment angular code is being executed you may or may not have access to this Objects.
That's why its better to always inject Document object using constructor provided by Angular
