I was actually applying for a job and one of the questions the employer asked was what I know about Angular and SEO. Well, not much, honestly. For the past 2 years I had been working on an internal project for a renewable energy company so there was no need for SEO. This is the same time I started learning Angular.
Anyways, the problem is that when you build your app, even for production, when the page is rendered and you view the page source, there is no content. That's because Angular injects the elements into the DOM via Javascript.
The solution would be to build each route's HTML with it's content on the server-side and then serve that to the visitor. Angular does have this built in, but takes some setting up. It's pretty straight-forward.
There's an even easier way now though, with ng-toolkit, and more specifically, @ng-toolkit/universal.
Simply run this command on a new project and you'll be all set up for server-side rendering:
ng add @ng-toolkit/universal
Read the ng-toolkit documentation for further instructions. Thanks for reading, enjoy!