angular 如何根据不同环境，动态加载外部的script
在Angular应用中，使用Google Tag Manager来做跟踪，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<title>Angular Tour of Heroes</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-WLQ6ZPC');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WLQ6ZPC"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<my-app>Loading...</my-app>
</body>
</html>现在有生产环境，开发环境，测试环境，想要分别使用不同的GTM容器。
上述代码只能使用“GTM-WLQ6ZPC”一个GTM容器。
如何根据环境使用不同的GTM容器呢？
1.是否有办法不这样硬编码写到index.html文件中，而是根据某个变量动态加载<script>，<noscript>这两个标签？
2.或者有没有办法把GTM-WLQ6ZPC这个容器ID提取出来，再根据某个变量来控制。
我知道在environments文件夹下可以定义开发和生产环境的配置。但是能在这个index.html文件中用吗？
3.又或者，可以不像上述代码那样安装GTM到angular应用中，用其他方式安装？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
似乎不能直接在index.html把容器ID定义为变量而后通过environment来指定
现在的做法
方法一：
在main.ts文件中根据environment中的定义来判断使用哪个容器
方法2：
定义多个index-{env}.html文件，在其内部写好要使用的容器ID。
在package.json中定义scripts,
通过命令区分是用哪个文件。