If you are hosting an Angular 2+ application in an Azure Web App you may see the following error when you force the browser to refresh a page or when you try and  hit a URL directly…

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.”

This only shows up when the site is hosted in Azure, local development works fine

To avoid the issue, you could use HashLocationStrategy and include  a # in all of your angular routes but that doesn’t really fix the issue.

To make angular routes without hashes work in Azure the same way they do in your local development environment, you need to configure IIS to rewrite all requests as root. This lets Angular handle the routing.

To do this, add a Web.config file to your site’s root folder with the following contents:
















This web.config file should go into the ‘src’ folder of the Angular app

Finally, after you add the web.config file to the src folder of the Angular Application, you need to update WebPack to include it. If you are using the angular-cli update the angular-cli.json file and inlcude web.config in the assets section as shown below

{
“$schema”: “./node_modules/@angular/cli/lib/config/schema.json”,
  “project”: {
    “name”: “inspinia”
  },
  “apps”: [
  {
    “root”: “src”,
    “outDir”: “dist”,
    “assets”: [
      “assets”,
      “favicon.ico”,
      “web.config”
    ],
    “index”: “index.html”,
    “main”: “main.ts”,
    “polyfills”: “polyfills.ts”,
    “test”: “test.ts”,
etc….
 
After this change, refreshing a page hosted in Azure should work fine.
 
 

Leave a Reply

Close Menu