Navigating with Angular Routes leads to a 404 error page

I am facing an issue where Angular is unable to find the content on valid links and returns a 404 error. Below is the configuration of the routes:

  $routeProvider.when('/', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/home', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
  $routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
  $routeProvider.when('/products', {templateUrl: 'partials/products.html'});
  $routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
  $routeProvider.when('/order', {templateUrl: 'partials/order.html'});
  $routeProvider.when('/404', {templateUrl: 'partials/404.html'});
  $routeProvider.otherwise({redirectTo: '/404'});

For instance, a link (

<a href="#/menu/{[{menu.id}]}" translate >SEE</a>
) pointing to /menu/45122245 works in /menus/ view but not in /home/ (leading to a 404 error).

Despite using the same URL and object with the same ID, I am unsure of what could be causing this issue. If you require any additional code or information, please let me know :)

javascriptangularjs

Answer №1

Perhaps my response to this post is a bit delayed, but I still believe that the solution provided below should solve the issue at hand:

angular.module('moduleName')
..config(['$compileProvider', '$routeProvider', function ($compileProvider, $routeProvider) {
 $routeProvider.when('/', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/home', {templateUrl: 'partials/home.html'});
  $routeProvider.when('/menus', {templateUrl: 'partials/menus.html'});
  $routeProvider.when('/menu/:menuId', {templateUrl: 'partials/menu.html', controller: 'ShowMenuCtrl'});
  $routeProvider.when('/products', {templateUrl: 'partials/products.html'});
  $routeProvider.when('/product/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drink/:productId', {templateUrl: 'partials/product.html', controller: 'ShowProductCtrl'});
  $routeProvider.when('/drinks', {templateUrl: 'partials/drinks.html'});
  $routeProvider.when('/order', {templateUrl: 'partials/order.html'});
  $routeProvider.when('/404', {templateUrl: 'partials/404.html'});
  $routeProvider.otherwise({redirectTo: '/404'});
}])

.run(['$location', function ($location) {
    if ($location.path() === '' && $location.$$absUrl.indexOf('/partials') > -1) {
        $location.path('/home')
    }
}]);

Answer №2

When using Angular, it is necessary to indicate the base URL in your main HTML file's header unless html5Mode.requireBase is disabled in the html5Mode definition object provided to $locationProvider.html5Mode(). This ensures that relative URLs are consistently resolved based on the specified base URL, regardless of the initial document URL.

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

Choose images at random from an array within a React Native application

I've been working on a feature that involves randomly selecting an image from an array of images. However, I keep running into the issue of getting an "invalid props source supplied to image" error. My goal is to display a different random image each ...

javascriptarraysreactjsreact-native

Using Bootstrap 4 to Filter Cards by Title and Tag

I'm attempting to develop searchable cards using HTML, JavaScript, and Bootstrap 4, but I'm facing issues with my code. My goal is to filter these three cards using a search bar, based on their title (h5.card-title) and tags (a.badge). Below is ...

javascriptjqueryhtmlbootstrap-4

Determine Distinct Values for JSON Objects with JQuery

My json data is structured like this: var Data = [{"Name":"a1","ID":"b1", "year":"2011"}, {"Name":"a2", "ID":"b2", "year":"2012"}, {"Name":"a3", "ID":"b3", "year":"2012"}, {"Name":"a4", "ID":"b4", "year":"2010"}]; I want to present the data in the foll ...

javascriptjqueryjson

ESLint flagging "Unexpected tab character" error with "tab" indentation rule enabled

Currently, my ESLint setup includes the Airbnb plugin (eslint-config-airbnb) along with the Babel parser. I recently decided to enforce the rule of using Tab characters for indentation instead of spaces. This is how my .eslintrc file looks like: { "p ...

javascriptbabeljseslintindentationeslint-config-airbnb

Enabling withCredentials in Angular 6 for every HttpClient request is crucial for maintaining consistent authentication and

Is there a method to set { withCredentials: true } as the default for every httpclient call, instead of having to add it manually each time? import { HttpClient } from '@angular/common/http'; ... constructor(private httpclient: HttpClient) { } ...

javascriptangularhttprxjsapache-commons-httpclient

Preserving the HTML format of a string stored in MongoDB: Best practices

Currently, I am utilizing AngularJS for my frontend and mongodb for backend database management. For post editing, I rely on textAngular. When creating a new post, such as a service agreement, textAngular automatically adds formatting using HTML tags. &l ...

htmlangularjsmongodbformat

Access the system using the admin user credentials and then proceed to log in as an employee user

Hey, I'm currently delving into the intricacies of the CodeIgniter framework, focusing on a project centered around an admin/employee login system. So far, I've managed to set up a functional login form that successfully authenticates users befo ...

javascriptphpmysqlcodeigniter

The `appendTo` function in Ajax is used to swap out the current element

I have been working on sending form data to a Servlet using JQuery and then receiving the response from the same JQuery. Check out the code snippet below. <%-- Document : index Created on : Feb 23, 2015, 8:18:52 PM Author : Yohan --% ...

javascriptjqueryhtmlajax

Exporting data acquired from a MongoDB query using Node.js

I am currently working on exporting the contents of a MongoDB collection by using exports.getAllQuestions = async function (){ MongoClient.connect(url, function(err, db) { if (err) throw err; var dbo = db.db("Time4Trivia"); ...

javascriptnode.jsmongodbpromise

Angular-meteor tutorials have a method known as '/parties/insert' that is already clearly defined and explained

I am currently diving into meteor + angular and enjoying learning through ! As I was working on the 3-way data binding section, I created a folder named collections within the socially folder. In this folder, I made a file called parties.ts where I added ...

angularjsmeteortypescript

Step-by-step guide on linking an HTML file to a SQL database using Node.js

I am currently working on integrating my SQL database with an HTML file for my website. I've come across suggestions to utilize Node.js for this task, but I'm a bit confused on how exactly to incorporate Node.js into my HTML and integrate it with ...

javascripthtmlmysqlnode.js

Looking to duplicate a row of input fields while maintaining the same validation rules as the original row?

form <form action="assign_web_menu_action.php" method="post" name="form1" id="form1" > <table id='menuAssign'> <tbody> <tr class="clone_row"> <td> <input type="text" name="menuname[]" id="menuname1" ...

javascriptphpjquerytwitter-bootstrapplsql

The ng-repeat directive in my Angular app's div element is being displayed as a comment

After spending several days searching, I have yet to find a solution for my issue. It seems to be specific to the code I'm working with in Angular 1.6. I apologize for the format of my post, as this is my first time seeking help on stack overflow ...

htmlangularjsangularjs-ng-repeat

Step by step guide on enabling link routing on a Material UI list item, excluding only one specific button within the list item

I am facing an issue with a component containing ListItem components from material ui. Each ListItem has a button, and the entire listitem should be clickable to route the app somewhere. However, when clicking the delete button, it also routes the app to ...

javascriptreactjsmaterial-uireact-router-dom

Utilize a unique method of accessing objects through a combination of an object along with two specific

I am looking to create a function that combines an object, a path in a variable, and another path, similar to what is described in this StackOverflow post, but with 3 different components. Here is a simple example to illustrate my goal: I want the combine ...

javascriptstringtypescriptobject

Angular: Design dependent on attributes

Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...

javascriptcssangular

Displaying various data sets from data tables created using Ajax on Highcharts

I am currently working on integrating multiple data series into Highcharts' plot. I want to retrieve the data from an ajax self-calling function, which would allow for almost real-time updates to the charts without redrawing the entire chart each time ...

javascriptphpjqueryajaxhighcharts

Convert an array of objects into a single object with keys from each object in TypeScript

interface Item { slug: string; description: string; } interface Params { id: number; items: Item[]; } function test(params: Params) { const result = {}; for (const item of params.items) { result[item.slug] = "Hello"; } return re ...

javascriptarraystypescriptobject

CSS :hover activates only when the mouse is in motion

Looking at a simple example I put together: HTML <div id="sample"></div> CSS #sample { width:400px; height:400px; background-color:green; display:none; } #sample:hover{ background-color:red; } It's a hidden DIV tha ...

javascriptcsshoverstyles

The straightforward onclick action only functioned once

Looking for assistance: Can someone explain why this code snippet isn't functioning properly? It seems that the increment is only happening once. var player = document.getElementById("player"); var button = document.getElementById("button"); functio ...

javascripthtmlcssdom