How to publish an Angular Universal project to your hosting account

Programming, error messages and sample code > Node.js
Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client.
 
When you are ready to deploy your Angular Universal application to a remote server, for the simplest deployment, create a production build and copy the output directory to a web server. Please follow the instructions
 
npm install -g @angular/cli
ng new angular-ssr
cd angular-ssr
ng add @nguniversal/express-engine
4. run the application in the development environment
By default, it will start the development server at
http://localhost:4200/
npm run dev:ssr
5. open http://localhost:4200/ in your browser, and check if the page is rendering properly
"View page source"(shortcut is Ctrl + U) in the browser, right-click on the page or go to view-source:http://localhost:4200/ directly, find <app-root> node/tag, you will find it shows all the child elements, which is not like Angular SPA. Great, this means your SSR project works well.
6. design your application, test it with the development server, prepare to deploy the application
this will package all project files and related modules to a new dist/angular-ssr folder under the project directory
npm run build:ssr
7. to test production files on your local machine
By default, it will start the server at
http://localhost:4000
npm run serve:ssr
8. stop the local server to release in-use files, archive the dist folder and its sub-items to .zip file
 
9. upload the archived .zip file to your hosting account via File Manager or FTP client
If you use other NodeJS packages in your project, you will also need to package the entire node_modules folder and upload it to the server
10. unzip the .zip file to the target site path, i.e. site3
 
11. copy the main.js file from site3/dist/angular-ssr/server to site3
 
 
13. change the content of site3/web.config file to
<?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>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>
14. access your site URL to check the application