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.

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

Having trouble retrieving information from the Redux store and displaying it in the user interface component

I'm currently diving into the world of Redux and working on a tracker app, but I've hit a roadblock that's had me stuck for days. Your help would be greatly appreciated. Thank you. store.js import { createStore, applyMiddleware, compose } f ...

Vue.js CSS class interpolation

Is there a way to apply CSS classes dynamically in Vue.js? {{ category.icon }} --> "icon1" I am trying to achieve the following: <i :class="category.icon" class="icon icon-"></i> The desired output should be: ...

Enhance ngx-bootstrap's tab content with ngx-scrollbar functionality

Currently in my project, I am utilizing bootstrap 4 and ngx-bootstrap. One requirement I have is to develop a component consisting of 2 scrollable divs that can be switched by tabs. I was hoping to demonstrate a sample application on stackblitz, but unfor ...

"Exploring Bootstrap 3: How to Work with Grids and Organ

Check out my custom HTML code: <div class="container"> <div class="row"> <div class="col-sm-3"> <img src="http://placehold.it/274x175"> </div> <div class="col-sm-3"> <img src="http://placeh ...

Experience the captivating AUTOPLAY feature of the mesmerizing FULLSCREEN SLIT SL

I am currently utilizing a slider that is functioning well, however I am encountering an issue with autoplay. Whenever I click on the navigation arrow or Nav dot at the bottom of the slider, the autoplay feature stops working. For more information, please ...

Utilizing Smarty Template: Combining <li> elements from separate <ul> tags for a seamless display

On my Prestashop website, I have implemented the "Advanced Homepage Product List" module. I removed the category names from the titles to have my items sorted without displaying the category names. Currently, this is how it appears: https://i.stack.imgur. ...

A helpful guide on using workbox to effectively cache all URLs that follow the /page/id pattern, where id is a

Looking at this code snippet from my nodejs server: router.get('/page/:id', async function (req, res, next) { var id = req.params.id; if ( typeof req.params.id === "number"){id = parseInt(id);} res.render('page.ejs' , { vara:a , va ...

Tips for utilizing the .clone() method within a loop or for each individual element of an array

Due to certain requirements, I find myself in a situation where I need to customize the invoice template within the software I use. The invoices are generated in HTML format, prompting me to consider utilizing Stylish and Grease Monkey for this task since ...

Error: Property '$filter' is not defined and cannot be read

Whenever a user clicks on a link, I display the json object on the UI. However, an exception is being thrown with the following message: TypeError: Cannot read property '$filter' of undefined Check out the demo here: http://plnkr.co/edit/5NOBQ3 ...

What are some methods for transferring the state variable's value from one component to another in React?

I have the following scenario in my code: there is a Form.js component that interacts with an API, stores the response in the walletAssets state variable, and now I want to create a separate Display.js component to present this data. How can I pass the v ...

Utilize AngularJS checkboxes for efficiently handling an array of objects

I recently inquired about How to link objects as models using ng-options in angularjs. Shortly after, I received a fantastic answer. Now, my follow-up question relates to the usage of <select mutiple> for handling the child object array. You can v ...

Encountering Challenges when Implementing Next.js with Jest

When attempting to run a test in next.js using jest, an error keeps appearing: The issue may be due to the wrong test environment being used. Refer to https://jestjs.io/docs/configuration#testenvironment-string for more information. Consider utilizing the ...

Trouble with z-index functionality in jQuery datatable

I'm struggling to get the Action Box displayed as an upper layer. I've already tried using z-index but it doesn't seem to make any difference. https://i.stack.imgur.com/rJ1vL.png $(document).ready(function () { ...

Managing State in a React Drawer Interface

One day, I decided to create a page with a Sidebar on the left, an Appbar at the top, and a content area. Initially, everything functioned seamlessly as one enormous component. However, as we all know, React's charm lies in breaking down various eleme ...

Bootstrap component malfunctioning and not performing as expected

Currently, I am learning how to use Bootstrap and attempting to replicate the example themes found on their official website. The specific theme I am focusing on is available at this link: https://getbootstrap.com/docs/4.3/examples/pricing/ Unfortunately, ...

Having difficulty retrieving model values from the angular ui modal dialog

Being only on my second day in the world of Angular, I am trying to navigate around Angular UI and build my first modal dialog. The modal dialog displays properly, but I'm encountering an issue with using models within it. You can view my demo on Plun ...

Eliminate elements from an array within a promise

I am facing an issue with the currentBillCyclePath parameter in the following function. I need to use this parameter to filter out certain elements after executing the query. However, inside the while loop, the value of currentBillCyclePath is undefined. ...

Sending a Variable and List to a Controller using Ajax

I am having an issue with passing data from a Text Box and a Select Options Multiple using knockout selectedOptions in a viewModel to my Controller via ajax. I am unable to receive the MetricsChosenModel information. var MetricsChosenModel= wi ...

When using jQuery, hover over an li element while ignoring its children

I'm working on customizing a Wordpress menu that has a submenu. I managed to add an arrow to the 'li' element that contains a submenu, and created a hover animation with CSS when the mouse moves over the 'a' tag inside the 'li ...

What is the best way to trigger two separate JavaScript/jQuery functions on a single HTML control, specifically a text field, in response to

Here is the HTML code I have for a text field where functions are implemented: <input type="text" class="form-control" size="20" onblur="GetLocation();" id="zip_code" name="zip_code" value=""> <input type="text" class="form-control" size="20" r ...