Angular2应用：获取Google不会加载页面内容

Question

我正在开发基于Angular2的网络应用。我使用Angular CLI生成应用程序，然后为prod构建它。我在AWS S3上安装了网站＆amp; CloudFront的。当我使用网站站长中的“抓取为Google”工具时，它仅显示Loading...。

Googlebot不能抓取我的网站吗？

Answer 1

有类似的问题。我相信Google-Bot不支持现代JS。我只是激活了angular.io推荐的所有填充程序，请参阅https://angular.io/docs/ts/latest/guide/browser-support.html并添加到脚本标题中：

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js">
</script>

如果你真的需要所有这些，我不确定，但我还是需要支持旧IE。

如果这对所有Searchbots都有效，则非常不清楚，如果你必须支持它们，你可以试试https://prerender.io/。但是他们也只能使用填充程序来渲染它

希望这有帮助。

Answer 2

首先在NG-Conf 2018年4月对此进行了讨论 对于幻灯片，请点击here

查看Angular.io here的源代码是角度人员如何根据幻灯片执行此操作

 

 <script>
    if (window.document.documentMode) {
      // polyfill IE11 in a blocking way
      var s = document.createElement('script');
      s.src = 'generated/ie-polyfills.min.js';
      document.head.appendChild(s);
    } else if (!Object.assign) {
      // polyfill other non-evergreen browsers in a blocking way
      var polyfillUrl = "https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.find&flags=gated&unknown=polyfill";
      // send a blocking XHR to fetch the polyfill
      // then append it to the document so that its eval-ed synchronously
      // this is required because the method used for IE is not reliable with other non-evergreen browsers
      var xhr = new XMLHttpRequest();
      xhr.addEventListener("load", function() {
        var s = document.createElement('script');
        s.type = 'text/javascript';
        var code = this.responseText;
        s.appendChild(document.createTextNode(code));
        document.head.appendChild(s);
      });
      xhr.open("GET", polyfillUrl, false);
      xhr.send();
    }
  </script>

在索引文件的HEAD部分添加上述脚本。

值得一提的是，如果你只想添加一个CDN的答案，你很可能正在加载一个大多数现代浏览器不需要的脚本到那些浏览器，应该避免。

Answer 3

由于您的前端不是由任何服务器端语言提供服务，因此我建议您在初始加载时使用Angular2-Universal来提供静态HTML网站。

您可以查看他们的quickstart指南并让其快速运行。