conditional script in angular index.html-CodePudding

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 >
<!-- 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'
};

CodePudding user response：

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.