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 — Konrad
– Konrad, Commented Jan 27, 2023 at 13:22
cant add script in app.component.html and then pass the environment? — Lautaro Lopez Ruiz
– Lautaro Lopez Ruiz, Commented Jan 27, 2023 at 13:33
what do you mean by that Sir ? can you ellaborate or post as an answer ? Thanks/ — Tim Launders
– Tim Launders, Commented Jan 27, 2023 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
– Tim Launders, Commented Jan 27, 2023 at 13:51

kemsky · Accepted Answer · 2023-01-27 14:18:36Z

4

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.

answered Jan 27, 2023 at 14:18

kemsky

15.4k3 gold badges37 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

conditional script in angular index.html

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related