Blog / Incidents
Angular Web - 404 Error after Refreshing the Page
  • Sep 10, 2022
  • 75
  • 89

After deployment Angular and API on IIS, it's working fine unless I refresh the page. Once refreshed, the web encountered 404 error. In this article, I will explain how to resolve this.

Since Angular is a Single Page Application, which means there is only one single page to render different parts of the page to display content. Therefore, once user goes to a different page and refresh, the new URL is not recognized by Angular and throws the 404 error.

There are 2 ways to resolve this problem if you deploy your application to IIS. They are using HashLocationStrategy and using IIS URL Rewrite. The first strategy works for when you host your API in either same or different location of your Angular project. The second one only works if you host API and Angular separately.

1. HashLocationStrategy 

Step 1: Import HashLocationStrategy and LocationStrategy

In app.module.ts

import { HashLocationStrategy, LocationStrategy  } from '@angular/common';

Step 2: Include HashLocationStrategy and LocationStrategy in providers

In app.modules.ts

providers: [
    {provide : LocationStrategy , useClass: HashLocationStrategy}
  ]

2. RouterModule.forRoot

Use RouterModule.forRoot with the {userHash:true} argument.

In app-routing.module.ts

import { NgModule } from '@angular/core';
...
const routes: Routes = [//routes in here];
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(routes, { useHash: true })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. IIS URL Rewrite

Step 1: Download IIS URL Rewrite Extension from Microsoft

Follow below link to download and install the extension:

https://www.iis.net/downloads/microsoft/url-rewrite

Step 2: Create new web.config file and place in IIS folder:

Note: If your application is a subfolder in IIS, the URL in Rewrite part should be the subfolder name.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
  <rewrite>
    <rules>
      <rule name="Angular 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="/" />
        <!-- <action type="Rewrite" url="/yoursubfoldername/" /> -->
      </rule>
    </rules>
  </rewrite>
  </system.webServer>
</configuration>

Read more in this series:


Using cherry-pick to select specific commits for your Pull Request.1. Create a new branch based on the target of the Pull Requestgit branch cherry-branch origin/master2. Switch to a new branchgit chec ...

In Object-Oriented Programming, S.O.L.I.D refers to the first five design principle for the purpose of making software designs more understandable, flexible, and maintainable. The principles was first ...

1. The Situation:Error Message:&nbsp;Pulse Secure Application failed to load Java. Please install correct JRE version.Description: This issue happens when I'm using a M1 Mac with a correct version of ...

Accelerated Mobile Pages (AMP)&nbsp;focuses on delivering static content from publishers as quickly as possible and possibly rewards early adopters with a boost in rank. Let's see how to implement it ...

Below is how to decrypt/convert a Hex string value into text using VB.Net:Decrypting Hex string value to string in VB.Net Function HexToString(ByVal hex As String) As String Dim text As New Sy ...

After a month of publishing on Google Play, Jungle Words has made it to the Top Android Games To Try Out In April 2021. Please check it out!&nbsp;GameKeys.netGameKeys is a website which introduces gam ...

Centering HTML elements is an important aspect for anything involving designing with CSS. There are various methods of centering things, however, it also depends on the elements that you are working w ...

In the previous post, we have learnt about how to build a website using .Net MVC Core. This time we will create a mobile version for this application using the same .Net MVC Core project we created la ...

.Net Core is getting more and more popular recently due to the flexibility to work and be hosted in different environments like Windows, Mac, or Linux. In this article, we will learn how to build a .N ...