Angular Universal app doesn't show server side when hosting in IIS

Question

I have an Angular Universal application. I build the application using Visual Studio code and the application works fine when I run the application using npm run build:ssr && npm run serve:ssr locally. When the page is loaded, I can see all the css , html and other related content when I view the source of the html page.Also, The dist folder has all the files needed to run.

But, when I copy the dist folder and deploy in an IIS website, it always shows the client side of the code. That means, when I 'view source' of the rendered html page, it has approot tag and other javascript files. What this indicates is that, it is showing the client package not the server side content. The IIS structure looks like this:

I have IISNODE , URL Rewrite are installed in the server. Server is Windows server 2016.

Note: I think the server works just fine. Because I am able to deploy some sample Angular Universal application in the same server and they loads server side content. My guess is that , this something to do with this particular application. unfortunately can't figure out.

Appreciate any help.

Thanks, Jaleel

Answer 1

You could follow the below steps to deploy the app in iis:

1)run the below command to check the app is running locally or not:

ng serve --open

2)Run NodeJs Command Prompt

3)Navigate to your Angular Project folder

4)Execute npm run build:ssr

5)You will see dist folder in your project folder

6)Go to your windows server and create an empty folder (name it ng-ssr for example)

7)Copy to dist folder into ng-ssr

8)Open ng-ssr/dist/server folder, you will find main.js file

9)copy main.js and paste it directly in ng-ssr folder

10)Create a web.conifg file in ng-ssr folder and add the below code in it:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>        
      <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))" />
                  <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" />
          <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" />
         </staticContent>      
    </system.webServer>
  </configuration>

11)Now your website folder must look like this

12)Create a Web Site in IIS

13)In the IIS, go to the Application Pool for the Web Site you created, change the .Net Framework Version to No Managed Code

Now you can access the site.

Deploy Angular Universal to IIS