Encountering a 404 error while using Angular HTML5Mode setting

I recently enabled pretty URLs in my Angular application by switching to html5mode.

However, whenever I try to refresh the page, I encounter a 404 error.

For instance, if I access my app through , everything functions as expected. But when I attempt to refresh the page or access a specific page like , I receive a 404 error.

Note:

  • During compilation of my application, I bundle templates into JavaScript files.
  • After compilation, my scripts (including templates) are placed in the build folder with the base tag in index.html set to "/".
  • I am utilizing Angular-ui-router for routing.
  • The backend is built on .NET technology.
  • The frontend and backend applications are completely separate and deployed on IIS.

I would greatly appreciate any suggestions for potential solutions or reasons behind this error.

Thank you

javascriptangular-ui-routerhtml5-historyangular1.6

Answer №1

Taking a moment to review your settings in the backend is crucial, especially when utilizing html5 history. In my case, I made sure to configure my .htaccess file accordingly (this is where you'll redirect all requests to your root index.php or index.html file). Here's what my .htaccess looks like:

RewriteEngine On  
  # If an existing asset or directory is requested go to it as it is
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^ - [L]

  # If the requested resource doesn't exist, use index.html
  RewriteRule ^ /index.html

If this solution doesn't resolve your issue, I recommend checking out this insightful [article] for further guidance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: The property 'target' cannot be read

I'm seeking to enhance a value by pinpointing a specific element within a loop. <div *ngFor="let item of items; let i = index"> <ion-button (click)="increment(i)"> <ion-icon name="add"></ion ...

javascriptreactjsangulartypescriptloops

using async.waterfall with async.apply

Here is a code snippet that I am working with: async.waterfall([ // Read directory async.apply(fs.readdir, '../testdata'), // Load data from each file function(files, callback) { async.each(files, loadDataFromFile, callback); } ], ...

javascriptnode.jsnode-async

Pressing the reset button on a basic calculator

I am experiencing an issue with my calculator. It works fine initially, but after using the reset button, it stops functioning properly. Currently, I only have the multiplication set up as I debug this problem. I am new to JavaScript and would appreciate a ...

javascriptjqueryhtmlcss

Mastering various techniques for creating styles with makeStyles in React JS Material-UI

As a newcomer to React JS and Material UI, I am experimenting with creating various styles of buttons. Each button should have a unique appearance based on attributes like name= submit, ok, cancel, confirm, alert. App.JS import CssButton from './con ...

javascriptreactjsmaterial-uimakestyles

Issue encountered while initializing session_start() in PHP REACTJS AXIOS

https://i.sstatic.net/bSelX.pngWhen attempting to log in to my web application, I encountered an issue where the session is not opening after entering the correct email and password. Strangely, there is no PHPSESSID present in the console > application. ...

javascriptphpreactjssessionaxios

Utilize middleware nesting in Express.js

I am interested in implementing middleware to validate requests based on a RAML file. Below is an outline of my current code: // dependencies let resources = require('osprey-resources'); let errorHandler = require('request-error-handler&apo ...

javascriptnode.jsexpressmiddleware

What is the best way to display a Vuex state based on a function being activated?

I have noticed similar questions on this topic but couldn't find a solution, so I decided to create my own. Here's the issue: I have an array named "allCountries" in the state, initially filled with 250 country objects. I am successfully render ...

javascriptvue.jsvuex

Adding a click function to a div individually when they share the same class in HTML

My goal is to include 4 unique divs inside a timeline container: This is how I envision the structure: <div id="timeline" > <div class="timeline-bar t-1"></div> <div class="timeline-bar t-2"> ...

javascriptjqueryhtmlcss

Steps for sending a form with jQuery's submit method1. Start

Below is the jquery code that I have written: $(document).ready(function () { $('.bar_dropdown').on('change', function() { console.log("dropdown changed") $('#bar_graph_form_id').submit(function(e ...

javascriptpythonjquerydjangoajax

What is the best way to display a Bootstrap alert above all other elements on the page?

I need help with adjusting the placement of my bootstrap alert. Currently, when the input box value is not valid and the button is clicked, the alert shows up below the input box. I would like it to appear in the middle of the page, on top of the text box. ...

javascriptcsstwitter-bootstrapbootstrap-5alert

Unable to display "xyz" using console.log() function upon button click

Why isn't the JavaScript function being executed in this code snippet? <form> <select type="text" name="month" id="month"> <option value="01">January</option> <option value="02">February</option> ...

javascripthtmlajax

Parsing the CSV file contents according to the specified columns

Currently, I'm involved in a project using AngularJS where I need to extract data from a CSV file column by column using JavaScript. So far, I've successfully retrieved the CSV data and displayed it in the console. While I've managed to sepa ...

javascriptangularjs

Showing Variables in JavaScript

<!DOCTYPE HTML> <html> <body> <button onclick="question++">Increment</button> <script> function test() { var question = 0; } </script> </body> </html> Qu ...

javascripthtmlwebincrement

Why does the socket.io output only appear after I refresh the page?

Feeling stuck and seeking guidance. After following tutorials, I was able to develop a basic user registration/login app in nodejs/express with the addition of a socket.io chat feature. Upon user login, they are directed to the real-time chat page where i ...

javascriptnode.jsexpresssocket.ioundefined

If the checkbox is selected, include an anonymous email in the field and conceal the field

I am looking to enhance my Feedback form by providing users with the option to submit feedback anonymously. However, my CMS requires both Email and Name fields to be mandatory. To address this, I am considering adding a checkbox that, when selected, auto ...

javascriptjqueryforms

Unforeseen outcomes of JavaScript when using the let and var keywords

In JavaScript, when using the var keyword to declare a variable, the JS engine assigns a default value of "undefined" at creation stage. console.log(message); // undefined var message = "My message"; However, with the let keyword: console.log(message); ...

javascript

Encountering a React.js issue when attempting to update data

When attempting to update fields with a given drugid, an error occurs. For example, selecting drugid as 1 and clicking the update button results in an error message stating 'localhost:8081/drug/1' not found. In the MongoDB database, there is also ...

javascriptnode.jsreactjsexpress

Preventing users from copying and pasting information from my form by implementing javascript restrictions

I'm looking for a solution to prevent users from copying and pasting in my form using JavaScript. I want to restrict the ability to paste or copy any content into the form. Any assistance would be greatly appreciated! ...

javascripthtml

Creating a custom directive in AngularJS that utilizes an event listener

I am currently working on designing a custom directive that includes a text box. When a user clicks a button, the text box should expand and become focused. If the user then clicks away from the expanded text box, it should minimize, disappear, and display ...

javascriptjqueryangularjs

Error: Child component received an undefined prop

Within my parent component, I have three child components. The first child component is a form that, upon submission, passes data to the second and third child components through props via the parent component. However, in one of the child components, the ...

javascriptvue.jsvue-componentvue-props