How to add custom script in the index.html at the end of the body when using the npm run build command in Angular 7?

Question

Is there anyway that we can append a script file in the index.html after we build our angular app?

things that i have tried:

{
 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": { ... },
  "configurations": {
   "production": {
    "fileReplacements": [{
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.prod.ts"
    }],
    "scripts": ["src/assets/scripts/my-custom-script.js"],
    ...
    }
  }
 }
}

and this:

// main.ts
if (environment.production) {
  enableProdMode();
  const scriptEl = window.document.createElement('script');
  scriptEl.src = 'https://js.intercomcdn.com/vendors-app-modern.28279aba.js';
  window.document.body.appendChild(scriptEl);
}

in both proposed solutions my dist/projectName/index.html file remained unchanged after i ran npm run build command...

The second example works. You're not seeing the script in dist/index.html only because it gets added at runtime, not during build. — Cyberpunker, Sep 14 '22 at 13:34

score 1 · Answer 1 · answered Oct 13 '20 at 13:38

On of the possible solution is to use the power of fileReplacements mechanism. Just create index.prod.html and add it into

"fileReplacements": [{
  "replace": "src/environments/environment.ts",
  "with": "src/environments/environment.prod.ts"
},
{
  "replace": "src/index.html",
  "with": "src/index.prod.html"
}]

And add whatever you need in index.prod.html file

Abolfazl Roshanzamir · Answer 2 · 2020-10-13T15:30:28.177

You can add the script directly in the index.html

 <script src="./assets/scripts/my-custom-script.js"></script>

UPDATED

In my opinion, you have one option :

Create a folder named dynamic_script in the assets and then put 2 files there

1- Your js file (like ARRS5125-MLL-YourJsfile.js)

2- A JSON file (like info.json), set the name of your file here

{
 "filename":"ARRS5125-MLL-YourJsfile.js"
}

NOTE

Whenever the name of your script is changed, change the filename in the JSON file based on your js name.

Now, You can dynamically load your js file as below

Step 1: Create a service :

@Injectable({ providedIn: "root" })
export class LoadScriptService {
    constructor(private http: HttpClient) { }

    getJsonFileName(): Promise<any> {
        return this.http.get('./assets/dynamic_script/info.json').toPromise();
    }


    loadScript(name: string) {
        return new Promise((resolve, reject) => {
            //load script
            let script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = `/assets/dynamic_script/${name}`;
            if (script.readyState) {  //IE
                script.onreadystatechange = () => {
                    if (script.readyState === "loaded" || script.readyState === "complete") {
                        script.onreadystatechange = null;
                        resolve({ script: name, loaded: true, status: 'Loaded' });
                    }
                };
            } else {  //Others
                script.onload = () => {
                    resolve({ script: name, loaded: true, status: 'Loaded' });
                };
            }
            script.onerror = (error: any) => resolve({ script: name, loaded: false, status: 'Loaded' });
            document.getElementsByTagName('head')[0].appendChild(script);
        });
    }

}

Step 2: In you component

export class AppComponent implements OnInit {
  constructor(private scriptService: LoadScriptService) { }
  ngOnInit(): void {

  }

  private async loadJsonAndScript() {
    const fileInfo = await this.scriptService.getJsonFileName();
    this.scriptService.loadScript(fileInfo.fileName)
  }

  load() {
    this.loadJsonAndScript();
  }
}

NOTE:

After building your project whenever you add the new js file in the dynamic_script then open the info.json and replace the new name manually.

But then i would need to add it manually every time after building... that's not the desired functionality. — john, Oct 13 '20 at 10:29
Because that script wont be always the same, there are some numbers in the name that will change all the time, it is something like a version, and because of that i need a dynamic way of adding that script or any other in the future. — john, Oct 13 '20 at 11:02
I updated my answer. please check and if you have any problem let me know. — Abolfazl Roshanzamir, Oct 13 '20 at 12:58

How to add custom script in the index.html at the end of the body when using the npm run build command in Angular 7?

2 Answers2

UPDATED