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

Question

我需要从 --prod 构建中调用 scripts.bundle.js 中的函数。

我们在 angular-cli json 文件中有这个：

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

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

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

这不起作用，因为脚本在底部注入。此时，尚未定义分析。

我尝试将代码放在 browser-error.html 中，方法是将其包含在 scripts.bundle.js 中，但是一旦使用 --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

我刚刚对此进行了测试，它确实有效：

创建一个包含var foo = 'bar'; 的test1.js 文件

创建一个包含alert(foo); 的test2.js 文件

把它放在 angular-cli.json 中：

"scripts": [
   "src/assets/scripts/test1.js",
   "src/assets/scripts/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>

像魅力一样工作。