we have a website running on Angular 16 hosted on AWS Cloudfront. Everything works fine so far but sometimes the Google crawler doesn't index it properly.
Then the crawled page in the google search console just show this source code:
<html>
...
<body>
<app>App is loading...</app>
<script src="runtime.123.js" type="module">
</script><script src="polyfills.234.js" type="module">
</script><script src="scripts.345.js" defer>
</script><script src="main.456.js" type="module"></script>
</body>
</html>This of course leads to a bad SEO ranking because nothing could be indexed. Is there a reason why the gogole crawlers sometimes are able to load the javascript part without any problem and sometimes not?
You'll want to try server side rendering. When the google crawler navs to the page, it's typically pretty quick - it won't wait too long for the loading to complete.
If you do SSR, the page should be rendered without any loading state.