Googlebot fails to render app (used to work without server rendering)

[Flood]

I'm submitting a ... (check one with "x")

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

This is a copy from angular/angular-cli#5773 but the issue is not in Angular-CLI, therefor I'm creating a new issue here.

An app produced by angular-cli used to be properly rendered by googlebot (without any server rendering involved, I have snapshots in the google search console properly rendering my landing page, from a month ago).
It now fails on my app, and on a fresh starter app from angular-cli 1.0. It only shows "Loading...", i.e. the content of but fails at bootstrapping the app. app works! gets properly displayed on the real website but not by googlebot.

I am building the app with the following flags: ng build --prod --aot --no-sourcemap

Versions.

node: 6.9.5
os: linux x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

Repro steps.

Pull latest angular-cli, build, and deploy to app-engine

Test page via Google's speed test / mobile friendly tools:

https://developers.google.com/speed/pagespeed/ or
https://search.google.com/search-console/mobile-friendly

[Flood]

I've just read this. Feels bad to add es6-shim just to fix this problem.

https://productforums.google.com/d/msg/webmasters/-rdfd3imgbQ/4zYkR-5vHQAJ

[vikerman]

Is anything needed to be fixed in Angular?

[Flood]

Hi @vikerman, I think it's a bug in Angular. Google still doesn't render my application but works in all major browsers/phones.

[kemaltulum]

Hi, I am living the same problem. Is the problem related with the es6-shim? Do we need to include it manually? And how?
Morever, as an extra info about the situation, I got the error TypeError: undefined is not a function (evaluating 'Object.assign({},t,e)') when I try prerender for my website. I had the idea that this problem is related with that googlebot do not support ES6 syntax, just as PhantomJS used by prerender.
Please, help, at least, showing some way to add es6-shim to angular4 project.

[kemaltulum]

I desire to share the solution that has worked for me. I had created the angular project with angular-cli. Es6-shim imports in src/polyfills.ts were commented out. Removing comment tags made the trick for me.

[tdat00]

Thank you @kemaltulum Your solution works well for me :)

[mbn18]

after upgrading to Angular5, Googlebot failed to render my website and the result had catastrophic impact on the indexing. Even though Universal provided a well formed page.
The googlebot render result was the site skeletal with no content.

From Google doc

Googlebot uses a web rendering service (WRS) that is based on Chrome 41 (M41).

Knowing this I opened the site with an old chrome (v43) and immediately noticed the error in the console.

ERROR TypeError: commands.find is not a function
That was originated from esm5/router.js

As mentioned before, enabling the Es6-shim at src//polyfills.ts fixed the problem

[Seanmclem]

I desire to share the solution that has worked for me. I had created the angular project with angular-cli. Es6-shim imports in src/polyfills.ts were commented out. Removing comment tags made the trick for me.

there is no longer an es6 shim polyfill in Angular 6. What would I do then?

[antgel]

@Seankps Did you ever find a workaround? Moving to Angular Universal for this seems like a lot of work. Cc @schurder

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}