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 /

Answer 1

A simpler version of @Guilherme Teubl 's method. This worked for me perfectly.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular4" 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>

Answer 2

If anyone is still stuck with this i would like to add two things.

1. add the web.config to your src folder. In my case having the web.config in the root did not solve the issue.

2. Add it to your .angular-cli.json like so

   "apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config" ], ... } ],

Answer 3

In new version of angular add the config path to angular.json and because angular.json is in the app folder be sure to add it with src/web.config

            "assets": [
          "src/assets",
          "src/web.config"
        ],

Answer 4

I also faced this issue and got around this error by using following code:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule }   from '@angular/forms';
import { AppComponent }  from './app.component';
import { routing }       from './app.routes';
import {AgmCoreModule} from 'angular2-google-maps/core';
import { LocationStrategy, HashLocationStrategy } from '@angular/common';

@NgModule({
  imports: [ BrowserModule, FormsModule, routing, AgmCoreModule.forRoot() ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]
})

export class AppModule { }

You can learn more about HashLocationStrategy here : https://angular.io/docs/ts/latest/api/common/index/HashLocationStrategy-class.html

Answer 5

I ran into an issue where I had my angular.json file set up correctly with:

"assets": [
    "src/assets",
    "src/web.config"
],

but the web.config file was not being copied into the built dist/ folder.

I did not think about the fact that I was also using a custom webpack config file (extra-webpack.config.js) with a CopyPlugin plugin. Once I added the web.config path to my custom webpack config and re-built my project, the web.config file was there!

Answer 6

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/