24819 Reads
Hello Developers, Today I will tell you about Angular Universal, I will give you a complete angular 11 universal template and I will tell you how to host your application on Microsoft IIS.

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.

Advantages of Angular Universal:

  • improve perceived performance, speed and the overall user experience
  • ensure that all search engines can access your content
  • HTML, CSS rendering in the server which benefits SEO
I created a template for Angular 9 Universal, you can download it from github.

What is included in this template:

  • Angular Universal 
  • NodeJs Express Server
  • Meta Tags
  • Angular Material
  • Bootstrap
  • JQuery
  • Font Awesome Pro
  • HTTP Interceptor
  • Api.ts class - for making API calls


download the zip file or run the following command: 
git clone https://github.com/mousaalsheikh/angular-11-universal-template

After downloading the template run the following commands:

npm i
ng serve --open

To deploy your website on IIS follow these steps:

  • Run NodeJs Command Prompt
  • Navigate to your Angular Project folder
  • Execute npm run build:ssr
  • You will see dist folder in your project folder
  • Go to your windows server and create an empty folder (name it ng-ssr for example)
  • Copy to dist folder into ng-ssr 
  • Open ng-ssr/dist/kinzi-ng-node/server folder, you will find main.js file
  • copy main.js and paste it direct in ng-ssr folder
  • Download the Web.config file from the following link and paste it in ng-ssr folder https://github.com/mousaalsheikh/angular-11-universal-template/blob/main/Web.zip?raw=true
  • Now your website folder must look like this
  •  
  • On the server; install URL Rewrite 2.1 and IIS Node
  • Create a Web Site in IIS 
  • In the IIS, go to the Application Pool for the Web Site you created, change the .Net Framework Version to No Managed Code
  • Done, your are ready to go :)