angular 2 azure deploy refresh error : The resource you are looking for has been removed, had its name changed, or is temporarily unavailable
AngularAzureAngular2 RoutingAngular Problem Overview
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 ? :)
Angular Solutions
Solution 1 - Angular
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/Solution 2 - Angular
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>
Solution 3 - Angular
If anyone is still stuck with this i would like to add two things.
-
add the web.config to your src folder. In my case having the web.config in the root did not solve the issue.
-
Add it to your
.angular-cli.json
like so"apps": [ { "root": "src", "outDir": "dist", "assets": [ "assets", "favicon.ico", "web.config" ], ... } ],
Solution 4 - Angular
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"
],
Solution 5 - Angular
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
Solution 6 - Angular
For angular 10 on azure web app
Created web.config in assets directory (to prevent pwd error) and added it's replacement to angular.json build
assets:
"assets": [
"src/favicon.ico",
"src/assets",
**{
"glob": "web.config",
"input": "src/assets/",
"output": "/"
}**
],
<?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>
Solution 7 - Angular
I had this problem when user was clicking on navigation bar
> Replaced href=".... with routerLink="...
Solution 8 - Angular
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!