54

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 ? :)

Improve this question

8 Answers 8

Reset to default
93

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Worked for me also, after changing the redirect to HTTP, since I am not using HTTPS for this site
This was a HUGE help. Thank you! I also deleted the HTTPS redirect, but only because we don't allow HTTP, so TCP port 80 isn't even open.
Thanks, but now I have a 404 to get /assets/i18n/en.json, how to make it work?
Hats off for giving credit to the Reddit user!
In addition to your answer, in package.json inside "scripts" I've appended: "copy-config": "cp src/web.config dist/", "build:prod": "ng build --configuration=production && npm run copy-config" and when I run: "npm run build:prod" web.config is being copied to the dist folder.
21

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>
Improve this answer

3 Comments

This worked great for me. In addition, in order to copy the web.config file to dist on ng build --prod, added "web.config" into assets on angular-cli.json file. I'm using Angular 5.2.9 with CLI 1.7.3
@danfer, am glad it was of help to you.
@Uttam, I am glad it was of help
14

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

Improve this answer

2 Comments

.angular-cli.json became angular.json, for the future visitors.
in angular 11: ` "assets": [ "src/favicon.ico", "src/assets", "src/web.config" ],` web.config in src folder worked for me.
6

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" ],
Improve this answer

Comments

3

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

Improve this answer

1 Comment

I'd not recommend doing that because it is workaround using HashLocationStrategy.
2

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!

Improve this answer

Comments

2

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>
Improve this answer

Comments

1

I had this problem when user was clicking on navigation bar

Replaced <a href=".... with <a routerLink="...

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.