Overview
Why?
A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.
1. Add Angular Universal
In the terminal (from your project folder) run the following CLI command
ng add @nguniversal/express-engine
Installation will take a few minutes.
2. Serve
In the terminal run the following CLI command
npm run dev:ssr
Once compiled, the following will be displayed:
** Angular Universal Live Development Server is listening on http://localhost:4201, open your browser on http://localhost:4201 **
Open the browser, VIEW PAGE SOURCE and check that page has been rendered on the server
3. Build
In the terminal run the following CLI command
npm run build:ssr
A DIST folder will be created at the root of the project, containing SERVER and BROWSER folders.