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
About

Software developer living in the Philippines.

Posted in ASP.NET
2 comments 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. Chris Spanellis says:

    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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

Author

Harold Glenn P. Minerva
Software Developer / Tech Enthusiast
Living in the Philippines

View Harold Glenn Minerva's profile on LinkedIn

Instagram

Software Engineer - Seasonal and Range Trading Software. Magenta Trader is a powerful stock market visualization software that increases your probability of trading success.

Software Architect and Founder - Easyfis.com is a multi-tenant cloud-based Software-as-a-Service (SaaS) business app that caters to micro, small and medium trading businesses.

CTO and Co-Founder - We give your company the leverage by providing innovative software solutions products such as Point-of-Sales (POS), Financial Information System (FMIS), Payroll and DTR (HRIS), and many more.

%d bloggers like this: