在 index.html 中使用环境变量

Question

我正在使用 angular 并且我想在我的 index.html 中使用环境变量进行谷歌分析。 我试过这样：

<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>

但不能在脚本的链接中工作。 你能帮我吗？ 在这个地方https://www.googletagmanager.com/gtag/js?id=" + environment.googleAnalytics没有工作这个串联

Answer 1

需要在您的依赖项中添加谷歌分析，然后将您的跟踪代码添加到 index.html，如以下链接所述。

npm install --save @types/google.analytics

此链接可能有助于找到解决方案。 Go 通过这个线程。

Angular 4+ 使用谷歌分析

Answer 2

你不能写这样的连接，因为<script>是一个 html 标记，它不是 JavaScript 代码。 也许您想通过 javascript 加载该脚本，这样您就可以连接您的environment.googleAnalytics属性。

Answer 3

一个好的方法是使用不同index.html文件（ index.dev.html ， index.prod.html等），您可以在其中明确定义所需的环境变量。 然后，使用文件替换功能，在它们之间切换（与替换环境文件的方式相同）。

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

Answer 4

您应该创建 index.html 的副本并将其命名为 index.someenv.html。 然后在您的 angular.json 中的环境配置设置文件替换：

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

angular cli 将在您运行构建时替换这些文件