Angular2 App: Fetch as Google doesn't load page content

Question

I am working on Angular2 based web app. I used Angular CLI to generate app and then to build it for prod. I have hosted website on AWS S3 & Cloudfront. When I use 'Fetch as Google' tool from the webmaster, it shows only Loading....

Isn't Googlebot able to crawl my website?

Answer 1

had a similar issue. I believe Google-Bot do not support modern JS. I simply activated all shims recommended by angular.io see https://angular.io/docs/ts/latest/guide/browser-support.html and added in the script header:

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

If you really need all of them I'm not sure, but I need support for older IE anyway.

If this works for all Searchbots is very unclear, if you have to support them you can try https://prerender.io/. However they are also just able to render it with the shims

Hope this helps.

Answer 2

First this was talked about at NG-Conf 2018 Apr For the slides click here

Looking at the source code of the Angular.io here is how the angular guys do this according to the slides

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

Add the above script in the HEAD section of your index file.

Worth to mention that if you go with the answer of just adding a CDN you most probably are loading a script that is not needed for most of the modern browsers to those browsers as well and should be avoided.

Answer 3

Since your frontend isn't being served by any server side language, I'd recommend using Angular2-Universal to serve a static HTML site on initial load.

You can checkout their quickstart guide and get it working pretty fast.