在 index.html 中使用环境变量

Question

I'm using angular and I want to use an environment variable in my index.html for google analytics. I tried like this:

<script>
    import {environment} from "./environments/environment";
</script>
<!-- End Google Tag Manager (noscript) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=" + environment.googleAnalytics></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());


    gtag('config', environment.googleAnalytics);
</script>

But not working in the link of script. Can you help me please? In this place https://www.googletagmanager.com/gtag/js?id=" + environment.googleAnalytics didn't work this concatenation

Answer 1

Need to add google anlytics in your dependencies and then add your tracking code to index.html as discussed in following link.

npm install --save @types/google.analytics

This link may helps to find a solution. Go through this thread.

Angular 4+ using Google Analytics

Answer 2

You can't write such concatenation because <script> is an html tag, it is not JavaScript code. Maybe you'll want to load that script through javascript, in that way you can concatenate your environment.googleAnalytics property.

Answer 3

A good way to do this would be to have different index.html files ( index.dev.html , index.prod.html etc.) in which you explicitly define the needed environment variables. Then, using the file replacement feature, switch between them (same way that the environment files are replaced).

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

Answer 4

You should create a copy of index.html and name it index.someenv.html. Then in your angular.json in environment configuration setup file replacement:

"fileReplacements": [{
    "replace": "src/index.html",
    "with": "src/index.someenv.html"
}]

The angular cli will replace these files when you run your build