Hosting Angular 2 in Windows Azure Error “The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.”

You will definitely encounter an error “The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.” when your Angular 2 application is hosted in Windows Azure Web App Service.  This error happens when the URL is feed directly by the user in the browser URL address or if you use window.location.replace to redirect page.

To remedy the problem, you need to provide a web.config file into your Angular 2 application.  Put the web.config file at the root of the application folder.  The content in the web.config file are just redirect rules as seen below:

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

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

        <!-- ignore static files -->
        <rule name="AngularJS Conditions" stopProcessing="true">
        <match url="(app/.*|css/.*|fonts/.*|images/.*|js/.*|node_modules/.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="None" />
        </rule>

        <!-- check if its root url and navigate to default page -->
        <rule name="Index Request" enabled="true" stopProcessing="true">
        <match url="^$" />
        <action type="Redirect" url="/home" logRewrittenUrl="true" />
        </rule>

        <!--remaining all other url's point to index.html file -->
        <rule name="AngularJS Wildcard" enabled="true">
        <match url="(.*)" />
        <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
        <action type="Rewrite" url="index.html" />
        </rule>

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

The first rule is to by pass all static files, so just enumerate all the static files directory.  The second rule is to redirect root URL to your Angular 2 virtual route, as in my example it’s /home.  And the rest has to be redirected to your index.html file.

It is paramount that your index.html file contains <base href=”/” /> in the <head> tag to enable routing.

Thats it! happy Coding! and if you find this blog helpful, you can make the donation by clicking the Paypal button below.

Advertisements

3 thoughts on “Hosting Angular 2 in Windows Azure Error “The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.”

  1. Nice post! I have the same problem when I refresh the page and I m not in home route.I created a web.config but now I got this error

    systemjs.config.js:1 Uncaught SyntaxError: Unexpected token <

    My index.html includes the line below ,end it throws an exception
    System.import('/app').catch(function(err){ console.error(err); });

    Any thoughts? Thanx in advance!

  2. Hi,

    Have you tried this with an ASP.NET Core 1.0 project? This used to work fine for me against RC1, but now there is no support for those rewrite rules in the web.config file.

    It appears that it will be addressed in https://github.com/aspnet/BasicMiddleware, but nothing is release yet.

    My rewrite used to look like this:

    Thanks,

    Chris

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s