In this article iam gonna explain you how you can add angular universal for server side rendering of your angular application. Angular universal generally helps us in server side rendering of your angular application

Step 1: Adding angular universal to your angular application

• In order to add angular universal you need to run following command by navigating to your angular project folder

/*Client project you will find inside angular.json file under projects json */

ng add @nguniversal/express-engine --clientProject ng-complete-guide-update

• Once above command finish running you will see certain files generated inside src folder that is src/app.server.module.ts

• Next make sure that you have package @nguniversal/module-map-ngfactory-loader installed run below command to install the same

npm install --save @nguniversal/module-map-ngfactory-loader

• In order use nestjs for server side rendering in your angular universal application you can use below command

ng add @nestjs/ng-universal

Step 2: Build and run your app using angular universal

• Go to package.json file you will see some new command added for example build:ssr run the command

npm run build:ssr

• Once above build command is completed run below command to serve the application using angular universal

npm run serve:ssr

• Once above command finishes running go to your browser and type url ”http://localhost:4000” you will see your angular application running using server side rendering