1

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?

Sasi Dhivya
  • 501
  • 2
  • 7
  • 25
  • Possible duplicate of [How to load script file dynamically in app.component.ts(angular)?](https://stackoverflow.com/questions/48973822/how-to-load-script-file-dynamically-in-app-component-tsangular) – R. Richards Feb 25 '18 at 15:36
  • i marked that question as duplicate – Sasi Dhivya Feb 25 '18 at 16:00

1 Answers1

3

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();
     }
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • 1
    Is it really possible to load a script from *node_modules* at runtime with a prod build? I have never thought to try, so I am curious. – R. Richards Feb 25 '18 at 15:40
  • Good point. I didn't even check the path in the question. I guess it depends on what the build step does exactly. He might need to provide the method somewhere else. – Günter Zöchbauer Feb 25 '18 at 15:41
  • Hi,is this possible to make wait instead of calling the function(doSomethingWhenScriptIsLoaded) – Sasi Dhivya Feb 25 '18 at 15:50
  • No, this is happening in the UI thread. If the browser would wait, the whole UI would completely block until the script is loaded from the server and parsed and executed. That would lead to horrible user experience. – Günter Zöchbauer Feb 25 '18 at 15:51
  • ok thanks, Gunter I will follow your above suggestion. Also, i saw the discussion with you and Richards. Am I doing anything wrong?. I am new to this and cannot understand that discussion. – Sasi Dhivya Feb 25 '18 at 15:59
  • 1
    The file `../node_modules/...` might exist during development, but not exist in the build output directory. I'm not using TypeScript myself so I don't know for sure. You might need to copy the script file to some assets directory or similar that is copied to the build output. I assume all imported files from `../node_modules` are just compiled to one or a few `xxx.js` files and the rest is ignored. – Günter Zöchbauer Feb 25 '18 at 16:35
  • 2
    in order to access node_modules/any file on production, just add it to `assets` section in `.angular-cli` JSON file: "assets": [ "assets", "favicon.ico", { "glob": "xx.min.js", "input": "../node_modules/xxxxxx/i18n/xx.min.js", "output": "./assets/" } ], then on production the file will be available under /assets/xx.min.js – Andriy Feb 25 '18 at 21:03