IntelliJ is not able to detect certain JS libraries

Question

IntelliJ is not able to detect certain JS libraries

Currently, I am working on an NDV3 AngularJS graph demo using IntelliJ.

To start off, I have created a standard HTML file named index.html and included all the necessary AngularJS and NDV3 libraries in a folder called bower_components located within the resources folder (specifically defined as 'resource').

Subsequently, I inserted all the essential code into the HTML file, including the aforementioned libraries through script tags.

However, upon running the application, the screen remains blank, indicating that the libraries might not have been detected properly for some reason.

Could anyone provide insight into what mistake I may be making?

https://i.sstatic.net/t5hVp.png

https://i.sstatic.net/chSuR.png

javascript angularjs intellij-idea

Answer 1

Answer №1

I developed and tested an app similar to yours.

web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
</web-app>

index.html

<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="/resources/bower_components/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
  <script src="/resources/bower_components/angular/angular-resource.js"></script>
</head>
<body>

  <div ng-view></div>

</body>
</html>

It worked well for me.

The issue is with the src attribute in your javascript file, it is not pointing correctly to the js file.

<script src="resources/bower_components/angular/angular.js"></script>

Change it to

<script src="/resources/bower_components/angular/angular.js"></script>

I believe this will solve your problem.

Answer 2

I developed and tested an app similar to yours.

web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
  <display-name>Archetype Created Web Application</display-name>
</web-app>

index.html

<!doctype html>
<html lang="en" ng-app="phonecat">
<head>
  <meta charset="utf-8">
  <title>Google Phone Gallery</title>
  <link rel="stylesheet" href="css/app.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <script src="/resources/bower_components/angular/angular.js"></script>
  <script src="js/app.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/services.js"></script>
  <script src="/resources/bower_components/angular/angular-resource.js"></script>
</head>
<body>

  <div ng-view></div>

</body>
</html>

It worked well for me.

The issue is with the src attribute in your javascript file, it is not pointing correctly to the js file.

<script src="resources/bower_components/angular/angular.js"></script>

Change it to

<script src="/resources/bower_components/angular/angular.js"></script>

I believe this will solve your problem.

Answer 3

Answer №2

Take a look at the links below:

information on static file mapping

another relevant post

<servlet>       
  <servlet-name>default</servlet-name>         
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>     
</servlet> 

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

Answer 4

Take a look at the links below:

information on static file mapping

another relevant post

<servlet>       
  <servlet-name>default</servlet-name>         
  <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>     
</servlet> 

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

IntelliJ is not able to detect certain JS libraries

Answer №1

Answer №2

Similar questions

Determine the originating component in React by identifying the caller

Button click not functioning to switch the displayed image in Javascript

creating intricate services using ngTagsInput

Experience an enthralling carousel feature powered by the dynamic ContentFlow.js

Passing data between API tests in JavaScript

Ensuring the validity of input tags

Guide to implementing the Office 365 Javascript API in your application

What is the best way to manage the retrieved data in a situation where I am utilizing async-await along with the useEffect hook?

Is it possible to utilize a variable from a Higher Order Function within a different generation function?

Effective implementation of the useReducer hook across various React components to manage form state

What is the best way to test an AngularJS directive and monitor function calls with a spy?

Tips for resetting the input field in AngularJS ng-repeat?

What is the best way to stop event bubbling in react-router-dom when using the <Link> component?

`Is there a way to dynamically update a nested field object in Mongoose without updating the entire object?`

Utilize HighCharts to seamlessly implement multiple series with the help of AJAX requests

What is the reason behind utilizing the external 'this' within the inner function in Vue: $this=this?

Extract the td elements from a table with specific class using the DataTable plugin

Having issues with implementing PrimeNG components (Directive annotation not detected)

Prevent Node.js Express from automatically creating sessions

Can't get className to work in VueJS function