What is Angular Universal?
Angular Universal is the technology that renders Angular applications on the server. By default Angular application executes in the browser, rendering pages in the DOM (client side browser) in response to user actions. Angular SSR executes at the server side, generating a static application bundle get bootstrapped on the client. It’s load very quick in slow devices and slow network area. Angular universal server side rendering is great to implement with your Application speed and performance and SEO friendly SPA.
Angular universal server side rendering will help your website SEO Friendly. Search engines web crawlers visit, this will be able to index you website’s full content that can be used on search engines.
Getting Start The Universal tutorial
First we will create a fresh new angular project. skip this step if already implemented
ng new project-name
After install the project run the application from project folder
Go to view source from browser after execute -> you will see it render from browser without your html content. For that will use Angular Universal (SSR).
ng add @nguniversal/express-engine # If you use mono repo then use the below command ng add @nguniversal/express-engine --clientProject [project name]
Next you will see create some new files and changes some files in your project. Use vs code editor for easily change detection
How to start up Angular Universal
follow the command below to execute SSR.
npm run dev:ssr
** Angular Universal Live Development Server is listening on http://localhost:4200, open your browser on http://localhost:4200 **
Angular is running in development mode. Call enableProdMode() to enable production mode.
How to test angular universal app working or not?
Test Angular Universal after run the project go page by right click Page View Source option. There you can see your all html content.
Hope this tutorial help your requirement. Please give your valuable feedback. If you have any kind of questions or issues about this article, please let me know.