Deploy Angular Universal to IIS

Question

I am having a problem deploying my Node.js to the IIS, in my web.config:

> <handlers>
>         <add name="iisnode-ng-universal" path="dist/server.js" verb="*" modules="iisnode" />
>     </handlers>

 <rule name="ng-universal" stopProcessing="true">
        <match url=".*" />
        <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{HTTP_HOST}" pattern="test" />
        </conditions>
        <action type="Rewrite" url="dist/server.js" />
    </rule>

I am getting this error:

image

This how my web files tree looks:

web files

I tried to give full permission to IIS_IUSRS and IUSR but it does not seem to work. Like this post suggested: iisnode encountered an error when processing the request

Answer 1

If you want to run your angular application with server-side rendering:

1-Create a new project:

ng new anguniversal

2-Enable Server-side rendering (SSR)

ng add @nguniversal/express-engine

STEP 1

Firstly execute the command given below to build an Angular app with the express server.

npm run build:ssr

Now you can see the dist folder in your project folder.

STEP 2

Create a new folder in your windows server (for example name it as angular-universal) and copy the dist folder from the project folder here

STEP 3

Copy main.js file from dist/anguniversal/server folder and paste it direct in angular-universal folder.

STEP 4

Create and open the Web.config file(in the angular-universal folder) and add the code to 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>

STEP 5

Install IIS Node & URL Rewrite on the server.

STEP 6

Add Website… in IIS.

STEP 7

In the IIS, go to Application Pools . for the Website you created (angular-universal). Then change the .NET CLR Version to No Managed Code.

Done, you can check the result.