Tips for defining a relative path in the base URL with AngularJS

Encountering an issue with AngularJS routes related to file paths. The folder structure is as follows:

js -> Angular -> 
css -> Bootstrap ->
index.html

Routes work fine when hosted on a server like IIS. However, copying and pasting the directive or sharing it in another location causes "Files not found" errors when run from the file system.

This is how my index.html appears:

<!DOCTYPE html>
<html>
  <head>
     <meta name="viewport" content="width=device-width" />
      <base href="" />
      <!--css-->
    <link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>
<body ng-app="myApp">
<div class="container-fluid">
    <!--content-->
    <!--menu tabs-->
    <div class="col-md-12" style="margin-top:10px;">
     <a href="/car"> CAR</a> <br/>
     <a href="/mobile">Mobile</a>
    </div>
    <!--angular template placeholder-->
    <div ng-view> </div>
    <!--footer-->
</div>
<!--js-->
<script src="./js/Angular/Lib/angular.js"></script>
<script src="./js/Angular/Lib/angular-route.js"></script>
<script src="./js/Angular/Config/ngRouteConfig.js"></script>

The 404 error occurs only when the base tag is included in the HTML. Removing it allows the page to render properly but disables angular routing.

A senior advised against specifying absolute paths, but I cannot find any instances of this in my index.html file.

How can I specify relative paths so that others with the same folder structure can run the demo app successfully?

Any help or suggestions would be greatly appreciated.

javascripthtmlcssangularjs

Answer №1

Have you attempted the following:

<base href="/" />

If your application is being deployed in the root context (e.g. ), ensure that the base URL is set to /:

<head>
  <base href="/">
  ...
</head>

If your application is being deployed in a sub-context (e.g. ), set the base URL to match the URL of the subcontext

<head>
  <base href="/subapp/">
  ...
</head>

Angular Docs $location/nobase

Angular Docs $location

When it comes to absolute paths, 

<a href="/car"> CAR</a>
isn't exactly an absolute path, but it does instruct the browser to look back at the ROOT directory of the web server for the route. So, if someone accesses the app from a sub-directory, this may lead to errors.

In such cases, they must set the 

<base href="to-wherever-they-put-the-thing" />
on their web server, OR you should advise them to run it within the ROOT directory of a web server.

Answer №2

Below is an example of how to use:

<!DOCTYPE html>
<html>
  <head>
      <meta name="viewport" content="width=device-width" />
      <!--
      <base href="" />
      -->
      <script>
        document.write('<base href="' + document.location + '" />');
      </script>

      <!--css-->
    <link href="./css/Bootstrap/bootstrap.min.css" rel="stylesheet" />
</head>

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

Is there a way to conceal a slice of a pie chart in HighCharts without excluding it from the legend display?

I've been searching everywhere for a solution to this issue, but I just can't seem to pinpoint where I'm going wrong. My goal is to initiate a pie chart using HighCharts with specific slices hidden as if they were "clicked" off in the legen ...

javascriptjquerypluginschartshighcharts

Event object not being passed to function in UIWebView Javascript onclick event

When inserting HTML dynamically using simple NSStrings and then loading it into a UIWebview, the following approach is taken: [NSString stringWithFormat:@"<div onclick=\"MyClickEvent(e);\"....some more text here"> A function is defined li ...

javascripthtmliosuiwebviewdom-events

Using Redis for caching in Node.js applications

As I delved into this module, I found myself pondering the use of callbacks within it. My understanding is that memory caching is designed to be speedy, providing instant results. So why introduce callbacks, which may imply a waiting period? If the resul ...

javascriptnode.jsredispromisecallback

Issue with ReactJS and Material UI: FlexGrow functionality malfunctioning

I'm currently grappling with the implementation of FlexBox, particularly in understanding how to effectively utilize flexGrow. Despite my efforts, I haven't been able to achieve the desired result as the background appears to only wrap around the ...

javascriptreactjsmaterial-ui

Ways to prevent image toggling when the mouse moves out of it or when the hover effect stops

I'm looking to toggle between two images on mouseover/hover and stop the toggling when hovering stops. Here is the HTML code I have: <div class="fader"> <img src="image1" /> <img src="image2" /> </div> This is the JQuery ...

javascriptjquerycsshover

Incorporating a timer feature into the code for my memory game

Seeking the optimal method to incorporate a timer into my memory game. This game comprises numerous squares, and when the user successfully completes it, a modal appears congratulating them on their win and providing an option to restart the game. The obj ...

javascript

Discovering whether an image contains a caption with the help of JavaScript

There are various websites that display captions on images in paragraphs, h1 tags, or contained within a div along with the image. I am interested in learning how to determine if an image has an associated caption using JavaScript, especially when the cap ...

javascripthtmlcss

Is it possible to refrain from using the object variable name in an ng-repeat loop?

When utilizing an ng-repeat directive to loop through an array, the syntax requires ng-repeat="friend in friends". Inside the template, you can then use the interpolation operator like this {{friend.name}}. Is there a way to directly assign properties to ...

javascriptangularjsangularjs-scopeangularjs-ng-repeat

Deactivate an option within an angularjs multi-select menu

Currently, I am utilizing an angularjs multiselect box which is displayed below: https://i.stack.imgur.com/w6ffN.png Here is the html code snippet: <select multiple ng-options="Language.LangID as Language.LangName for Language in AllLanguages " ng-mo ...

htmlangularjsmulti-select

React Hooks: In useEffect(), unable to modify parent component's state

Within my component, I have a form for users to input a title, description, and images. This component is nested within its parent component, and I want the form data to be saved if the user switches sections and returns later without losing their progress ...

javascriptreactjsreact-hooksuse-effectreact-component-unmount

jQuery: Select the parent element of a focused form input and apply styling

Recently, I encountered a situation where I have a form containing a DIV along with 3 INPUTS, each enclosed within a LABEL element. My goal is to alter the background image of the DIV whenever an INPUT receives focus. Due to limitations in navigating up t ...

jquerycssfocusbackgroundselector

Enhance React component props for a styled component element using TypeScript

Looking to enhance the properties of a React component in TypeScript to include standard HTML button attributes along with specific React features such as ref. My research suggests that React.HTMLProps is the ideal type for this purpose (since React.HTMLA ...

javascriptreactjstypescriptstyled-components

Displaying a list of values in Angular using data retrieved from an Entity Framework query

Is there a way to populate a list (ul li) with data from an array that is populated through Entity Framework code? Currently, I am able to populate an option dropdown successfully using the following code: <select class="form-control" name="Search" ...

htmlangularjsasp.net-mvcentity-framework

The resend email feature isn't functioning properly on the production environment with next js, however, it works seamlessly in the development environment

import { EmailTemplate } from "@/components/email-template"; import { Resend } from "resend"; const resend = new Resend("myApiKey"); // this works only in dev // const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_API_KE ...

javascriptreactjstypescriptnext.jsresend.com

Is there a way to automatically fill number fields by clicking on radio buttons using a JavaScript function?

Currently, I am facing an issue with a task that involves three elements: 1. Two Number fields (from standard class) that need to be populated dynamically. 2. A Javascript function designed to extract coordinates using geolocator. 3. A radio button which, ...

javascriptphpgravity-forms-plugin

When nodemon is executed, it encounters an "Error: Cannot find module" issue, indicating that it may be searching in the incorrect directory

I recently encountered an issue with my Node.js project that utilizes nodemon. Despite having the package installed (located in /node_modules), I am experiencing an error when trying to start my Express server with nodemon through a script in my package.js ...

javascriptnode.jsexpressnodemon

Meteor.js in conjunction with ScrollMagic TweenMax.to

Having trouble getting Meteor template.rendered to work with ScrollMagic I am trying to make this code function properly. if (Meteor.isClient) { Meteor.startup(function () { scrollMagicController = new ScrollMagic(); Template.StartAnimatio ...

javascriptjquerymeteorscrollmagic

Encountered an error while trying to initialize ng-init in Angular, specifically when including PHP

I have a PHP variable called $output. When I use echo json_encode($output), the output looks like this: [{ "title": null }, { "title": "a b c" }, { "title": "d e f" }, { "title": "d f g" }, { "title": "f g d" }] It appears to be corre ...

phpangularjsarraysjson

Is it better to use Asynchronous or Synchronous request with XMLHttpRequest in the Firefox Extension for handling multiple requests

As a newcomer to developing Firefox Add-Ons, my initial project involves calling an external API in two steps: Step 1) Retrieve data from the API. Step 2) Use the data retrieved in Step 1 to make another call to the same API for additional information. ...

javascriptajaxfirefox-addonxmlhttprequest

Accessing a document using protractor

It seems like every protractor example I come across online uses browser.get with a web URI. browser.get('http://localhost:8000'); I want to use Selenium to navigate to a local file:// path without needing a web server running. Just a simple HT ...

javascriptseleniumselenium-webdriverprotractor