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

 ** Angular Live Development Server is listening on localhost: 9000, 
open your browser on http://localhost:9000/ **
91% additional asset processing scripts-webpack-plugin× ｢wdm｣: 
Error: ENOENT: no such file or directory,open'\trunk\node_modules\jquery\dist\jquery.min.js'

I tried

npm install jquery --save
npm install @types/jquery --save

Nothing is working

I checked my node modules folder I can able to see the jquery file

Pasted my package.json and angular.json below

package.json

"dependencies": {
"@angular/animations": "^6.0.0",
"@angular/common": "^6.0.0",
"@angular/compiler": "^6.0.0",
"@angular/core": "^6.0.0",
"@angular/forms": "^6.0.0",
"@angular/http": "^6.0.0",
"@angular/platform-browser": "^6.0.0",
"@angular/platform-browser-dynamic": "^6.0.0",
"@angular/router": "^6.0.0",
"@ng-bootstrap/ng-bootstrap": "^2.0.0",
"bootstrap": "^4.1.1",
"core-js": "^2.5.4",
"font-awesome": "^4.7.0",
"jquery": "^3.3.1",
"@types/jquery": "^3.3.1",
"popper.js": "^1.14.3",
"rxjs": "^6.0.0",
"zone.js": "^0.8.26"
 },
"devDependencies": {
"@angular/compiler-cli": "^6.0.0",
"@angular-devkit/build-angular": "~0.6.0",
"typescript": "~2.7.2",
"@angular/cli": "~6.0.0",
"@angular/language-service": "^6.0.0",
"@types/jasmine": "~2.8.6",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~1.4.2",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1"
}

angular.json

"styles": [
          "src/styles.css",
          "../node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./assets/css/font-icon.css",
          "../node_modules/font-awesome/css/font-awesome.css"
        ],
        "scripts": [
          "../node_modules/jquery/dist/jquery.min.js",
          "../node_modules/popper.js/dist/umd/popper.min.js",
          "../node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

Please help me to resolve this issue.

It's so easy. just remove one DOT from path in styles array and scripts array like: "./node_modules/jquery/dist/jquery.min.js" — Parth Savadiya, May 17 '18 at 12:17

score 109 · Accepted Answer · answered May 19 '18 at 16:59

109

Once again the angular team makes things harder for not real reason =(

I had this problem and after Googling around fruitlessly I wondered if they had changed relative paths somehow as well as renaming angular-cli.json.

A little further up in the file I found the line:

Yeah, just change:

"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"

to

"./node_modules/jquery/dist/jquery.js",
"./node_modules/tether/dist/js/tether.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"

answered May 19 '18 at 16:59

Belmiris

2,741
3
25
29

2

This should be the right answer. So Angular 6 changed how they locate node packages also. – Sherwin Ablaña Dapito May 21 '18 at 01:45
Seriously what the... this change about node packages should have been more broadcasted... thanks for your answer! – Natalie Perret Jul 18 '18 at 21:28
It worked for me after replacing "../node_module*" with "node_modules*". I am using angular 8 – Mahesh Vemula Jun 19 '19 at 06:26
but where to do such changes. I mean going in which directory?? – chirag soni May 26 '20 at 06:22
this does not work in angular 12. I keep getting no such file error, nothing to do with syntax looks like it. – tekin Jul 21 '21 at 21:36

score 7 · Answer 2 · answered Jun 11 '18 at 12:59

In Angular 6 u don't need to write:

"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"

You can write with ./ like on the top this will works too, but the easiest way in angular.json file:

"node_modules/jquery/dist/jquery.js",
"node_modules/tether/dist/js/tether.js",
"node_modules/bootstrap/dist/js/bootstrap.js"

In my opinion it's better and clear

score 5 · Answer 3 · answered Aug 27 '18 at 11:06

For Angular 6 the path is as follows:

from:

"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"

to

"./node_modules/jquery/dist/jquery.js",
"./node_modules/tether/dist/js/tether.js",
"./node_modules/bootstrap/dist/js/bootstrap.js"

Alverson Layne · Answer 4 · 2020-02-27T16:50:27.887

5

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

edited Feb 27 '20 at 16:50

answered Feb 27 '20 at 16:30

Alverson Layne

97
1
4

score 2 · Answer 5 · edited Aug 07 '20 at 03:27

2

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

edited Aug 07 '20 at 03:27

Freefri

698
7
21

answered Aug 06 '20 at 15:52

Thansira

21
2

score 2 · Answer 6 · answered Jul 09 '21 at 08:57

2

In Angular 12 I had no preceding dots and slashes but in order to resolve this error I had to add them.

So I changed

node_modules/jquery/dist/jquery.js

to

./node_modules/jquery/dist/jquery.js

in angular.json file

answered Jul 09 '21 at 08:57

Ree

863
2
18
38

score 1 · Answer 7 · answered May 29 '18 at 08:59

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

score 1 · Answer 8 · edited Jun 16 '23 at 12:47

1

For me, type this command npm install jquery --save in the same directory of repository and it works. Even I already had jquery.js under the directory of node_modules.

edited Jun 16 '23 at 12:47

Tyler2P

2,324
26
22
31

answered Jun 16 '23 at 07:40

Lipin Guo

11
1

score 0 · Answer 9 · answered May 15 '18 at 19:14

In your file 'tsconfig.json', you make maybe

{
  "compileOnSave": false,
  "compilerOptions": {
  "baseUrl": "./",
  "outDir": "./dist/out-tsc",
  "sourceMap": true,
  "declaration": false,
  "moduleResolution": "node",
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "target": "es5",
  "typeRoots": [
  "node_modules/@types"
  ],
  "lib": [
    "es2017",
    "dom"
  ]
 },
"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"], 
}

You can replace

"include": ["node_modules/angular-bootstrap-md/**/*.ts",  "src/**/*.ts"],

to

"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

Moreover, in your file 'angular.json', I delete '../' in front of node_modules in "styles" and "scripts".

And I copied lines of the "scripts" in the "scripts" in the category "test"

"test": {
     ...
     "styles": [
       "src/styles.css"
        "node_modules/bootstrap/dist/css/bootstrap.min.css",
        "./assets/css/font-icon.css",
        "node_modules/font-awesome/css/font-awesome.css"
     ],
     "scripts": [
        "node_modules/jquery/dist/jquery.min.js",
        "node_modules/popper.js/dist/umd/popper.min.js",
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
     ],
     ...

score 0 · Answer 10 · answered Oct 08 '18 at 09:18

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 ./).

score 0 · Answer 11 · edited Jan 11 '19 at 05:00

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

score 0 · Answer 12 · answered Aug 14 '19 at 22:33

0

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

We don't use a relative path.

answered Aug 14 '19 at 22:33

Anushil Kumar

674
8
8

score 0 · Answer 13 · answered Sep 01 '19 at 07:45

0

Paths in angular-cli.json are relative to the project root (src/ normally). For instance, you have the src/styles.css file, but in angular-cli.json it's listed only as styles.css.

answered Sep 01 '19 at 07:45

Muthusankar

5
5

score 0 · Answer 14 · answered May 14 '21 at 09:37

0

You probably forgot to run "npm install -g @angular/cli" command when you created your app.

answered May 14 '21 at 09:37

Drilon Mahmudi

1
1

score 0 · Answer 15 · edited May 31 '21 at 10:19

0

Resolved by removing ../ and ./

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

edited May 31 '21 at 10:19

Alexis

1,685
1
12
30

answered May 30 '21 at 21:54

Pasha

1

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

15 Answers15

Linked