Encountering a 404 error while attempting to add the angular.min.js file

I am a beginner in AngularJS and I am facing an issue while trying to include the angular.min.js file in my HTML. Although the path seems correct and it works for other JS files, I am encountering a 404 error specifically for angular.min.js. Do I need to configure something else to make it work? The friends.js file included below is working fine.

<script type="text/javascript" src= "/WebServices/js/friends.js"></script>
<script type="text/javascript" src= "/WebServices/js/angular.min.js"></script>

For further details, you can check the response in console or refer to my web.xml file:

<servlet>
<servlet-name>MainServlet</servlet-name>
<servlet-class>com.sun.jersey.spi.container.servlet.ServletContainer</servlet-class>

</servlet>
<servlet-mapping>
<servlet-name>MainServlet</servlet-name>
<url-pattern>/rest/*</url-pattern>
</servlet-mapping>

Below is the folder structure of the project "WebServices": folder structure 1

javascriptangularjs

Answer №1

UPDATE: additional details provided by the original poster

You have provided the absolute path to the WebServices folder. Have you checked if the WebServices folder contains a nested js folder with a file named friends.js? This is likely the case. The correct path to your angular.min.js file should be (relative to WebServices): 

/WebServices/WebContent/js/angular.min.js
. Try accessing this URL in your browser to see if it works. If it does, it suggests that you have mistakenly placed friends.js in the WebServices directory; you may want to correct this. If it doesn't work, there may be an issue with your web server. Before jumping to conclusions, could you please confirm the root path of the server? Is it WebContent or WebServices?

One possible problem could stem from using an absolute URI like /path/to/file. In most cases, web servers interpret this as the full URL leading to the specific file. For example, if your index.html file resides in the public directory, specifying /path within the same folder will actually direct the server to the root domain.

Consider a scenario where the root directory of your web server is called server, and you have the following structure:

├── public
│   ├── index.html
│   └── js
│       └── index.js
└── root

If your index.html includes the line:

<script src="/js/index.js"></script>

The web server will attempt to retrieve data from the parent folder, which is the server directory. This common mistake can lead to confusion.

Please provide us with more information so we can assist you in resolving these issues. Include details about the root configuration and directory layout.

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

The program is designed to only allow up to two images to be wrapped

I'm struggling with a short jQuery program that I need help with. The problem is, I can't seem to get it to wrap more than two images in the same row. My goal is to create a website that side-scrolls, and I thought this approach would be the simp ...

javascriptjquerycsshtml

Customizing the Class of a jQuery UI ui-autocomplete Combobox Container

Is there a way to customize the ui-autocomplete div by adding a custom class? I have several autocomplete widgets on my webpage, and I need to style their drop-downs differently. Since editing the ui-autocomplete class directly is not an option, I am wor ...

javascriptjquerycssjquery-uiautocomplete

Angular2 can dynamically display or conceal a content div based on the value selected in a select box

I am struggling with the issue of hiding and showing a div based on the value selected from a drop-down list. As a newcomer to Angular technology, I attempted using functions without success. I have heard that simply utilizing (ng-model) could achieve this ...

javascriptjqueryhtmlcssangular

Determine the corner points of the DOM element following the application of CSS transforms such as rotateX, rotateY, and perspective

To achieve the transformative effect on elements, I utilize rotateX, rotateY, and perspective properties. By using getBoundingClientRect(), I am able to retrieve details such as top, left, bottom, right, width, and height of an element. Is there a method ...

javascriptcssimage-processinggeometry

Keeping the header fixed on a sticky div (tocbot)

While working on my website, I decided to implement a Table of Contents section using tocbot. However, I encountered an issue where the Title I added above the table doesn't stay fixed when scrolling. https://i.stack.imgur.com/vCm1K.gif Here's ...

javascripthtmlcsssticky

The back button becomes unresponsive when using Angular Material Paginator following data retrieval

Having difficulty with the material paginator. The data retrieval is accurate and the pageIndex updates properly, however, the item count does not change. This issue seems to be related to the onChangedPage($event) function as removing it resolves the prob ...

javascripthtmlangularangular-materialangular-pagination

Custom Component in React Bootstrap with Overflowing Column

I am working on a custom toggle dropdown feature in my React application: import React from 'react'; import 'react-datepicker/dist/react-datepicker.css'; const DateRange = props => ( <div className="dropdown artesianDropdo ...

javascripthtmlcsstwitter-bootstrapreactjs

Can the ThreeJS element be seen?

I am facing a challenge in my ThreeJS application where the view automatically centers on an object if it is close to the center of the view and closer than a specified distance. While I have information about the latitude and longitude of all objects and ...

javascript3dthree.js

What is the best way to populate a select box with the previous value in AngularJS?

My issue involves a select box with ng-options. I am attempting to load the previous value by default, which is stored as {{c.fact}}. I have tried using ng-value="c.fact" within the select box, but it did not work as expected. Can someone please provide ...

angularjsangularjs-scope

Activate the button for a single user exclusively on the webpage

I'm working on a project where I need to control several rotating devices with the push of a button. The catch is, I only want one user to be able to activate the button at a time. Essentially, when a user accesses the website, I need to determine if ...

javascriptphphtml

Utilizing the power of d3.js within Angular 4

Currently, I have successfully implemented code to draw a polygon using the mouse in a normal JavaScript file. Now, I am looking to replicate the same functionality in my TypeScript file. Below is an excerpt from my d3.js file: //D3.JS VERSION 3 //------ ...

javascriptangulartypescriptd3.jssvg

What could be causing my console to display "NaN" when working with the class extension feature

During the development of my project, I encountered a problem with getting the parameter from the parent class. The value returned is NaN while the other one returns true. Here is the code snippet: class transportasi {//class parent constructor(nama ...

javascripthtml

The attempt to establish a WebSocket connection to 'ws://localhost:4000/graphql' was unsuccessful:

Encountering the Websocket failed to Connect error on both the client and server sides (shown in image below) has left me puzzled for the past 2 days. I have not made any other Websocket configurations apart from the one specified in the apollo client. Any ...

javascriptvue.jswebsocketapollo-server

The route to the template file within a JS script in a Symfony/Angular project

I am currently working on a project that utilizes both AngularJS and Symfony, but I'm struggling to correctly define the path of a twig template in my JavaScript code. I need to locate: -the original JS file -the template file ...

javascriptangularjssymfonyassets

What is the recommended location for Next.js middleware placement?

I am currently utilizing version ^13.5.3 of Next. I have created a middleware.js file in the pages/middleware.js directory import { NextResponse } from "next/server"; export function middleware(req) { ... } This is resulting in the following ...

javascriptnext.jsnext.js13

Strategies for accessing a collection of DOM elements in React

Currently, I'm embarking on a challenge to complete 50 projects in 50 days by Brad Traversy. However, I've decided to take it up a notch by building them in Next.js with React since that's what I work with professionally. Unfortunately, thi ...

javascriptreactjsnext.jscomponents

Set boundaries for the width and height of an image in the input field

Looking to restrict the size of an image in an input field using HTML, CSS, and JavaScript/jQuery. Goal is to maintain a perfect square aspect ratio for profile photo uploads (for example, 200x200 or 300x300). ...

javascriptjqueryhtmlcss

Is there a way to have these slides repeat automatically?

After spend some time working on this, I've hit a roadblock. I managed to create a div slider with navigation arrows where each slide has a minimum width of 80px. The code functions correctly, except that when I reach the last item and try to naviga ...

javascripthtmlcss

I am facing an issue with angular-fullstack where socket.io is not updating my controller, even though it is syncing the 'awesomeThings' example

After experimenting with various approaches on my tests, I decided to go back to the original code from angular-fullstack and attempt to replicate a working example. Unfortunately, I have been unable to get it functioning properly: My changes do not synchr ...

angularjsnode.jssocketssocket.ioangular-fullstack

Exploring methods to validate an ExpressJS controller in a NodeJS environment

I encountered an issue while trying to unit test my controller. The error message I received is as follows: Any suggestions on alternative methods for testing my controller are welcome. Error: A TypeError was thrown with the message "expected sinon o ...

javascriptnode.jsexpresssinonchai