If I understand it correctly, the difference between an usual HTML page and an Angular SPA is the following:
- HTML page: after a user request from browser to server, server delivers a HTML page with content,
- Angular SPA: after a user request from browser to server, server delivers a page with an empty HTML structure. Than AJAX request starts and server delivers a JSON with a page content.
What is the problem for Google with indexing of SPA? Is the problem, that JSON arrives later than Googlebot can wait (~5 seconds)?
Could somebody explain me this issue?
In general search engine spiders are simple. they parse the HTML on the page. If they come to a SPA (they don't know it's a SPA) and it has empty content... there's nothing for them to spider. This is a huge over simplification and also may not be 100% true today though.
Go to any Angular app and view source (not devtools, which is live) and you'll see what (in general) a search engine spider might see.
However, Angular has a solution for this! Angular Universal/SSR (Server Side Rendering)
https://angular.io/guide/ssr
For simple applications with no external data, you can pre-render all the routes so they exist as static HTML pages, which Angular will then use as a starting state when the app hydrates.
For more complex applications you can literally render the Angular pages server-side for SEO (and other) purposes via an Express server.
I have two simple Angular sites that do not require external data and use SSR to prerender all the routes for SEO purposes. https://lyricconverter.net - go there and view source and you will see everything is there from the start (although it is compressed for file size/speed)