If you already have experience with vue ssr or nuxt and think that you will find the same ease of implementation with angular universal aka ssr, you can close this article right now.

After I've read the documentation, I really thought it's an out of the box solution, plug and play or such, but boy was I wrong.

Anyways, let's get started. If you want to find the repo for an angular universal starter project, made ready for 2022, check this out.

Angular universal, out of the box, comes with some issues on it:

1. It duplicates the http requests
2. It has no clear way of sending data from the server to the client

LET'S GET IT ON!!!

With this starter you will have the following 9 useful features:

1. Prevent duplicate http requests on server and client
2. Use tokens to pass actual values computed on the server, to the client, at APP_INIT
3. Have a TransferStateService to use from in passing data from the server to the client
4. Have a middleware that points to an url of your choosing
5. Take values from .env file and pass them to the server and client
6. Have an ngrx store with beginning of a structure
7. Have implemented the angular-svg-icon module
8. Have the beginning of an scss structure and the way to import scss files in your components, without errors on the server
9. Have eslint setup on the project

I won't be writing anymore code on this, but you can find the repo here and I'll walk you trough the project in the below video.