# Angular Universal 13 Project Starter 2022

If you already have experience with  [vue ssr](https://ssr.vuejs.org/) or [nuxt ](https://nuxtjs.org/) and think that you will find the same ease of implementation with  [angular universal](https://angular.io/guide/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 ](https://github.com/mmswi/angular-universal-starter) 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](https://featuringcode.com/angular-universal-prevent-duplicate-requests) http requests on server and client
2. Use  [tokens](https://angular.io/api/core/InjectionToken) to  [pass](https://featuringcode.com/angular-universal-passing-server-data-to-client-in-appinitializer) actual values computed on the server, to the client, at APP_INIT 
3. Have a  [TransferStateService](https://brianflove.com/2020-06-05/angular-transfer-state/)  to use from in passing data from the server to the client
4. Have a  [middleware ](https://github.com/chimurai/http-proxy-middleware) that points to an url of your choosing
5. Take values from  [.env](https://www.npmjs.com/package/dotenv)  file and pass them to the server and client
6. Have an [ngrx](https://ngrx.io/docs) store with beginning of a structure
7. Have implemented the  [angular-svg-icon](https://www.npmjs.com/package/angular-svg-icon)  module
8. Have the beginning of an scss structure and the way to  [import scss](https://featuringcode.com/angular-universal-scss-imports-in-components)  files in your components, without errors on the server
9. Have  [eslint ](https://featuringcode.com/adding-eslint-to-your-angular-12-project) setup on the project

I won't be writing anymore code on this, but you can find the repo  [here](https://github.com/mmswi/angular-universal-starter) and I'll walk you trough the project in the below video.

<iframe width="560" height="315" src="https://www.youtube.com/embed/-8BuMVe6uis" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


