Jquery not working in angular 6 Error: ENOENT: no such file or directory, open '…\node_modules\jquery\dist\jquery.min.js'

Question

I am in process migrating Angular 5 project to Angular 6.

While starting application by

npm start

getting the below error

Answer 1

"node_modules/bootstrap/dist/css/bootstrap.min.css" not "../node_modules/bootstrap/dist/css/bootstrap.min.css"

We don't use a relative path.

Answer 2

Install @ngBootstrap with this npm install --save @ng-bootstrap/ng-bootstrap and npm install jquery --save or npm install @types/jquery --save after the installation go to angular.json and locate where

"styles": [
              {
                "input": "styles.css"
              }
            ],
            "scripts": []

and change it to this :

"styles": [
    "styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "./node_modules/jquery/dist/jquery.min.js",
    "./node_modules/bootstrap/dist/js/bootstrap.min.js"
  ]

and ng server --open to run your project

Answer 3

I had the same issue. It appears the installation doesn't update the package.json file unless "--save" is included in the "npm install" command.

In other words, the packages should be installed with

npm install --save bootstrap
npm install --save jquery
npm install --save popper.js

Answer 4

I had a similar issue...

The Jquery plugin didn't have an npm package ready : (
So I decided to put it inside the assets folder...
Evidently that didn't work.
so I did some testing...

Here's what worked for me:

• Navigate to node_modules/jquery/dist/

• — and simply insert the plugin file there.

• Once this is done change your angular.json file
  from:

  "scripts": [ "node_modules/jquery/dist/jquery.min.js", "../assets/libraries/okshadow.min.js" ]

To:

"scripts": [
      "node_modules/jquery/dist/jquery.min.js",
      "node_modules/jquery/dist/okshadow.min.js"
]

And your all set!

P.S. This is on Angular 7.0 rather than Angular 6

Answer 5

To fix the error An unhandled exception occurred: Script file node_modules/jquery/dist/jquery.min.js does not exist.

try installing:

npm install jquery --save
npm install popper.js --save
npm install bootstrap --save

hope this will work

Answer 6

Relative path ../ used to go back one directory. So, first check the file path, if its not contain your project root folder you are searching that jquery file somewhere else that even not exist.

If node_modules file and angular.json both in same directory you donot need to use relative path.

In Angular 6, you donot need to use relative path to go inside node_modules from angular.json(../ or even like ./).