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.