抓取，因为 Google 不呈现 Angular.js 应用程序答案

【问题标题】：Fetch as Google doesn't render Angular.js application抓取，因为 Google 不呈现 Angular.js 应用程序
【发布时间】：2016-04-29 14:24:00
【问题描述】：

我有一个 Angular 应用程序，我正在尝试在生产环境中进行设置。正如我所读到的，谷歌现在能够通过 AJAX 页面进行爬网。我正在检查如何使用 Fetch as Google 服务。尽管主页在所有主流浏览器中都正确呈现，但 Fetch as Google 返回的空白页面没有编译任何 Angular 指令，也没有错误。我正在使用 HTML5 模式和ui-router。文件由 node.js 应用服务器提供（我尝试从 nginx 提供文件，结果相同），所有文件都由robots.txt 允许。脚本被连接和缩小。控制台中没有错误。

Fetch 作为 Google 服务返回的代码： !doctype html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <base href="/">
  <title ng-bind="$state2.current.data.pageTitle || 'xxx'"></title>
  <meta name="description" content="{{$state2.current.data.description}}">
  <meta name="keywords" content="{{$state2.current.data.keywords}}">
  <meta name="viewport" content="width=device-width">
  <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
  <link rel="stylesheet" href="app/b91daaea.vendor.css">
  <link rel="stylesheet" href="bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.css" />
  <link rel="stylesheet" href="app/dbc6e533.app.css">
</head>

<body iact-set-body="{{$state2.current.name}}" ng-cloak ng-controller="IndexCtrl as Index" ng-class="{'register-page' : $state2.current.name === 'register.one'}">
  <iact-progress-bar ng-if="$state2.current.name === 'main.post'" class="progress-bar progress-bar--page"></iact-progress-bar>
  <div class="alert-block" alert-box></div>


  <loader ng-show="showLoader"></loader>
  <div class="ui-view-container">
    <div ng-cloak ui-view></div>
    <div ng-cloak ui-view="layer" class="ui-view-layer"></div>
  </div>


  <!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
        your browser</a> to improve your experience.</p>
  <![endif]-->
  <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
  <![endif]-->
  <script src="https://cdn.socket.io/socket.io-1.3.7.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB5s1GO-SwKumRL-es-SHnGYwom55LpJyM&libraries=places"></script>
  <script src="app/9b5d1095.vendor.js"></script>
  <script src="app/b49bc91c.app.js"></script>
</body>

</html>

是否有什么做错了，还是我应该只为爬虫进行预渲染？

【问题讨论】：

我遇到了同样的问题，奇怪的是，当我获取和渲染谷歌时，谷歌确实向我显示了“谷歌看到的”页面，这令人困惑，因为当它只是获取（和存储在缓存 btw...) 没有加载模板。
Fetch as Google Webmaster tools的可能重复

标签： javascript angularjs seo

【解决方案1】：

React 应用程序的相同问题已在另一篇文章中讨论过，基本上您可能想使用 polyfills 并在 IE11/Chrome v41 中进行一些调试，以查看在 Google Crawler 渲染引擎下哪些 API 可能被破坏

reactjs - fetch as google displays blank page only

【讨论】：