Error message displayed when refreshing a page using ngRoute: "Page cannot be found."

Having an issue with angularjs ngRoute for routing a single page application. When attempting to reload the page at localhost/about or localhost/blog, I receive an error message stating "Cannot GET /about". How can this be resolved?

Below is my router configuration:


var myApp = angular.module('myApp',['ngRoute']);
myApp.config(['$locationProvider','$routeProvider',function($locationProvider,$routeProvider){
    $locationProvider.html5Mode(true);
    $routeProvider
        .when('/',{
            templateUrl: 'views/pages/home.html',
            controller: 'homeCtrl'
        })
        .when('/about',{
            templateUrl: 'views/pages/about.html',
            controller: 'aboutCtrl'
        })
        .when('/contact',{
            templateUrl: 'views/pages/contact.html',
            controller: 'contactCtrl'
        })
        .when('/blog',{
            templateUrl: 'views/pages/blog.html',
            controller: 'blogCtrl'
        })
        .otherwise({redirectTo: '/home'});
    }]);

Solely utilizing Angular for this setup.

Answer №1

This snippet of code is the reason for the issue

$locationProvider.html5Mode(true);

If you set it to false, a # will be added to the start of every URL, causing the server to display the index page no matter which specific page is being reloaded.

Answer №2

It seems like you are currently utilizing server routing instead of AngularJS routing. By default, AngularJS utilizes the route after the symbol # to navigate URLs. For instance, http://localhost:8080/#/about.

Furthermore, you have the option to implement HTML5 routing by using

$locationProvider.html5Mode(true)
, which follows the routing pattern that appears to be in use here http://localhost:8080/about.

Answer №3

The AngularJS routing documentation lacks clarity on the various routing modes it operates in. It discusses Hashbang and HTML5 mode, but fails to provide a comprehensive explanation of all three modes:

  • Hashbang Mode
  • HTML5 Mode
  • Hashbang in HTML5 Mode

It seems that the current issue stems from using HTML5 Mode, which is not compatible with your browser as pointed out by @Mumpo.

A recommended update would be:

$locationProvider.html5Mode(false);

This change will switch to Hashbang Mode, adding a # sign before your URLs for compatibility.

For more detailed insights into these routing modes, please refer to this Stackoverflow thread here. Hopefully, this provides some clarity.

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

Searching for text within a PDF document using the Internet Explorer version 9 browser by

When a link is clicked in our application, it opens a new window with a secure PDF file. We are looking to validate this using Selenium in Ruby. However, we encountered an issue in IE9 where there is no HTML/DOM element for validation. We were able to suc ...

Is it possible for CKEditor Plugin to extend allowedContent to elements further down the hierarchy, or is there a way to deactivate the MagicLine for specific elements?

I am in the process of developing a Drupal module that is inspired by the CKEditor Accordion Module, but with a twist of using Bootstrap 4 instead. The generated HTML markup by this module looks something like this: <section class="accordion" id="Acco ...

In React Js, the state is being updated correctly when console logging, however, the user interface is not reflecting

Recently, I encountered an issue with updating the UI after clearing the input states in my object. Despite setting the input values to empty strings upon clicking the clear all button, the UI does not reflect these changes as expected. The initial state ...

Exploring the process of querying and modifying subdocuments in MongoDB

As I work on updating a subdocument in MongoDB with Express, I have a specific route set up to find the exact object for updating. Currently, I am only able to replace the entire document with a new one. Is it acceptable to keep it like this or is there a ...

The AJAX call for fetching logged in users is coming back as undefined

Hey there! I'm currently diving into the world of AJAX and am working on enhancing the user experience on my admin system. One thing I want to achieve is to update information like online users, messages, tasks, etc. every 30 seconds or so (for testin ...

Ways to stop express from running following routes?

Recently, I have been immersing myself in learning express routing and decided to build a test server to experiment with different express routes while also delving into express-handlebars. Here are the routes that I currently have set up within my applic ...

Leveraging datatables for efficient table searching in Asp.net MVC

When using datatables to search a table, I encountered an issue where adding another table row caused some problems as datatables requires the same number of rows and columns. Is there a workaround for this? I really want to utilize datatables but also nee ...

Creating an array using Vue.js

When I initialize a Vue data array like this [0: Object, 2: Object];, the console log in Vue shows the array as [0: Object, 1: undefined 2: Object];. This causes issues when iterating through with 'v-for="cell in row.cells"' as it results in tryi ...

Using Vue to pass an array of rules to a child component

Currently, I am passing a set of props called "propSet" to a child component. These props are computed and detect an 'edit mode' boolean that changes accordingly. The "propSet" defines the following form input props: color, filled, dense, outlin ...

The jQuery ajax function functions flawlessly on a local environment, but encounters issues when used on a

After spending the entire day researching this issue, it appears to be a common problem without a solution in sight. The challenge I am facing involves using jquery's $.ajax() function to update database values through a service call. While it works ...

Personalized AWS Cognito: Strategies for Tailoring Input Field Designs

MY CURRENT CHALLENGE: Within my Vue application, I am utilizing the AWS authenticator for managing login and signup processes. However, customizing its style has proven to be difficult due to the structure being built with shadow DOM elements. https://i. ...

What steps can be taken to prevent an event from being triggered once it has already started but has not yet concluded?

Let's talk about the navigation bar on the website. Clicking on it toggles the menu holder to slide in and out from the side. It's a simple interaction. The bar contains an icon with the text 'MENU'. When you open the menu, the icon cha ...

Example of Utilizing Google Places API

The Issue I've been struggling to make this google maps API example function correctly. Even after directly copying the code from Google's website, the example fails to display properly. For instance, the map doesn't show up, the search bar ...

What is the hostname that npm install directs to?

My task is to set up multiple Node.js packages using npm on a standalone server that does not have direct internet access. I am able to specify an IP Address and port for access. When executing 'npm install' from the command line, where can I f ...

Unable to use model.find() in post findOneAndUpdate hook for Mongoose

Introduction In Mongoose, I am facing an issue with a post findOneAndUpdate hook where I need to perform a database query. Specifically, when trying to execute a .find() operation on another model, I encounter the following error: Error Description Typ ...

What is the best way to conduct end-to-end testing on an Amazon Linux AMI?

Running end to end tests using Protractor has been smooth in Chrome and Firefox on Ubuntu. However, I encountered issues with PhantomJS as it could not locate the elements. My Angular version is v1.2.15. My aim is to test on an Amazon Linux AMI, so either ...

Generate a unique class for each img element randomly

Is there a way to assign each image a unique random class instead of giving all the images the same random class? Any help would be appreciated. $(document.body).ready(function () { bgImageTotal = 5; randomNumber = Math.round(Math.random() * (b ...

extract individual components from the google books api

It has been quite a while since I last dabbled in JavaScript, so I decided to embark on a project creating a "bookcase" to organize the books I have read and those I still want to read. One challenge I encountered was figuring out how to separate the eleme ...

Ensure that all input fields on the webpage are validated when clicked using jquery

Having just embarked on my journey with jquery, I am giving it my all. Within my asp.net mvc project, there is a page filled with x-editable inputs. I decided to create a simple button: <input type="button" class="btn btn-info" id=& ...

Vue component failing to re-render after data modification

I'm a Vue beginner and I am attempting to showcase a list of "notes" that should update once a button is clicked (I have manually set the value to add for now). However, after adding a new item to the array, the changes are not reflected on the user i ...