angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable

Question

I have an Angular 2 rc-2 app with basic routing implemented.The paths are /path1 which is the default path and /path2.The home path / redirects to /path1. When I run it locally (lite-server) everything works fine. I managed to deploy this app to an Azure web app. The app works OK BUT if I refresh the page when I m in /path1 or /path2 I get this error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

A possible approach is to implement url rewrite. I added a web.config file in my project

<?xml version="1.0" encoding="UTF-8"?>

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
        <clear />

         <!-- check if its path1 url and navigate to default page -->
        <rule name="Path1 Request" enabled="true" stopProcessing="true">
        <match url="^path1" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         <!-- check if its path2 url and navigate to default page -->
        <rule name="Path2 Request" enabled="true" stopProcessing="true">
        <match url="^path2" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         </rules>
        </rewrite>
    </system.webServer>
</configuration>

In this case I can make a refresh without getting this error message.But any refresh redirects me to the default url. I refresh from /path2 and it redirects me to /path1 (default url).

Any thoughts to improve refresh ? :)

Answer 1

You have to add web.config file to your root Angular2 app. That's how Azure servers (IIS Server) works.

Im using webpack so I put it on src folder. Don't forget to copy it to your dist folder when you depploy. I used CopyWebpackPlugin to setup my webpack to copy it.

This is the web.config file:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <clear />
                <rule name="Redirect to https" stopProcessing="true">
                    <match url="(.*)" />
                    <conditions>
                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
                    </conditions>
                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
                </rule>
                <rule name="AngularJS 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="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

It has 2 rules:

1st rule is to redirect all calls to https. Remove it if you don't use https.

2nd rule is to fix your problem. I got reference of 2nd rule here (thanks to user gravityaddiction from www.reddit.com):

https://www.reddit.com/r/Angular2/comments/4sl719/moving_an_angular_2_app_to_a_real_server/