Angular - Javascript - 错误。重载页面后找不到变量：google

Question

我用Angular 2+搭建了一个网站，并在index.html文件中加入了谷歌地图Api。

<script
      async
      defer
      src="//maps.googleapis.com/maps/api/js?[myKey]&libraries=places">
</script>
<script src="//unpkg.com/@google/[email protected]/dist/markerclustererplus.min.js"></script>

当我只在Iphone上重新加载页面后，地图无法显示，我得到了错误的信息："Can't find variable : google"。"Can't find variable : google"

在PC和安卓上都能正常使用。

我可以做什么来解决这个错误？

Answer 1

看起来脚本的运行顺序不对，这是异步脚本加载的一个主要问题。第一个脚本与 defer 或 async 属性在浏览器继续运行时并行加载，并在加载后才执行，而第二个（同步）脚本阻塞浏览器，并在加载后立即运行（这发生在第一个脚本执行之后或之前，所以顺序是不可预测的）。

要保持这个顺序，可以在浏览器中添加 defer 到第二个脚本，并删除 async 同等 defer因此按顺序），或删除 defer 和 async 使其正常加载。