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.

Answer 1

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"

Answer 2

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"

Answer 3

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 4

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

Answer 5

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"
     ],
     ...

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

Answer 7

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 8

"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 9

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.