How to load the script file immediately (dynamically added) before continue?

Question

I have loaded script file like below code in angular home.component.ts file

export class HomeComponent {
    constructor() {
        this.loadDynmicallyScript();
    } 
     public loadDynmicallyScript() {
        var script = document.createElement('script');
        script.src = "../node_modules/xxxxxx/i18n/xx.min.js";
        script.async =false;
        document.head.appendChild(script);

     }

But this file gets loaded after components created and later. So, in this case, it makes no use of this file. I want to load this file once I appended in documents. How to achieve this?

Answer 1

You can return a promise to chain calls

export class HomeComponent {
    constructor() {
        this.loadDynmicallyScript()
        .then(() => {
          this.doSomethingWhenScriptIsLoaded();
        });
    } 
     public loadDynmicallyScript():Promise {
        var script = document.createElement('script');
        script.src = "../node_modules/xxxxxx/i18n/xx.min.js";
        script.async =false;
        document.head.appendChild(script);
        return Promise((resolve, reject) => {
          script.onload = resolve;
        });    
     }

or just pass a function to the onLoad to be called when the script was loaded

export class HomeComponent {
    constructor() {
        this.loadDynmicallyScript()
    } 
     public loadDynmicallyScript():Promise {
        var script = document.createElement('script');
        script.src = "../node_modules/xxxxxx/i18n/xx.min.js";
        script.async =false;
        document.head.appendChild(script);
        script.onload = () => this.doSomethingWhenScriptIsLoaded();
     }