How to publish an Angular project to your hosting account

Angular is an application design framework and development platform for creating efficient and sophisticated single-page apps.

When you are ready to deploy your Angular 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

1. install the Angular CLI

npm install -g @angular/cli

2. create a workspace and initial application

ng new my-app

3. run the application in the development environment

By default, it will start the development server at

http://localhost:4200/

cd my-app
ng serve --open

4. 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/my-app folder under the project directory

ng build

5. navigate to the dist/my-app directory, archive all the folders and files under the path to .zip file

6. upload the archived .zip file to your hosting account via File Manager or FTP client

7. unzip the .zip file to the target site path

8. access your site URL to check the application

9. Routed apps must fallback to index.html

A static server routinely returns index.html when it receives a request for http://www.mysite.com/. But it rejects http://www.mysite.com/heroes/42 and returns a 404 - Not Found error unless it is configured to return index.html instead.

Merge the following code to your site's root web.config file.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Angular Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

10. access your site URL again to make sure everything works

Article ID: 2171, Created: May 22, 2021 at 3:09 AM, Modified: September 30, 2022 at 1:54 AM