conditional script in angular index.html

Question

I have this angular project and then index.html is the main entry point of the application like any other angular project , it contains the links.

As you can see on the html below there is an interpolation which is the ${environment.code} that is coming from the environment config.

The value of google tag manager id should be the value of ${environment.code} which is different for dev, staging and prod.

The problem is environment.code is not being accesssible in the index.html (tried different ways)

is there a way we can modify the index.html or at least modify the google tag manager id value for different environments? Thanks,

#index.html code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Cache-Control" content="max-age=0, must-revalidate"/>
  <meta http-equiv="Pragma" content="no-cache"/>
  <meta http-equiv="Expires" content="0" />
  <title>m</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="sec-validation" content="d1343a3ae51-8f7b-4038-bfc8-c56565485456547a4d">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.gstatic.com">  
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">  
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  'https://www.googletagmanager.com/gtm.js?id=${environment.code}'+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer',environment.code);</script>
  <!-- End Google Tag Manager -->
</head>

<body class="mat-typography dx-viewport">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${environment.code}"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
  <app-root></app-root>
</body>
</html>

#main.ts code

import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

#environment code

export const environment = {
  production: false,
  appName: 'My App',
  code: 'AGRTSRS-GMSDS'
};

Does this answer your question? [How to use environment variable in index.html for Angular 6](https://stackoverflow.com/questions/52050519/how-to-use-environment-variable-in-index-html-for-angular-6) — Konrad, Jan 27 '23 at 13:22
cant add script in app.component.html and then pass the environment? — Lautaro Lopez Ruiz, Jan 27 '23 at 13:33
what do you mean by that Sir ? can you ellaborate or post as an answer ? Thanks/ — Tim Launders, Jan 27 '23 at 13:35
but it is the index.html that I am trying to change , how does it ties on the app.component.htm;? — Tim Launders, Jan 27 '23 at 13:51

score 3 · Accepted Answer · answered Jan 27 '23 at 14:18

It is not possible to use env files in index.html, but you can provide a separate index file for each environment:

"configurations": {
   "production": {
    "index": {"input": "src/prod.index.html", "output": "index.html"}
    },
   "staging": {
    "index": {"input": "src/staging.index.html", "output": "index.html"}
    }
}

You could write schematics to extract env data and patch index.html but it seems to be too complicated for the task.

Another way is to use multiple JSON configuration files, you can import these files into env file and also you can write post-build script that patches index.html using apporpriate JSON file.

conditional script in angular index.html

1 Answers1