We already talked about the implementation of Angular Universal in a previous article

1. Download the sample example from here to play.
2. Run the sample application in http://localhost:4200/
3. Right-click on the app and go to view source.

Assuming you already have an angular universal application.

Let's talk about deploying the angular SSR application in IIS OR Nginx Server

Execute the command given below to build an Angular app with the express server

npm run build:ssr

Let's look at the dist folder

Note: This will generate a dist folder with two subfolders, ‘browser’ and ‘server’.

sever contains the code that runs on the server-side when the application is being rendered, and browser contains the code that runs on the client-side when the application is being rendered.

How to deploy your angular universal application with IIS?

1. Copy the dist folder in the following manner i.e. server folder files must go to the root of your hosting server and the browser folder file location must be based on the "server.ts" file (Look at your angular code)

2. The browser folder file location must be based on the "server.ts" file (Look at your angular code)

Screenshot from sample example

3. Make sure to add web.config at the root of the hosting server.

   Notice: main.js path to iisnode module (If you are testing in a local machine or dedicated server Install IIS Node & URL Rewrite on the server.)

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <iisnode loggingEnabled="true" debuggingEnabled="true" />
    <handlers>
      <add name="iisnode" path="main.js" verb="*" modules="iisnode" />
    </handlers>
    <rewrite>
      <rules>
        <rule name="DynamicContent">
          <match url="/*" />
          <action type="Rewrite" url="main.js" />
        </rule>
        <rule name="StaticContent" stopProcessing="true">
          <match url="([\S]+[.](jpg|jpeg|gif|css|png|js|ts|cscc|less|ico|html|map|svg|webp))" />
          <action type="None" />
        </rule>
      </rules>
    </rewrite>
     <staticContent>
      <clientCache cacheControlMode="UseMaxAge" />
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <remove fileExtension=".otf" />
      <remove fileExtension=".webp" />
      <mimeMap fileExtension=".ttf" mimeType="application/octet-stream" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/x-woff" />
      <mimeMap fileExtension=".otf" mimeType="application/otf" />
      <mimeMap fileExtension=".webp" mimeType="image/webp" />
    </staticContent>
  </system.webServer>
</configuration>

4. (If local or dedicated server) In the IIS, go to Application Pools for the Website you created. Then change the .NET CLR Version to No Managed Code.

5. Give IIS_IUSERS Full Control of the root directory for your website.

6. Verify that your application is working by visiting the website in a browser and then navigating to view-source (You will notice <app-root>............</app-root> now showing all the child elements and dynamic meta tags are also visible)

How to deploy your angular universal application with NGINX server?

Thanks for reading!