I have an Angular app that i'm trying to set up in production enviroment. As i have read, Google now is able to crawl through AJAX pages. I'm checking how i'd work with Fetch as Google service. Though the home page is correctly rendered in all major browsers, Fetch as Google returns blank page with none of Angular's directives compiled and no errors. I am using HTML5 mode and ui-router
. Files are served by node.js app server (I have tried to serve files from nginx and result was the same) and all files are allowed by robots.txt
. Scripts are concatenated and minified. There are no errors in console.
Code returned by Fetch as Google service: !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>
Is there something that was done wrong or should I just go with prerendering for crawlers?