Question

我需要从--prod版本的scripts.bundle.js调用一个函数。

我们在angular-cli json文件中有此

  "scripts": [
      "./assets/scripts/analytics.js",
      "../node_modules/moment/min/moment.min.js",
  ],

当用户使用不受支持的浏览器（例如在index.html中）时，我需要在scripts.bundle.js中使用一个函数进行分析：

<script type="text/javascript">
// Detect browser and redirect IE11 or earlier users
(function() {
  var ua = window.navigator.userAgent;
  var msie = ua.indexOf('MSIE '); // IE10 or earlier
  var trident = ua.indexOf('Trident/'); // IE11

   if ( msie > 0 || trident > 0 ) {
    analyticsTrack("/browser-error")
    window.location.href = "/browser-error.html";
   }
})();
</script>

这不起作用，因为脚本是在底部注入的。目前，尚未定义分析。

我尝试通过将代码包含在scripts.bundle.js中，将代码放置在browser-error.html中，但是一旦使用--prod构建，它就无法使用缓存清除功能（因为将哈希值注入名称中文件的内容-例如scripts.sadf345dsfg.bundle.js）

<script type="text/javascript" src="scripts.bundle.js"></script>

    <script type="text/javascript">
    analyticsTrack("/browser-error")
    </script>

除了关闭缓存清除功能之外，还有其他关于如何在scripts.bundle.js中调用该函数的建议吗？

Answer 1

我刚刚对此进行了测试，并且效果很好：

创建一个包含test1.js的{{1}}文件

创建一个包含var foo = 'bar';的{{1}}文件

将其放在angular-cli.json中：

test2.js

当我运行此命令时，我收到一条警告，显示“ bar”，因此您可以将脚本放入JS文件中，并将其附加在angular-cli.json数组的末尾。

由于有了Angular构建，您的脚本将从最小化和丑化中受益。

Answer 2

一个同事帮助了我，他的解决方案为我工作。我希望这对其他人有帮助。

我将脚本添加到angular-cli.json上的assets数组中（并且仍将其保留在scripts数组中）。

  "scripts": [
      "./assets/scripts/analytics.js",
      "../node_modules/moment/min/moment.min.js",
...
  ],

和

  "assets": [
...
    "browser-error.html",
    "assets/scripts/analytics.js"
  ],

然后，在浏览器错误页面上，我引用了该脚本，而不是引用scripts.bundle.js。

<script type="text/javascript" src="assets/scripts/analytics.js"></script>

像魅力一样工作。

Angular-如何从index.html调用scripts.bundle.js中的函数

2 个答案: