angular 2 azure deploy refresh error : The resourc

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 / redirects to /path1. When I run it locally (lite-server) everything works fine. I managed to deploy this app to an Azure web app. The app works OK BUT if I refresh the page when I m in /path1 or /path2 I get this error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

A possible approach is to implement url rewrite. I added a web.config file in my project

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

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

         <!-- check if its path1 url and navigate to default page -->
        <rule name="Path1 Request" enabled="true" stopProcessing="true">
        <match url="^path1" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

         <!-- check if its path2 url and navigate to default page -->
        <rule name="Path2 Request" enabled="true" stopProcessing="true">
        <match url="^path2" />
        <action type="Redirect" url="/index.html" logRewrittenUrl="true" />
        </rule>

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

In this case I can make a refresh without getting this error message.But any refresh redirects me to the default url. I refresh from /path2 and it redirects me to /path1 (default url).

Any thoughts to improve refresh ? :)

Answer 1

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 2

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 3

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/

Answer 4

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" ], ... } ],