How to deploy Angular to production server using angular-cli and its new universal server rendering feature – SEO

This is how I deployed Angular to an production Azure server (IIS):

STEP ONE: Create an ANGULAR-CLI project. Instructions here: angular-cli

STEP TWO: Make it universal following this reference: universal-starter

Note: you can just clone this repository and bypass step 1

*How to fit one project into another:

1. Modify files that exist in both projects 1 and 2 to be exactly the same as project 2 (universal) and
2. Create files that does exist on project 2 and do not exist on project 1*

Alright, now you have a default universal project. You should be able to run npm run build:ssr && npm run serve:ssr and/or npm run build:prerender && npm run serve:prerender Note: if you can't run above command you should double check all files in your project to be like the repository at step 2.

STEP THREE:

Create a web.config file like this.

 <?xml version="1.0" encoding="utf-8"?>
    <configuration>
      <system.webServer>
        <webSocket enabled="false"/>
        <handlers>
          <add name="iisnode" path="/server.js" verb="*" modules="iisnode"/>
        </handlers>
        <rewrite>
          <rules>
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
              <match url="^/server.js/debug[/]?"/>
            </rule>
            <rule name="StaticContent">
              <action type="Rewrite" url="public{REQUEST_URI}"/>
            </rule>
            <rule name="DynamicContent">
              <conditions>
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
              </conditions>
              <action type="Rewrite" url="/server.js"/>
            </rule>
          </rules>
        </rewrite>
        <security>
          <requestFiltering>
            <hiddenSegments>
              <remove segment="bin"/>
            </hiddenSegments>
          </requestFiltering>
        </security>
        <httpErrors existingResponse="PassThrough"/>
      </system.webServer>
    </configuration>

STEP FOUR: Copy and paste web.config to dist folder root like that:

 dist
        browser
        server
        prerender.js
        server.js
        web.config

STEP FIVE: Change server.ts file in your project like that:

...
// const PORT = process.env.PORT || 4000;
const PORT = process.env.PORT || 8080; // <= I changed here
// const DIST_FOLDER = join(process.cwd(), 'dist');
const DIST_FOLDER = join(process.cwd()); // <= I changed here

... (continue)

STEP SIX Rebuild and copy everything from your /dist folder to your Azure website root.

Enjoy =)