Tomcat encounters difficulty accessing the JavaScript directory

Seeking assistance with my first question regarding Angular tutorials. When I deploy to test the script, I encounter an HTTP 404 error. I have tried various solutions suggested for similar issues without success.

It appears to be a path problem as the angular source pointing to an external (https) works fine while the local source does not. Using eclipse with tomcat 8 and the default servlet may be contributing to this issue. Any help in understanding why this is happening would be greatly appreciated.

Below is the structure of my web:

<servlet>
 <servlet-name>default</servlet-name>
   <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>0</param-value>
        </init-param>
        <init-param>
            <param-name>listings</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>jsp</servlet-name>
        <servlet-class>org.apache.jasper.servlet.JspServlet</servlet-class>
        <init-param>
            <param-name>fork</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>3</load-on-startup>
    </servlet>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>/js/*</url-pattern>
</servlet-mapping>

<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>

My HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>AngularJS Controllers</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
    <script type="text/javascript" src="/js/app.js"></script>
  </head>
  <body>
    <div ng-app="app">
      <h1>Controllers</h1>
       <div ng-controller="MainCtrl">
      <p> {{ message }} </p>
      </div>
    </div>
  </body>
</html>

Contents of my .js file:

angular.module('app', []);

angular.module('app').controller('MainCtrl', function ($scope){
      $scope.message = 'hello';
});

Answer №1

From the insights you have provided, it appears that the issue at hand may be related to your web application running in a context path other than ROOT, for example, http://localhost:8080/myapp/. In this case, it is advisable to prefix the context path before /js/app.js, like so: /myapp/js/app.js. Alternatively, you can utilize a relative URL when referencing it in your index page, simply use js/app.js without the forward slash.

In addition, I suggest removing all occurrences of <servlet> and <servlet-mapping> elements mentioned in the question from your web.xml file. Tomcat already provides default servlet configurations, eliminating the need for any extra configurations on your end.

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

Updating parent data in Vue.js does not automatically trigger an update in the child component

I have the following: Vue.component('times-updated', { template: '<span>Times Updated: {{ timesUpdated }}</span>', data: function() { return { timesUpdated: this.$parent.myData.timesUpdated ...

How to organize and reuse code efficiently with Node.js, EJS, and front-end JavaScript?

It seems that I may have chosen the wrong platform by posting this question on the 'Software Engineering' exchange: Currently, my focus is on learning the MEAN stack (I have yet to dive into Angular, so for now I am using pure vanilla JS for the ...

Issue with Jquery UI sortables not functioning properly

Struggling with getting a sortable list to work using jQuery UI. The ul element is receiving the class 'ui-sortable' but nothing seems to be happening. To demonstrate this issue, I created an example since the original javascript code is quite c ...

Having trouble setting a value in a Vue.js variable

Upon assigning a value retrieved from the firebase collection, I encountered the following error message. Error getting document: TypeError: Cannot set property 'email' of undefined at eval (Profile.vue?5a88:68) Here is the code snippet in que ...

Combining shared table rows with embedded ruby code in Javascript - is it possible?

I'm a new Javascript learner and I'm attempting to create a function that will merge rows with the same value (year in this case) and add their numbers together. Although my code isn't functioning as expected, it also doesn't seem to be ...

Guide to integrating Firebase token authentication with a web API2 controller

In order to pass a Firebase authentication token to a web API controller, I am following steps outlined in this StackOverflow post: stackoverflowpost The bearer token is included in the $http request headers. https://i.sstatic.net/GTJz0.png Despite addr ...

Include the model.obj file into the three.MESH framework

I am a beginner in three.js and I am developing an augmented reality application on the web to showcase plates of food. Currently, I have successfully displayed a cube. However, when I attempted to display a model.obj instead of using geometry and material ...

What is the best method for packaging a React component library?

Currently, I am working on developing a React component library that I aim to distribute via npm to reach a wide audience. In my development process, I utilize webpack and babel for packaging and code processing. However, as a newcomer to webpack, I am uns ...

Show me a list of all the commands my bot has in discord.js

Recently, I developed a Discord bot using discord.js and attempted to create a help command that would display all available commands to the user. For example, one of the commands is avatar.js module.exports.run = async(bot, message, args) => { le ...

What steps should I take to create a slider using my image gallery?

I have a unique photo gallery setup that I'm struggling with: As I keep adding photos, the cards in my gallery get smaller and smaller! What I really want is to show only 4 photos at a time and hide the rest, creating a sliding effect. I attempted ad ...

ESLint's no-unused-vars rule is triggered when Typescript object destructuring is employed

I'm encountering an issue with my Typescript code where I am destructuring an object to extract a partial object, but it's failing the linter check. Here is the problematic code snippet: async someFunction(username: string): Promise<UserDTO> ...

Combining Multiple Optional Async AJAX Calls

In my Angular 1.5.8 app, I have different views that require various combinations of the same 3 ajax requests. Some views need data from all three endpoints, while others only need data from one or two. To efficiently manage the retrieval of this data, I ...

Experience Markdown's Single Input Update Feature

I have recently developed a Markdown editor using Vue, similar to the examples found on Vue's website. However, my query is more related to implementation rather than Vue itself. Therefore, I am open to suggestions that do not necessarily involve Vue. ...

Having difficulty populating the token in the h-captcha-response innerHTML and g-recaptcha-response innerHTML

I am attempting to use 2captcha along with Selenium and Python to bypass an Hcaptcha. After receiving my 2captcha token, I attempt to input it into the textareas labeled 'h-captcha-response' and 'g-captcha-response'. However, this app ...

Enhance the appearance of your custom Component in React Native by applying styles to Styled Components

I have a JavaScript file named button.js: import React from "react"; import styled from "styled-components"; const StyledButton = styled.TouchableOpacity` border: 1px solid #fff; border-radius: 10px; padding-horizontal: 10px; padding-vertical: 5p ...

PubSub.js offers a solution for efficiently managing multiple subscriptions or dealing with multiple callbacks in a more streamlined manner

I am currently exploring the most effective approach for handling a specific scenario. My goal is to establish the following flow: 1.) Obtain configuration data from the server (asynchronously) 2.) Execute doStuff() once the configuration data is receive ...

Loop through the API URLs for AngularJS

$http({method: 'GET', url: '/xxx/xxx/xas'}).success(function(data) { $scope.website = data.websites; }); $http({method: 'GET',url: '/xx/xasxxx?websiteId='+$scope.website.websiteId}).success(function( ...

The Date Filter is causing a glitch in formatting the date value

I have a variable called dateSubmitted with the value of "dateSubmitted": "07-09-20:11:03:30" Currently, I am utilizing Angular Version 7 Within my HTML code, I am using the date filter to format the date like so: <td> {{element.dateSubmi ...

Utilize JavaScript to parse and retrieve specific data from an SVG file in XML format

I am attempting to retrieve an svg file using jquery or javascript. Here is an example of the svg code: <svg width="111" height="123" xmlns="http://www.w3.org/2000/svg"> <g> <title>Layer 1</title> <rect fill="#ffffff" strok ...

What is the best way to retrieve the ID of the list item that has been clicked during a button event?

How can I use jQuery to get the ID of a selected list item when clicking a button in my HTML code? <ul id="nav"> <li><a href="#" rel="css/default.css" id="default" > <div class="r1"></div> </a>< ...